-1

Tengo un paginaweb, la cual tiene un menú y abajo de este hay un div:

MENU

 <ul>
    <li>
        <a  href="#" onclick="PURO.consultar({'opcion':'https://cfp27-tarde2016-maximilianou.c9users.io/public/index.html'})">Pag. Principal  </a>
    </li>
    <li>
        <a  href="#" onclick="PURO.consultar({'opcion':'https://cfp27-tarde2016-maximilianou.c9users.io/public/maxi/'})">Maxi  </a>
    </li>
    <li>
        <a  href="#" onclick="PURO.consultar({'opcion': 'https://cfp27-tarde2016-maximilianou.c9users.io/public/juani/'})">Juani  </a>
    </li>
    <li>
        <a  href="#" onclick="PURO.consultar({'opcion': 'https://cfp27-tarde2016-maximilianou.c9users.io/public/leandro/'})">Leandro  </a>
    </li>
    <li>
        <a  href="#" onclick="PURO.consultar({'opcion': 'https://cfp27-tarde2016-maximilianou.c9users.io/public/jony/'})">Jony  </a>
    </li>
</ul>

DIV

Al clickear en una opción del menú de arriba aparecerá una pagina dentro de este div.. en este caso el menú desplegable con sub-menus...

<div id="panelContenedor" ></div> 
   <script type="text/javascript"> src="js/ajax.js"</script> 
   <script type="text/javascript"> src="js/script.js"></script> 
   <script type="text/javascript"> src="js/mustache.js"></script>

JQuery

Este es el jquery del menú que aparece dentro del div

$(document).ready(function(){ 
    var touch   = $('#resp-menu');
    var menu    = $('.menu');

    $(touch).on('click', function(e) {
        e.preventDefault();
        menu.slideToggle();
    });

    $(window).resize(function(){
        var w = $(window).width();
        if(w > 767 && menu.is(':hidden')) {
            menu.removeAttr('style');
        }
    });

});

Y este el header del menú que aparece dentro del div..

<head>
    <meta charset="utf-8">
    <!--<meta name="viewport" content="initial-scale=1">-->
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="estilo.css" type="text/css" />

    </head>

Cuando clickeo en el menú, me aparece dentro del div una pagina web (que solo continene el menu con sub-menus ) mediante ajax... pero estos menús y sub-menús se deforman dentro de este div.. aparecen abiertos los lee como divs no como menús.. como si fueran divs dentro de otros ..

No quiero poner mas código por que no se si sea conveniente...

2
  • Por lo que entiendo lo que haces es cargar via AJAX un archivo HTML dentro de un DIV. Este archivo HTML imagino que a su vez tiene código JavaScript que controla el submenú. SI es así lo más probable es que ese código no se esté ejecutando. Para conseguir que te funcione deberá llamar a ese código una vez el DIV se cargue,lo puedes hacer con un callback.
    – eledgaar
    el 16 ago. 2016 a las 12:59
  • Ok... Gracias @eledgaar por responder... pero no entiendo el funcionamiento de un callback con una funcion de javascript como parametro ... tengo un ejemplo de callback ... x = function(param, callback){ if ((callback) && (typeof callback === 'function')){ callback(param); } else console.log(param, callback); } // ejemplo utilizando 2 parametros de tipo string x('a', 'b'); // ejemplo utilizando 2 parametros, uno de tipo string y el otro siendo una función x('a', function(val){ alert(val); });
    – TOMAS
    el 29 ago. 2016 a las 1:51

1 respuesta 1

0

Te voy a poner un ejemplo sencillo

<div class="padre">
    <a href="#">Opcion 1</a>
    <a href="#">Opcion 2</a>
    <a href="#">Opcion 3</a>
    <a href="#">Opcion 4</a>
    <a href="#">Opcion 5</a>
</div>

Usando css y en especial usando flexbox podemos hacer las cajas responsive con gran facilidad.

.padre {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center
}

De esta manera todos los elementos que estén dentro del contenedor padre, serán colocados en columnas y en caso de no entrar pasará a la linea de abajo (flex-flow: row wrap;), serán centrados y repartidos entre el total del ancho del contenedor padre (justify-content: space-between;) y centrados verticalmente (align-items: center;)

No olvidar que para activar las propiedades de flexbox tienes que añadir en el contenedor padre el codigo:

display:flex

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.