El menú se utiliza para facilitar la navegación del usuario a través de las secciones del sitio. Para atraer la atención del visitante, el menú debe ser funcional, fácil de usar y al mismo tiempo combinarse con el diseño de todo el recurso.
Instrucciones
Paso 1
Antes de crear un menú, decida su tipo. Puede crear un cuadro desplegable horizontal o vertical que se mostrará al usuario cuando el usuario se desplace sobre él con el cursor del mouse. Al elegir un menú en particular, puede guiarse por lo conveniente que será para los visitantes usarlo y cómo se combinará con el diseño.
Paso 2
Después de elegir un tipo de menú, abra su archivo de página usando cualquier editor de texto que use para editar HTML. Navegue a la sección de código deseada donde desea insertar su elemento de interfaz.
Paso 3
Después de eso, haga una lista de opciones creando un bloque y haciendo una lista numerada con la identificación asignada. Por ejemplo:
- Enlace 1
- Enlace 2
- Enlace 3
En este ejemplo, creé una lista con viñetas de tres elementos y la coloqué en una capa div con el ID del panel de identificación.
Paso 4
Vaya al bloque de sección de su página y cree el menú de hoja de estilo en cascada apropiado. Si desea crear un menú horizontal, puede incluir el atributo en línea para la lista resultante:
#panel ul li {display: inline; }
Paso 5
Para crear una línea horizontal a lo largo de toda la página, puede utilizar el siguiente código:
#panel ul {margin-left: 0; relleno: 2px 0; }
Paso 6
Entonces puedes hacer la división visual en rectángulos:
#panel ul li a {margin-left: 3px; borde: 1px; relleno: 2px 3px; fondo: azul; }
Este código establece sangrías de texto desde elementos de borde a través de los atributos margin-left y padding, y también establece un color de fondo para cada uno de los elementos de la lista. En este ejemplo, el color es azul, pero puede cambiarlo a su propia discreción.
Paso 7
Para señalar el elemento en la página actual que está seleccionado en la pestaña, establezca los parámetros apropiados para la clase abierta:
#menu ul li a # open {fondo: rojo; borde inferior: 1px; }
La página actual seleccionada en el panel ahora se mostrará en rojo.
Paso 8
Guarde los cambios en el archivo y verifique la funcionalidad del código escrito abriendo su página a través de un navegador. Para establecer opciones de visualización adicionales, siempre puede agregar CSS o HTML para mejorar la apariencia del objeto.
