En esta ocasión vamos a crear un menú responsive o adaptativo para nuestra página web, de forma que dicho menú se adapte a todos los dispositivos tanto móviles, como tablet o pcs. Para crear este menú vamos a utilizar jquery, lo primero que hacemos es crearnos dentro del archivo html la lista de los enlaces del menú de forma similar a la siguiente:

<nav class="menuresponsive">
    <ul class="menu">
    	<li><a href="#">Incio</a></li>
    	<li><a href="#">Galeria</a></li>
    	<li><a href="#">Trabajos</a></li>
        <li><a href="#">Contacto</a></li>
    </ul>
 </nav>

Con esto y un poco de estilo ya tendremos nuestro menú funcionando, añadimos el siguiente css a nuestra hoja de estilos:

.menu{
	list-style-type:none;
	margin:0px;
	padding:0px;
}
.menu li a{
        float:left;
        width:25%;	
	height:40px;
	line-height:40px;
	background-color:#00FF4C;
	color:#01008A;
	display:block;
	border-bottom:1px #095603 solid;
	text-align:center;
	text-decoration:none;
}

Con esto tendríamos nuestro menú funcionando en el pc.

A continuación vamos a modificar el HTMl para añadirle el botón o texto (nosotros hemos elegido poner una imagen y un texto) que queremos que salga en el móvil añadiendo el siguiente class=»movil» dentro de nuestro menú dejándolo como sigue:

<nav class="menuresponsive">
	<div class="movil">
    	<img src="imagenes/menu.png">
        Menú
    </div>
    <ul class="menu">

Vamos a modificar el codigo CSS anterior para indicarle que se oculte el menu y que cada opcion del menu ocupe el 100% de la pantalla pues ese codigo es el que hara que se muestre el menu en el movil, y lo dejamos como sigue:

.menu{
	list-style-type:none;
	margin:0px;
	padding:0px;
	display:none;
}
.menu li a{
	width:100%;
	height:40px;
	line-height:40px;
	background-color:#00FF4C;
	color:#01008A;
	display:block;
	border-bottom:1px #095603 solid;
	text-align:center;
	text-decoration:none;
}

A continuación añadimos un media query que hará que se modifique el aspecto en los dispositivos de mas de 769px, en este media query nosotros ocultamos la clase móvil y ponemos lo que hemos quitado anteriormente, dejándolo como sigue:

@media (min-width:769px){
	.menu{
		display:block;
	}
	.movil{
		display:none;
	}
	.menu li a{
		width:25%;
		float:left;
	}
}

Con estos cambios lo que hacemos es que cuando estemos en el pc se vea el menú y cuando estemos en el móvil se vea la imagen con el texto Menú.

Ahora nos quedaría por hacer visible o invisible el menú cuando pinchamos en la imagen o el texto, para ello lo primero que hacemos es agregar un estilo que llamamos visible con el siguiente codigo:

.visible{
	display:block;
}

Luego en HTML incluimos una llamada a jquery y el siguiente código que hará que cuando pinchemos en menú se muestre u oculte el menú en el móvil.

<script type="text/javascript" src="js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
    $(".movil").click(function(e) {
      $(".menu").toggleClass("visible");
	
    });
});
</script>

De esta manera ya tendríamos nuestro menú funcionando.

Si bien ya estaría funcionando en el móvil aparecerá y desaparecerá el menú de golpe, si quiero que aparezca con un efecto podríamos modificar el código javascript y dejarlo como sigue:

<script type="text/javascript" src="js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
	$(".movil").click(function(e) {
	  if($(".menu").is(":visible")){
		 $(".menu").slideUp(500);
	  }else{
  		 $(".menu").slideDown(500);
	  }
    });
});
</script>

Aquí podemos ver el ejemplo funcionando o descargatele: