Red de conocimiento informático - Conocimiento del nombre de dominio - Cómo implementar un menú de navegación lateral usando CSS y jQuery

Cómo implementar un menú de navegación lateral usando CSS y jQuery

Puede consultar: blogs.com/w2bc/p/5468176.html

Para crear el menú de navegación, echemos un vistazo a la estructura html:

.lt;head>

Demostración del menú de animación

Primero, usamos normalize.css como estilo predeterminado, con Asegúrese de que nuestro menú sea el mismo en todos los navegadores. Usamos el ícono de fuente fontawesome para mostrar el ícono desplegable del elemento del menú. También necesitamos hacer referencia a jQuery para alternar el menú.

Botones del panel

Los botones de navegación del panel para cada sitio web son similares. Tiende a usar una fuente de ícono como fontawesome, pero para este tutorial quería agregar algo de animación, así que usamos líneas horizontales. Básicamente, nuestro botón es un intervalo que contiene tres divs, que se muestran como una línea horizontal.

< /span>

El estilo es el siguiente:

.toggle-button {

posición: fija;

ancho: 44px;

altura: 40px;

relleno: 4px;

transición: .25s;

índice z: 15;

}

.toggle-button:hover {

cursor: puntero;

}

.toggle-button . barra de menú {

posición: absoluta ;

radio del borde: 2px;

ancho: 80%;

transición: . 5s;

}

.toggle-button .menu-bar-top {

borde: 4px sólido #555;

borde -abajo: ninguno;

arriba: 0;

}

.toggle-button .menu-bar-middle {

altura : 4px;

color de fondo: #555;

margen superior: 7px;

margen inferior: 7px;

arriba: 4px ;

}

.toggle-button .menu-bar-bottom {

：4px sólido #555;

borde-superior: ninguno;

superior: 22px;

}

.toggle-button .menu-bar-top {

transformar: rotar (45 grados) traducir (8px, 8px);

transición: .5s;

}

.button-open .menu-bar-middle {

transformación: traducir(230px);

transición: .1s fácil entrada;

Opacidad: 0;

}

.button-open.menu-bar-bottom{

transformar: rotar(-45 grados) traducir(8px, - 7px);

transición: .5s;

}

El botón tiene una posición fija y se desplazará por la página cuando no se mueva. También tiene un estilo de índice z: 15 para garantizar que esté siempre encima de otros elementos superpuestos. El botón consta de tres líneas horizontales. Cada fila tiene su propio estilo y le damos el estilo .menu-bar.

Los estilos de clase restantes se mueven a archivos de estilos separados. Cuando ocurre la animación, agregamos una clase .button-open. Nos referimos a jQuery, que hace que la implementación sea relativamente fácil:

$(document).ready(function() {

var $toggleButton = $('.toggle-button') ;

$toggleButton.on('hacer clic', función() {

$(this).toggleClass('botón-abrir');

} ) ;

});

Es posible que los principiantes no estén familiarizados con jQuery, así que déjame explicarte. Primero, inicializamos una variable llamada $togglebutton que contiene nuestro botón. Almacenamos esto como una variable y luego creamos un detector de eventos para escuchar los clics en los botones. Después de cada clic, el detector de eventos ejecutará la función del método toggleclass() para alternar .button-open.

.button-open. Podemos usar esto para cambiar la forma en que se muestran estos elementos. Usamos las funciones CSS3 traducir() y rotar() para rotar las líneas horizontales superior e inferior 45 grados, con la línea horizontal del medio desapareciendo. Puede hacer clic en el botón de la demostración para ver el efecto.

Menú de la barra lateral

La estructura HTML del menú de la barra lateral es la siguiente:

No explicaré cada estilo de menú en detalle aquí, tomemos una mirada. menú de ajuste div. Su estilo es el siguiente:

.menu-wrap {

background-color: #6968AB;

margen izquierdo: -280px;

fuente- tamaño: 1em;

peso de fuente: 700;

desbordamiento: automático;

transición: .25s;

índice z : 10 ;

}

Está en una posición fija por lo que el menú sigue desplazándose en la misma posición. La altura se establece en 100%. Tenga en cuenta que el margen izquierdo se establece en un número negativo para que el menú desaparezca de la vista. Para darle un vistazo al menú, usamos jquery para llamar a otra clase para mostrar y cerrar el menú.

El código JavaScript es el siguiente:

$(document).ready(function() {

var $toggleButton = $('.toggle-button'),

$menuWrap = $('.menu-wrap');

$toggleButton.on('click', function() {

$(this).toggleClass( 'botón- abrir');

$menuWrap.toggleClass('menu-show');

});

Agregamos una variable $menuwrap que contiene todos los elementos del menú y usamos el mismo evento para crear el botón. Este .menu-show tiene un margen izquierdo de 0 y se agregaron algunos efectos de sombra de cuadro.

.menu-show {

margen-izquierda: 0;

caja-sombra: 4px 2px 15px 1px #B9ADAD;

}

Submenús y enlaces

Puedes notar que los elementos de la lista de .menu-item-has-children.class contienen submenús. Además, hay una clase .sidebar-menu-arrow.

span tiene un paquete de pseudoelementos ::after que implementa flechas fontawesome . De forma predeterminada, el submenú está oculto y solo aparece cuando se hace clic en el menú principal:

$(document).ready(function() {

var $sidebarArrow = $ ('. barra-menú-flecha lateral');

$ sidebarArrow.click(function() {

$(this).next().slideToggle(300);

p >

});

Cuando hacemos clic en la flecha, se llama a una función que apunta al siguiente elemento después del intervalo y lo hace visible. Estamos usando el slidetoggle de jquery. Puede hacer que el elemento aparezca o desaparezca con un efecto de diapositiva y la función tiene un parámetro de tiempo de animación.

Finalmente, nuestro elemento del menú de demostración tiene un efecto de desplazamiento. Utiliza un pseudoelemento ::after.

El código es el siguiente:

.menu-sidebar li > a::after {

content: "";

display: block;

alto: 0.15em;

posición: absoluta;

arriba: 100%;

ancho: 102%;

izquierda: 50 %;

transformación: traducir(-50%);

imagen de fondo: gradiente lineal (a la derecha, transparente 50,3%, #FFFFC);

imagen de fondo: gradiente lineal (a la derecha, #FFF transparente 50,3 %, #FFFA3B 50,3 %);

transición: posición de fondo .2s .1s salida gradual;

Tamaño de fondo: 200% automático;

}

.menu-sidebar li > a:hover::after {

posición de fondo: -100% 0;

}

Este pseudoelemento ::after contiene un elemento a nivel de bloque colocado absolutamente debajo de cada enlace, con una altura y un ancho de 0,15 em. En lugar de simplemente aplicar un color de fondo a las líneas, usamos un gradiente lineal() en la función de imagen de fondo. Aunque el propósito de esta función es hacer un degradado de color, podemos hacer que el color del degradado cambie especificando un porcentaje.

.menu-sidebar li > a::after {

imagen de fondo: gradiente lineal (a la derecha, transparente 50,3 %, #FFFA3B 50,3 %);

}

La mitad de las líneas aquí son transparentes y la otra mitad son amarillas. El ancho de todos los enlaces que ocupa la parte transparente es el 200% del tamaño del fondo.

上篇: ¿Cómo consultar los resultados del examen de ingreso a la universidad en línea? 下篇: ¿Cómo mostrar el logotipo del sitio web en un sitio web personal? Como

Cómo implementar un menú de navegación lateral usando CSS y jQuery

Artículos populares