Navegación desplegable adaptable con un menú de hamburguesas
Bootstrap tienen barras de navegación fantásticas que puedes usar si eliges basar tu diseño en su marco. Para mis propios proyectos, elegí hacer una barra de navegación desplegable adaptable con un menú de hamburguesas animado. La navegación se basa en Sass, es adaptable y requiere muy poca jQuery.Hay mucho que se necesita para construir una barra de navegación como esta, así que repasaré los detalles. Los marcos son excelentes, pero creo que es una gran idea para cada desarrollador crear su propia navegación en algún momento para comprender cómo funciona.
HTML
Empecemos por el menú en sí. Es una lista regular, envuelta en una etiqueta nav.
<nav>
<div class="nav-mobile">
<a id="nav-toggle" href="#!"><span></span></a>
</div>
<ul class="nav-list">
<li><a href="#!">Inicio</a></li>
<li><a href="#!">Sobre nosotros</a></li>
<li>
<a href="#!">Servicios</a>
<ul class="nav-dropdown">
<li><a href="#!">Diseño web</a></li>
<li><a href="#!">Desarrollo web</a></li>
<li><a href="#!">Diseño gráfico</a></li>
</ul>
</li>
<li><a href="#!">Precios</a></li>
<li><a href="#!">Contactar</a></li>
</ul>
</nav>SCSS
Hay muchas enlaces en estas barras de navegación, y podemos evitar la repetición en el código con Sass. Además, las variables mejorarán drásticamente la facilidad de personalización del color y el tamaño.
Primero, se establecerá algunas variables.
$content-width: 1000px;
$breakpoint: 799px;
$nav-height: 70px;
$nav-background: #262626;
$nav-font-color: #ffffff;
$link-hover-color: #2581dc;El esqueleto de sass
nav {
ul {
li {
a {
&:hover {
}
&:not(:only-child):after {
}
} // Dropdown list
ul li {
a {
}
}
}
}
}nav {
float: right;
ul {
list-style: none;
margin: 0;
padding: 0;
}
}li {
float: left;
position: relative;
a {
display: block;
padding: 0 20px;
line-height: $nav-height;
background: $nav-background;
color: $nav-font-color;
text-decoration: none;
}
}a {
&:hover {
background: $link-hover-color;
color: $nav-font-color;
}
&:not(:only-child):after {
padding-left: 4px;
content: ' ▾';
}&:not(:only-child):after} // Dropdown list
ul li {
min-width: 190px;
a {
padding: 15px;
line-height: 20px;
}Posicionamiento
El posicionamiento absoluto y relativo elimina elementos del flujo normal del documento. Learn CSS Layout tiene una explicación muy buena y sencilla de cómo funciona el posicionamiento. La parte importante que debe recordar para este menú desplegable es que un elemento en position:absolute se colocará en relación con un elemento en position: relative. Puede pensar que el elemento absoluto está anidado dentro del elemento relativo.
Ya configuramos el li a position: relative anterior. Ahora vamos a agregar una nueva clase, absolutamente posicionada. z-index: 1garantiza que el menú desplegable se mostrará encima de cualquier contenido. Y agregué un cuadro de sombra, como es estándar para los menús desplegables.
.nav-dropdown {
position: absolute;
z-index: 1;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}jQuery
Comenzaremos añadiendo jQuery.
;(function($) {
// Begin jQuery
})(jQuery);(function($) {
$(function() {
// DOM Ready
// Insert all scripts here
})
})(jQuery)$('nav ul li > a:not(:only-child)').click(function(e) {
$(this)
.siblings('.nav-dropdown')
.toggle()
})- Cuando nav ul li > a:not(:only-child) se hace clic en la ruta CSS...
- Alternar (cambiar la propiedad display) esa clase específica nav-dropdown.
$(this) especifica que solo se dirige a aquello en lo que se hizo clic, y no a todas las instancias de esa ruta CSS.
Pero para que es eso (e)? Si tiene dos menús desplegables en la navegación y hace clic en ambos, ambos se abren. Queremos evitar ese comportamiento y forzar que solo se abra un desplegable a la vez. Dentro de esa misma función, agregue:
$('.nav-dropdown')
.not($(this).siblings())
.hide()
e.stopPropagation()Hay una cosa más: quiero que el menú desplegable se oculte si hago clic fuera de él en cualquier momento. Lo ocultaremos configurando una función de clic en la etiqueta completa html.
$('html').click(function() {
$('.nav-dropdown').hide()
});(function($) {
$(function() {
$('nav ul li > a:not(:only-child)').click(function(e) {
$(this)
.siblings('.nav-dropdown')
.toggle()
$('.nav-dropdown')
.not($(this).siblings())
.hide()
e.stopPropagation()
})
$('html').click(function() {
$('.nav-dropdown').hide()
})
})
})(jQuery)Móvil
Ahora tenemos un menú desplegable totalmente funcional. El siguiente paso es convertirlo en un menú de "hamburguesa" en el colapso móvil. Vamos a crear un cuadrado en la parte superior derecha de la pantalla donde vivirá la hamburguesa.
.nav-mobile {
//display: none;
position: absolute;
top: 0;
right: 0;
background: $nav-background;
height: $nav-height;
width: $nav-height;
}@media only screen and (max-width: $breakpoint) {
// Insert all mobile styles here
}nav {
ul {
display: none;
}
}El concepto detrás de cómo funciona es que una clase span en el id #nav-toggle tiene una :before y una :after. El intervalo se muestra como un elemento de nivel de bloque delgado y ancho que parece una línea. El antes y el después suben y bajan la línea, creando tres líneas.
Finalmente, el jQuery entra y agrega una clase .active al intervalo, que gira el :before y :after, creando una X.
#nav-toggle {
position: absolute;
left: 18px;
top: 22px;
cursor: pointer;
padding: 10px 35px 16px 0px;
span,
span:before,
span:after {
cursor: pointer;
border-radius: 1px;
height: 5px;
width: 35px;
background: $nav-font-color;
position: absolute;
display: block;
content: '';
transition: all 300ms ease-in-out;
}
span:before {
top: -10px;
}
span:after {
bottom: -10px;
}
&.active span {
background-color: transparent;
&:before,
&:after {
top: 0;
}
&:before {
transform: rotate(45deg);
}
&:after {
transform: rotate(-45deg);
}
}
}$('#nav-toggle').on('click', function() {
this.classList.toggle('active')
})$('#nav-toggle').click(function() {
$('nav ul').toggle()
})La barra de navegación
Vuelva a su HTML desde el principio del tutorial. Envuelva todo nav en este código.
<section class="navigation">
<div class="nav-container">
<div class="brand">
<a href="#!">Logo</a>
</div>
<!-- <nav></nav> -->
</div>
</section>.navigation- La envoltura exterior para la barra de navegación. Especifica la altura y el color, y estirará el ancho completo de la ventana gráfica.
.navigation {
height: $nav-height;
background: $nav-background;
}.nav-container {
max-width: $content-width;
margin: 0 auto;
}.brand {
position: absolute;
padding-left: 20px;
float: left;
line-height: $nav-height;
text-transform: uppercase;
font-size: 1.4em;
a,
a:visited {
color: $nav-font-color;
text-decoration: none;
}
}Aqui esta en CSS3
@charset "UTF-8";
.navigation {
height: 70px;
background: #262626;
}
.brand {
position: absolute;
padding-left: 20px;
float: left;
line-height: 70px;
text-transform: uppercase;
font-size: 1.4em;
}
.brand a,
.brand a:visited {
color: #ffffff;
text-decoration: none;
}
.nav-container {
max-width: 1000px;
margin: 0 auto;
}
nav {
float: right;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
position: relative;
}
nav ul li a,
nav ul li a:visited {
display: block;
padding: 0 20px;
line-height: 70px;
background: #262626;
color: #ffffff;
text-decoration: none;
}
nav ul li a:hover,
nav ul li a:visited:hover {
background: #2581DC;
color: #ffffff;
}
nav ul li a:not(:only-child):after,
nav ul li a:visited:not(:only-child):after {
padding-left: 4px;
content: " ▾";
}
nav ul li ul li {
min-width: 190px;
}
nav ul li ul li a {
padding: 15px;
line-height: 20px;
}
.nav-dropdown {
position: absolute;
display: none;
z-index: 1;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
/* Mobile navigation */
.nav-mobile {
display: none;
position: absolute;
top: 0;
right: 0;
background: #262626;
height: 70px;
width: 70px;
}
@media only screen and (max-width: 798px) {
.nav-mobile {
display: block;
}
nav {
width: 100%;
padding: 70px 0 15px;
}
nav ul {
display: none;
}
nav ul li {
float: none;
}
nav ul li a {
padding: 15px;
line-height: 20px;
}
nav ul li ul li a {
padding-left: 30px;
}
.nav-dropdown {
position: static;
}
}
@media screen and (min-width: 799px) {
.nav-list {
display: block !important;
}
}
#nav-toggle {
position: absolute;
left: 18px;
top: 22px;
cursor: pointer;
padding: 10px 35px 16px 0px;
}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 5px;
width: 35px;
background: #ffffff;
position: absolute;
display: block;
content: "";
transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
top: -10px;
}
#nav-toggle span:after {
bottom: -10px;
}
#nav-toggle.active span {
background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
top: 0;
}
#nav-toggle.active span:before {
transform: rotate(45deg);
}
#nav-toggle.active span:after {
transform: rotate(-45deg);
}
article {
max-width: 1000px;
margin: 0 auto;
padding: 10px;
}
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!