logo-antoiba

Antonio Ibáñez Programming

Menu Dropdown con jQuery y CSS responsive

CSS3 jQuery JavaScript HTML5 HTML

Anteriormente he publicado un artículo para hacer un menú dropdown en esta web que podéis ver aquí.

A continuación lo vamos a hacer responsive para que se adapte a todos los dispositivos.

Debéis bajaros el icono para el menú o si lo tenéis ya, pues mejor. La siguiente página icomoon tiene bastantes iconos muy fáciles de usar .

Solo debéis iros a icomoon App, elegid el icono que queráis y pulsar generate font. A continuación lo descargáis y solo necesitáis los archivos de style.css y la carpeta de fonts. Podéis renombrar como queráis el archivo css. Creáis un span (que está creado en el artículo anterior) y le ponéis la "class" que tenga el icono que hayáis descargado.

Las medidas que usaremos para las media queries son orientativas, luego debes ir ajustando según tu tamaño de menú. Para empezar vamos a utilizar una media query de 920 pixeles.



@media screen and (max-width:920px){

.menu-bar {
display:block;
width:60%;
color:#fff;
text-decoration:none;
font-weight:bold;
font-size:25px;
-webkit-box-sizing: border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}

.menu-bar span {
float:left;
display:block;
font-size: 40px;
color:black;
}

.menu-bar span:active {
color:red;
}

.menu-bar a {
outline:none;
border: 0;
}

.menu-bar span:hover {
color:grey;
}

.menu-bar a:active, .menu-bar a:visited {
text-decoration:none;
color:#fff;
}

}

Después añadimos estilo a la lista del menú.



.topnav {
background-color: white;
position:absolute;
left:10%;
width:35%;
}

.topnav li{
position:relative;
display:block;
float:none;
width: 50%;
border-bottom: 1px solid rgba(255,255,255, .3)
}

.list_with_children li {
display:none;
}

Por último añadimos la flechita negra para que salga indicando que ese item del menú tiene hijos.



.arrow-down {
width: 0;
height: 0;
position: absolute;
margin-top: 11px;
margin-left: 30px;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 7px solid black;
}

Y ya está, ahora a continuación pondremos el código jQuery.

Primeramente añadimos al icono del menú un toggle button para que al pulsarlo se despliegue el topnav. Y que al pulsar la flecha hacia abajo se desplieguen los hijos de la lista.



$(document).ready(function main() {
$('.icon-menu').toggle(function(){
$('.topnav').slideToggle('slow');
return false;
} )
$('.arrow-down').click(function(){
var idName = $(this).attr('id');
var idNumber = idName.replace('open_list-', '.li_opened-');
$(idNumber).slideToggle('fast');
return false;
} )
});

Debemos añadir también, una función para que si pulsas sobre un item del topnav, se cierre el menú.



$(document).ready(function main() {
if ($(window).width() < 920) {
$('.topnav-li').click(function(){
if (menu_open) {
$('.topnav').slideToggle('slow');
menu_open = false;
}
} )
}
});

Y por último añadimos una función para que se vaya añadiendo una clase dependiendo de si está para ordenador, o para tablet y móvil.

Y ya está, ya tenéis un menú operativo para vosotros solos y que podéis reutilizar de las maneras en que queráis.


Escribe un comentario

Anterior Crear una capa semitransparente que recubra la página con un alert box

Está web utiliza cookies para asegurarse de una mejor experiencia de nuestra página webMás información sobre las cookies