Código de un menú de navegación desplegable de estilo de la revista web

El desarrollo web frontend se ha convertido en un nicho muy popular. Con la expansión de jQuery, más diseñadores web están empezando a crear fantásticas animaciones y efectos de página. Las posibilidades son ilimitadas!

En este tutorial crearemos un menú de navegación desplegable estilo revista. Esto se creará con algunas técnicas sofisticadas de CSS3 para trabajar en navegadores compatibles con los estándares. Incluso si tienes problemas con jQuery, deberías poder mantenerte al tanto de este pequeño código y, posiblemente, aprender algo nuevo. Echa un vistazo a la secuencia de comandos de demostración en vivo en mi ejemplo.

Pruébalo

Ver demostración en vivo - Descargar fuente

Estructurando nuestra pagina HTML

Deberíamos empezar por construir el diseño de página básico. He hecho esto en HTML con una lista desordenada para enlaces de menú. Tanto los estilos CSS como la biblioteca jQuery se excluyen externamente, lo que ahorra un poco de espacio. A continuación se agrega el encabezado de nuestro código HTML.

DesignShack Sexy Menú desplegable estilo revista

La biblioteca jQuery v1.6.2 está alojada en los servidores de Google para que la usen los desarrolladores web. Esto a menudo puede cortar parte de la carga a sus propios servidores. Las diferencias son especialmente notables si procesa decenas o cientos de miles de visitantes diariamente. También he establecido mi doctype en HTML5, no que afecte a nuestro script.

Bajando un poco en el código, echemos un vistazo al contenido del cuerpo interno. A continuación hay una copia / pegado de todo lo que está dentro de la etiqueta del cuerpo. He eliminado el código jQuery final ya que lo veremos en una sección posterior.

<h1><img src="//lesptitesaffairesdemayl.be/img/images_1/code-a-web-magazine-style-dropdown-navigation-menu_2.jpg"></h1> <ul> <li>Página principal</li> <li>Sobre la mag <ul> <li>Empresa</li> <li>Autores</li> <li>Escribe para nosotros?</li> <li>Publicidad</li> <li>Estar en contacto</li> </ul> </li> <li>Regalos <ul> <li>PSD</li> <li>Vectores de IA</li> <li>Patrones</li> <li>Iconos</li> </ul> </li> <li>Tutoriales <ul> <li>HTML5</li> <li>CSS3</li> <li>jQuery</li> <li>PHP MySQL</li> <li>Ruby on Rails</li> </ul> </li> <li>Herramientas web <ul> <li>Actuación</li> <li>Prueba de navegador</li> <li>Complementos CMS</li> <li>Hojas de trucos</li> </ul> </li> <li>Originales <ul> <li>Diseño de páginas web</li> <li>Móvil</li> <li>Interfaz de usuario</li> <li>Freelancing</li> <li>Inspiración</li> </ul> </li> </ul>

Así que esto debería terminar nuestra estructura HTML principal. Todas las listas anidadas utilizan elementos ul que se colocan dentro de un elemento de la lista principal. No es demasiado difícil si tiene un conocimiento básico en diseño web y codificación. Así que avancemos hacia los estilos CSS.

Diseñando con CSS

Voy a desglosar cada segmento del pequeño archivo style.css adjunto con el código de demostración. Comenzamos con un bloque de grupo que restablece los márgenes / relleno para todo el documento. Un simple restablecimiento de la página de un hombre, realmente.

