Menu responsive adaptable para móviles con jquery
Otro ejemplo mas avanzado de como hacer un menu responsive desplegable y adaptable a móviles con jquery y css3. Es el típico menú que al visualizarse en dispositivos móviles o pantallas pequeñas cambia su aspecto por el de un menu mas comprimido y jerárquico.
Captura:
Código completo:
Si te a sido útil, compártelo..
Captura:
Código completo:
<html> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <body> <nav id="menu"> <li id="nav_mobile">Menu <img src="http://i.imgur.com/aGcQlI5.png" style="width: 16px; margin-bottom: -3px"></li> <div id="oculto"> <li><a href="#">Inicio</a></li> <li>Categoria <img src="http://i.imgur.com/YumZS1I.png" width="13" height="12"> <ul style="display:none"> <li><a href="#">Categoria1</a></li> <li><a href="#">Categoria2</a></li> <li><a href="#">Categoria3</a></li> </ul> </li> <li><a href="#">Imagenes</a></li> <li><a href="#">Musica</a></li> </div> </nav> <script> //Desplegar al hacer clic $('#menu li').click(function(){ $(this).find('ul').slideToggle('slow'); }); $('#nav_mobile').click(function(){ $('#oculto').slideToggle('slow'); }); </script> <style> body { background:f1f1f1; font-family: 'Open Sans', sans-serif; } #menu { float:left; overflow:hidden; } #menu a{ text-decoration:none; color:#fff; } #menu li { float: left; overflow: hidden; list-style: none; padding: 10px 0px; border: 1px solid #ddd; background: #424242; color: #fff; text-align: center; min-width: 280px; } #menu li:hover { cursor:pointer; } #menu li img{ margin: 0px 0px -2px 0px; } #menu ul{ position: absolute; margin: 0px; padding: 0px; margin-top: 11px; max-width: 280px; overflow: hidden; } #menu ul li { background:#575757; } #nav_mobile { display:none; background: #353535 !important; } #oculto { overflow:hidden; } @media screen and (max-width: 580px) { #menu li { float:none; } #menu ul { position: relative; } #menu ul li { border:none; } #nav_mobile { display:block; } #oculto { display:none; } } @media screen and (min-width: 580px) { #oculto { display: block !important ; } } </style> </body> </html>Demo
Si te a sido útil, compártelo..
0
Puntos
Puntos
7450
Visitas
Visitas
3
Resp
Resp
Por alber hace 109 meses
Administrador
Respuesta #1
Muchisimas gracias alber, yo lo que necesito es implantarlo en un plantilla para wordpress, y me estoy volviendo loco, yo creo que lo que hay que modificar es el jquery, creo, y ahi es donde me piedo
0
Puntos
Puntos
Por borch hace 109 meses
Avanzado
Respuesta #2
Por lo que yo he podido ver en otras plantillas, creo que hay que modificar el jquery, y es ahi donde me pierdo
0
Puntos
Puntos
Por borch hace 109 meses
Avanzado
Respuesta #3
Ya esta solucionado, gracias alber, me ha venido de perlas, mil gracias, y perdona.
0
Puntos
Puntos
Por borch hace 109 meses
Avanzado