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:

<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

7388
Visitas

3
Resp

Por alber hace 10 años

Admin

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

Por borch hace 10 años

Developer

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

Por borch hace 10 años

Developer

Respuesta #3

Ya esta solucionado, gracias alber, me ha venido de perlas, mil gracias, y perdona.

0
Puntos

Por borch hace 10 años

Developer