Cómo configurar una navegación rápida con css3

La mayoría de los sitios ofrecen algún tipo de ayuda para la navegación web. Si usted no proporciona este tipo de apoyo con su programación CSS 3, el usuario puede perderse y si no se pierden negocios o al menos actividad. navegación del sitio hace que la información más fácil de encontrar y utilizar. Además, realmente lo necesita para que el usuario pueda hacer un buen uso de su sitio.

Video: Como hacer una Barra Social (vertical y fija a pantalla) con HTML y CSS3

El siguiente procedimiento describe cómo agregar la navegación del sitio sin necesidad de programación a una página. No sirve de nada elegante, pero funciona bien con la mayoría de los navegadores.

1. Crear un nuevo archivo HTML 5 con su editor de texto.

2. Escriba el siguiente código de la página HTML.

3. Casa
4. productos
5. Uno
6. Dos
7. Tres
8. Las cuatro
9. Eventos
10. rojo
11. Verde
12. Azul
13. naranja
14. Acerca de
15. Contacto
16. Establecimiento
17. Intimidad

El sistema de menú se compone de una serie de listas. Cada lista no ordenada representa otra capa de menús. Este ejemplo tiene sólo dos capas, pero se puede aplicar fácilmente los conceptos a cualquier número de capas deseadas. El menú en general está cerrada con un elemento de lista desordenada (

) Llamado MainMenu. El nombre es importante porque se le utiliza de forma intensiva al crear los estilos requeridos.

18. Guarde el archivo como navigation.html.

19. Crear un nuevo archivo CSS con su editor de texto.

20. Escriba la siguiente información de estilo CSS.

    #MainMenu {margin: 0-padding: 0 -} # MainMenu li {margin: 0-padding: 0-list-style: none; float: left;} # MainMenu li a {display: block-margin: 0 0 0 1 píxel Acolchado: 4 píxeles 10px; ancho: 80px; fondo: negro color: Blanco-texto-align: center -} # MainMenu li a: hover {background: verde -} # MainMenu li: hover {ul visibilidad: visible -} # MainMenu ul {position: absolute-visibilidad: oculto-margin: 0-padding: 0-fondo: gris-frontera: 1px sólido blanco-width: 80px;} # MainMenu ul a {position: relative-display: block-margin: 0 Acolchado: 5px 10px; ancho: 80px; text-align: left; fondo: gris claro color: Negro -} # MainMenu ul a: hover {background: violeta}

    Wow, eso es un montón de código! Los estilos pueden llegar a ser complejos a medida que tratan de hacer más con ellos. Es por eso que muchos desarrolladores dependen en gran medida las bibliotecas de terceros y herramientas. Tratando de llegar a toda esa información en su propio estilo es mucho tiempo.

    El tipo de menú aquí se hace fácilmente con una herramienta como CSS Menu Fabricante, Menucool.com, o CSS3 Menú. Sin embargo, es importante que pasar por este ejercicio al menos una vez para que sepa cómo funcionan las cosas.

    Los estilos comienzan con el MainMenu, una lista desordenada (

    ) Elemento. Todo se hace referencia a este elemento. El MainMenu se compone de un número de elementos de la lista (

21. ), Que se establecen con el estilo li #MainMenu. Usted no quiere que los elementos de la lista que se ven realmente como una lista - que quiere que se parecen a los menús - lo que es esencial para establecer el estilo de lista a ninguno.

    Ajuste de flotación a la izquierda también ayudará a dar el menú una apariencia profesional. Dentro de cada elemento de la lista es un ancla () Que apunta a la ubicación en la que el usuario va después de seleccionar el elemento del menú. El #MainMenu li un estilo crea la apariencia requerida, que incluye la visualización del elemento como un bloque.

    Video: Megamenu con html y css

    Cuando el usuario pasa el ratón sobre uno de los elementos MainMenu, la #MainMenu un li: activables convierte el verde de entrada.

    El li #MainMenu: hover ul requiere una pequeña explicación. Normalmente, el menú secundario su visibilidad ha configurado como oculto, por lo que no se ve. Cuando un usuario pasa el ratón sobre un elemento de la lista MainMenu, desea que el submenú que aparece. Este estilo lleva a cabo esa tarea. Se crea la apariencia de la utilización de código sin usar ningún código.

    Los submenús aparecerá en vertical, debajo del menú principal horizontal. Con el fin de hacer esto, el estilo #MainMenu ul establece el ancho de 80px, el tamaño requerido para mantener una única entrada de menú. Este valor debe coincidir con el ajuste de ancho para el #MainMenu ul un estilo.

    Observe que este segundo nivel de menús ha fijado su propiedad de visibilidad a escondidas porque no quiere verlo hasta que el usuario hace clic en el elemento del menú principal asociado. Al igual que con el menú principal, desea que los usuarios sepan cuando se han seleccionado un tema en particular, por lo que el #MainMenu ul estilo a: activable cambia el valor de fondo del menú para Violeta.

22. Guarde el archivo como Navigation.CSS.

23. Cargar el ejemplo de navegación.

    Video: menú de navegación fijo con la propiedad position fixed de CSS3 [ EFECTO HOVER ] HTML5 & CSS3

    Puedes ver el menú (el menú no tendrá nada seleccionado inicialmente y aparecerá como una barra de negro en la parte superior de la página).

    

    Intente seleccionar varios elementos. El ejemplo utiliza el sitio existente para cada uno de los enlaces, pero si lo desea, puede intentar usar otros enlaces. Al hacer clic en un enlace le llevará a la ubicación deseada.

    El punto de este menú es que se puede crear un buen número de elementos de la interfaz de usuario que parecen que están codificados, pero en realidad no lo son, el uso de CSS. Este enfoque CSS sólo funcionará con la mayoría de navegadores sin tener que pedir al usuario que active javascript. La mayoría de los navegadores soportan el nivel de CSS necesario para hacer este trabajo sistema de menús.