Menu Responsive Me con media Queries, jQuery y HTML5
En este artículo vamos a ver como crear un menú responsive design utilizando las media Queries, algo de jQuery y HTML5.
El ejemplo que vamos a ilustrar es totalmente responsive design e incluye una cabecera donde estará el menú + el titular de la página, una columna de widgets, el contenido y un pie de página. En este artículo tan solo nos vamos a centrar en el menú horizontal responsive design.
Dentro del <body> añadiremos el código del menú:
<nav> <ul id="menu"> <li><a href="#">PRESTASHOP</a></li> <li><a href="#">WORDPRESS</a></li> <li><a href="#">JOOMLA</a></li> <li><a href="#">DRUPAL</a></li> <li><a href="#">MAGENTO</a></li> <li><a href="#">OSCOMMERCE</a></li> </ul> <div class="menu_select"> <div id="selectme">CATEGORIAS</div> <span id="arrow" class="down"></span> <ul id="options"> <li><a href="#">PRESTASHOP</a></li> <li><a href="#">WORDPRESS</a></li> <li><a href="#">JOOMLA</a></li> <li><a href="#">DRUPAL</a></li> <li><a href="#">MAGENTO</a></li> <li><a href="#">OSCOMMERCE</a></li> </ul> </div> </nav>
Podría crear confusión ya que hay 2 menús. Lo que estamos haciendo es aplicar un truco. Tendremos un menú que mostraremos para los dispositivos móviles y otro para el PC.
Este efecto lo conseguimos empleando CSS y las media queries:
#menu {
float:left;
width:100%;
margin:0px;
padding:0px;
background-color:#000000;
}
#menu li {
float:left;
list-style:none;
}
#menu li a {
background-color: #000000;
color: #FFFFFF;
padding: 10px 20px;
text-decoration: none;
width: 100%;
float:left;
}
#menu li a:hover {
background-color: #EEEEEE;
color: #000000;
}
.menu_select {
width:97%;
float:left;
display:none;
position:relative;
}
#selectme {
width:80%;
background-color:#000000;
color:#ffffff;
padding:10px;
font-weight: bold;
text-align:left;
cursor:pointer;
float:left;
}
ul#options {
width:100%;
float:left;
margin:0px;
padding:0px;
display:none;
}
ul#options li {
width:98%;
float:left;
}
ul#options li a {
color: #ffffff;
padding:10px;
font-weight: bold;
text-align:left;
text-decoration:none;
cursor:pointer;
margin-bottom:1px;
width:100%;
float:left;
}
ul#options li a:hover {
color:#000000;
background-color:#EEEEEE;
text-decoration: none;
}
ul#options li:hover {
}
#arrow {
position: absolute;
right: 10px;
top: 12px;
cursor: pointer;
}
.down {
background-image:url("../images/plus-white.png");
background-repeat:no-repeat;
height:20px;
width:20px;
}
.up {
background-image:url("../images/minus-white.png");
background-repeat:no-repeat;
height:20px;
width:20px;
}
@media only screen and (max-width: 980px) {
nav ul { display: none; }
nav select { display: inline-block; width:100%; background-color: #000; color:#FFF; font-size: 16px; font-weight: bold; }
nav .menu_select { display: inline-block; width:100%; background-color: #000; color:#FFF; font-size: 16px; font-weight: bold; }
}
En el código CSS anterior lo que tenemos son los estilos del menú para pantallas con un ancho de más de 980px y el estilo para pantallas menores a 980px. Se podría ajustar más adaptando el código para todas las pantallas pero no es el objetivo de este tutorial.
Ahora solo falta el jQuery para aplicar la funcionalidad del menú para pantallas con un ancho de menos de 980px.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#selectme').on('click', function() {
if ($('ul#options').is(':hidden')) {
$('ul#options').show();
$('#arrow').removeClass('down');
$('#arrow').addClass('up');
}
else {
$('ul#options').hide();
$('#arrow').removeClass('up');
$('#arrow').addClass('down');
}
});
$('#arrow').on('click', function() {
if ($(this).hasClass('down')) {
$('ul#options').show();
$(this).removeClass('down');
$(this).addClass('up');
}
else {
$('ul#options').hide();
$(this).removeClass('up');
$(this).addClass('down');
}
});
$('#options li a').on('click', function() {
var value = $(this).text();
$('#selectme').text(value);
$('ul#options').hide();
});
});
</script>
El código anterior se utiliza al elegir una opción del menú para dispositivos móviles.
Autor
¿Buscas trabajo de programador?
4 respuestas a “Menu Responsive Me con media Queries, jQuery y HTML5”
Deja una respuesta
74 artículos que te podrían interesar
disculpa no es necesario repetir el mismo menú, utiliza el display para ocultar el menu version web y en version movil, creando dos modelos de menú en uno..
para eso esta el media Queruies
ejemplo:
@media only screen and (min-width: 40.0625em) {
.menu_select{
display: none;
}
}
@media only screen and (max-width: 40em) { aquí determinas como quieres tu menú aqui le das el estilo etc…
.menu_select{
display: block;
}
}
saludos, intentalo!!
Muchas gracias wendy por tu aportación!
Son excelentes la mayoria de tus articulos, se agradece mucho tus aportes
Estan muy buenos tus artículos, pero estarían mejor si dejaras el código al final de la explicación…
Saludos!