* {margen: 0; relleno: 0; } body {font-family: Arial, Tahoma, sans-serif; tamaño de fuente: 11px; color: # 232323; } / * estructura de grupo * / #head {background: # e1ecf6; altura: 100px; acolchado superior: 15px; borde inferior: 1px sólido # d5dce8; } .wrap {ancho: 800px; margen: 0 auto; }

El contenido de la cabeza contendrá un pequeño logo gráfico que hice en Photoshop. He usado .wrap como clase para que podamos reutilizar los mismos estilos con nuestro menú de navegación. Este contenedor crea un div de contenido de 800 px y lo centra en la página.

El siguiente grupo es un poco más grande, y proporciona estilos para el menú de navegación raíz y sus elementos de lista. Nota la #nav El selector está en nuestro elemento original de la lista desordenada, por lo que podemos usar esto para seleccionar todos los elementos sub-ul más adelante.

/ * Menú de navegación principal de @group * / #nav {margin: 0; relleno: 0; estilo de lista: ninguno; borde izquierdo: 1px sólido # d5dce8; borde derecho: 1px sólido # d5dce8; borde inferior: 1px sólido # d5dce8; borde inferior-izquierdo-radio: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; borde inferior-derecho-radio: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; altura: 50px; relleno-izquierda: 15px; derecho de relleno: 15px; fondo: # edf3f7; } #nav li {float: left; bloqueo de pantalla; fondo: ninguno; posición: relativa; índice z: 999; margen: 0 1px; } #nav li a {display: block; relleno: 0; peso de la fuente: 700; altura de línea: 50px; texto-decoración: ninguno; color: # 818ba3; zoom: 1; borde izquierdo: 1px sólido transparente; borde derecho: 1px sólido transparente; relleno: 0px 12px; } #nav li a: hover, #nav li a.hov {background-color: #fff; borde izquierdo: 1px sólido # d5dce8; borde derecho: 1px sólido # d5dce8; color: # 576482; }

En la raíz UL, he agregado 3 bordes sólidos: izquierdo, derecho e inferior. El borde superior abarca todo el sitio web y esto se agrega en el área del encabezado. También he redondeado las esquinas inferiores izquierda y derecha. Esta técnica se realiza en CSS3 usando -moz, -webkit y las propiedades estándar de radio de borde.

Los elementos de la lista se dan una índice z de 999 para aparecer por encima de todos los demás elementos. Así, de esta manera, pasaríamos el li original a nuestro subnav y perderíamos la ventana emergente. En su lugar, el elemento li se expande para ocupar toda la altura de nuestro nuevo menú deslizante y permanece en la parte superior a medida que pasamos el mouse sobre los enlaces. también posición: relativa; Se agrega para usar correctamente el posicionamiento absoluto en la lista interna.

Los enlaces de anclaje no son demasiado interesantes en sí mismos. Se resaltan con un fondo blanco al pasar el mouse con dos bordes adicionales en el lado izquierdo y derecho. En el selector de desplazamiento final agregué otra clase. .hov para ser utilizado por jQuery. Esto lo hará así, cuando mueva el cursor del mouse sobre los enlaces del submenú, ¡el enlace de navegación original permanecerá sobre la marcha! Con buena pinta.

Estilos de menú de sub-navegación

Este último código CSS dará estilo a nuestros enlaces de submenú. Utilizamos la posición absoluta para mover nuestro elemento sub-ul directamente a la parte superior de su contenedor. También es un gran efecto de sombra que utiliza algunas nuevas propiedades CSS3.

/ * @group subnav * / #nav ul {position: absolute; izquierda: 1px; pantalla: ninguna; margen: 0; relleno: 0; estilo de lista: ninguno; -moz-box-shadow: 0 1px 3px rgba (0,0,0,0.2); -o-box-shadow: 0 1px 3px rgba (0,0,0,0.2); box-shadow: 0 1px 3px rgba (0,0,0,0.2); -webkit-box-shadow: 0 1px 3px rgba (0,0,0,0.2); parte inferior de relleno: 3px; } #nav ul li {width: 180px; flotador izquierdo; borde superior: 1px sólido #fff; alineación de texto: izquierda; } #nav ul li: hover {border-left: 0px solid transparent; borde derecho: 0px sólido transparente; }

Las propiedades individuales que he usado y sus navegadores de soporte pueden ser un poco confusas. A continuación se muestra una pequeña guía de traducción.

• -moz-box-shadow - Firefox / Mozilla Engine
• -o-caja-sombra - Opera
• -webkit-box-shadow - Navegadores WebKit estándar, Google Chrome o Safari
• box-shadow - La mayoría de los demás, incluido Microsoft Internet Explorer

Cada elemento de la lista de navegación secundaria tiene un ancho de 180 px. Esto define el tamaño máximo que nuestro menú aparecerá. Si transfiere el código, debe cambiarlo para adaptarse a los tamaños de su propia plantilla.

#nav ul a {display: block; altura: 20px; línea de altura: 20px; relleno: 8px 5px; color: # 666; borde inferior: 1px sólido transparente; transformación de texto: mayúsculas; color: # 797979; peso de la fuente: normal; } #nav ul a: hover {text-decoration: none; color de borde derecho: transparente; color de borde izquierdo: transparente; fondo: transparente; color: # 4e4e4e; } * html #nav ul {margen: 0 0 0 -2px; }

Cada anclaje de submenú se establece en una altura y una altura de línea de 20 px. Esto mantendrá el texto del menú centrado verticalmente en cada bloque de menú. En el efecto de desplazamiento, he ocultado los bordes que se heredan de los enlaces de navegación principales. Todo bastante sencillo con los estilos CSS, y ahora el bit final de JavaScript para unirlo todo.

jQuery Mostrar / Ocultar submenú

Directamente después de la final. .envolver div nuestra área de contenido termina. Así que aquí mismo he añadido una nueva etiqueta de script y coloque todo el código de jQuery dentro. Esto facilita mucho la edición, y nuestro código es bastante pequeño de todos modos.

$ (document) .ready (function () {$ ('# nav li'). hover (function () {$ ('ul', this) .slideDown (200); $ (this) .children ('a: first '). addClass ("hov");}, function () {$ (' ul ', this) .slideUp (100); $ (this) .children (' a: first '). removeClass ("hov" );});});

Inicie el script comprobando si el documento de la página ha terminado de cargarse. Queremos activar nuestra primera función después de que el usuario se desplace sobre un elemento de lista en la raíz #nav ul. El primer bloque de código de función se compone de dos líneas.

Apunta a nuestro elemento ul interno y agrega un efecto deslizante para completar en 200 milisegundos. En segundo lugar tenemos que añadir el .hov clase en el enlace de anclaje seleccionado actualmente. Esto mantiene el efecto flotante en el enlace principal, incluso cuando se mueve sobre enlaces de sub-navegación. La segunda función es nuestro parámetro de devolución de llamada para el .flotar() Método que pasa con el mouse apagado.

Esto también se compone de 2 líneas simples de código. Estos en realidad solo revierten lo que hemos hecho en la primera área. La ul interna se obliga a deslizarse hacia arriba en una animación más rápida (100 milisegundos de duración) y también eliminamos la clase flotante.

Ver demostración en vivo - Descargar fuente

Conclusión

He dejado el menú bastante básico para que otros diseñadores puedan modificar la plantilla para que se ajuste a su propio sitio web. ¡Es bastante impresionante lo que es posible con solo un par de líneas en jQuery! Si ha implementado algo similar en su propio sitio, háganoslo saber. Y no olvide descargar y jugar con el código fuente de la demostración.