Los menús de navegación conectan las diferentes páginas de su sitio utilizando hipervínculos. Usted sólo necesita escribir la navegación marcado una vez, y luego copiarlo en cada página. Convenciones de diseño Web requieren que usted escriba el contenido del menú en HTML y poner las instrucciones de formato de CSS. Mediante el uso de CSS correctamente, reducir el desorden en los archivos HTML y puede cambiar fácilmente el formato de su navegación por el menú en futuros rediseños de sitios web.
CREAR SIMPLE
Lo que necesita
Editor de marcado
Guía de referencia CSS
Cree una lista desordenada en HTML usando el elemento ul para definir la lista y la lista de elementos elemento li para cada elemento de la lista, con cada elemento correspondiente a los vínculos que desea que aparezcan en el menú de navegación. Dentro de cada etiqueta li, utilice el elemento de anclaje para crear un hipervínculo real.
Añadir marcado CSS para anular valores predeterminados del navegador web para dar formato a la apariencia de las listas. Utilice el selector CSS ul de lista desordenada y crear un grupo de declaración. Para una solución básica predeterminado, establezca la propiedad list-style-type a ninguno y el relleno y las propiedades de margen tanto a 0. Si su diseño requiere de diferentes valores, o declaraciones adicionales, sustituir o agregar según sea necesario.
Seleccione si desea utilizar una barra de menú vertical o una horizontal. Para una vertical, que te tienes que añadir cualquier información adicional, excepto cuando sea necesario para reflejar los requisitos de diseño de sitios. Para un menú horizontal, agregue una declaración extra para su grupo ul, estableciendo la propiedad display de línea. Cree otro grupo de declaración mediante el selector CSS li de elemento de lista. A continuación, utilice la propiedad de relleno para crear el relleno izquierdo y derecho entre las entradas del menú. De esta manera el texto de sus artículos de menú costumbre correr juntos. Por ejemplo, un valor de 0px 0px 10px 10px creará 10 píxeles de relleno en los extremos izquierdo y derecho de la barra de navegación, y 20 píxeles de relleno entre los elementos del menú.
Aislar la barra de formato del menú si tiene previsto utilizar otras listas no ordenadas en el cuerpo de su sitio web. Esto se hace mediante un selector CSS complejo como ul cabecera en lugar de sólo ul. Crea un contenedor HTML en la zona de cabecera de la página utilizando el elemento div, y darle la cabecera id para conectarlo con el selector CSS. Si usted hace esto, entonces sus instrucciones de formato sólo se refieren a la cabecera de las páginas de su sitio, y sólo las partes de la cabecera que son una lista desordenada. Sólo el menú de navegación se ajusta a esta descripción. También es posible que desee hacer lo mismo con otros grupos de declaración, como cabecera en lugar de li li para elementos de lista en el menú de navegación.
Recursos
No hay comentarios:
Publicar un comentario