Cómo Crear Menús de Navegación Vertical Usando Listas CSS

Cómo Crear Menús de Navegación Vertical Usando Listas CSS

Cómo Crear Menús de Navegación Vertical Usando Listas CSS

VALORACIÓN DEL ARTÍCULO:
5/5


Ya sea que su menú de navegación sea una fila horizontal en la parte superior o una fila vertical en el lateral, sigue siendo sólo una lista. Al diseñar la navegación web, a menudo es fácil olvidar que un menú de navegación es sólo un grupo glorificado de enlaces. Pero si programa su navegación usando XHTML+CSS, puede crear un menú que sea pequeño para descargar (el XHTML) y fácil de personalizar (el CSS).

Índice de contenidos

Introducción

Para empezar a diseñar una lista para la navegación, debe utilizar una lista. Puede ser una lista estándar desordenada que ha sido identificada como la navegación:


    ul>
    Home/i> Home/i> / i> / i> / i> / i>. / i>

    Si se fija bien en el HTML, notará que el enlace "Home" también tiene un ID de

    youarehere. Esto le permitirá crear un menú que identifica la ubicación actual de sus lectores. Incluso si usted no planea tener ese tipo de señal visual en su sitio ahora mismo, puede incluir esa información. Si decide añadir el taco más tarde, tendrá menos codificación para preparar su sitio.

    Sin ningún estilo CSS, este menú XHTML parece una lista estándar desordenada. Hay viñetas y los elementos de la lista están ligeramente sangrados. Debido a que estoy usando enlaces de marcadores de posición, la mayoría de los navegadores no mostrarán los enlaces como clickeables (subrayados y en azul). Si pega el HTML de arriba en una página Web, su navegación se verá así:

    • Inicio
    • Productos
    • Servicios
    • Contáctenos

    Esto es bastante aburrido y no se parece mucho a un menú. Pero con sólo unos pocos estilos de CSS añadidos a la lista, puede crear un menú que le enorgullezca.

    Menú de navegación vertical

    Un menú de navegación vertical es muy fácil de escribir porque se muestra de la misma manera que una lista normal: arriba y abajo. Los elementos de la lista se muestran verticalmente a lo largo de la página.

    Cuando estoy diseñando los menús, me gusta empezar por fuera y trabajar en ellos. Con esto, quiero decir que primero me pongo el estilo

    ul#navigation

    y luego pasar a los elementos

    li

    y luego a los enlaces, etc. Así que para este menú, primero se define el ancho del menú. Esto asegurará que incluso si los elementos del menú son largos, no empujarán el resto del diseño ni causarán desplazamiento horizontal. ul#navigation { width: 12em; } >

    Una vez que tengo el ancho establecido, puedo jugar con los elementos de la lista. Esto me permite establecer cosas como (para deshacerme de las viñetas), colores de fondo, bordes, alineación de texto y márgenes.

    ul#navigation li {
    estilo lista: ninguno;
    color de fondo: #039;
    border-top: sólido 1px #039;
    text-align: izquierda;
    margen: 0;
    }

    > } } } } } } } } } } } } }

    Una vez que haya establecido los elementos básicos de la lista, puede empezar a jugar con el aspecto del menú en el área de enlaces. Primero estilice el

    UL#navigation LI A 

    y luego el

    A:link

    ,

    A:visited

    ,

    A:hover

    , y

    A:active

    (si los desea). Para los enlaces, me gusta hacer de los enlaces un elemento de bloque (en lugar del elemento predeterminado en línea). Esto les obliga a ocupar todo el espacio del

    LI

    y actúan más como un párrafo, lo que hace que sean más fáciles de estilizar como botones de menú. La otra cosa que siempre hago es quitar el subrayado (

    decoración de texto: ninguno;

    ), ya que esto hace que los botones se parezcan más a botones para mí. Pero por supuesto, su diseño puede ser diferente.

    ul#navigation li a {
    visualización: bloque;
    > bloquetexto-decoración: ninguno;
    acolchado: .25em;
    fondo del borde: sólido 1px #39f;
    border-right: sólido 1px #39f;
    }

    > } } } } } } } } } } } } }

    Observe que con el

    display: block; en los enlaces, se puede hacer clic en toda la caja del elemento de menú, no sólo en las letras. Esto también es bueno para la usabilidad. Asegúrese de establecer los colores de los enlaces (enlace, visitado, flotante y activo) si desea que sean diferentes de los colores por defecto azul, rojo y púrpura. a:link, a:visited { color: #fff; }
    a:hover, a:active { color: #000; } >

    También me gusta darle un poco más de atención al estado de flotación cambiando el color de fondo.

    a:hover { color de fondo: #fff; } >

    Si desea más ejemplos de menús verticales, consulte la siguiente lista.

    • Un menú vertical con estilo
    • Una plantilla de menú vertical básica
    • Un menú vertical con estilo con usted está aquí
    • Una plantilla de menú vertical básica con usted está aquí

    Menú de navegación horizontal

    La creación de menús de navegación horizontales es un poco más difícil que la creación de menús de navegación verticales, ya que hay que compensar el hecho de que las listas HTML prefieren mostrarlas verticalmente. Al igual que con el menú horizontal, primero cree su lista del menú de navegación:


      ul>
      Home/i> Home/i> / i> / i> / i> / i>. / i> Para crear un menú horizontal, trabaje de la misma manera que lo hizo con el menú vertical. Empieza por fuera y trabaja dentro. Como quiero que mi navegación comience en la esquina izquierda, la configuro con 0 margen izquierdo y relleno, y la floto hacia la izquierda. También debería acostumbrarse a fijar el ancho para que su menú no ocupe más o menos espacio del que usted desea. En el caso de los menús horizontales, suele ser el ancho total del diseño. También agregué un color de fondo a toda la lista para que sea más fácil de leer.

      ul#navegación {
      >.float: izquierda;
      margen: 0;
      acolchado: 0;
      ancho: 100%;
      color de fondo: #039;
      }

    >

    Pero el secreto del menú de navegación horizontal está en los elementos de la lista. Los elementos de la lista son normalmente elementos de bloqueo, lo que significa que tendrán una nueva línea antes y después de cada uno de ellos. Cambiando la pantalla de

    block a

    inline

    , se fuerza a los elementos de la lista a alinearse horizontalmente.

    ul#navigation li { display: inline; }

    Traté los enlaces exactamente igual que los traté en el menú de navegación vertical, con los mismos colores y decoración de texto. Añadí un borde superior para delinear los botones cuando se cierran. Lo único que se ha eliminado es el

    display: block; ya que esto volverá a colocar las nuevas líneas y destruirá el menú horizontal.

    ul#navigation li a {
    texto-decoración: ninguno;
    acolchado: .25em 1em;
    fondo del borde: sólido 1px #39f;
    border-top: sólido 1px #39f;
    border-right: sólido 1px #39f;
    }
    a:link, a:visited { color: #fff; }
    ul#navigation li a:hover {
    color de fondo: #fff;
    color: #000;
    }

    >

    Usted está aquí Información de ubicación

    Otro aspecto de HTML es el identificador

    youarehere. Si desea modificar su menú para indicar la ubicación actual de sus usuarios, simplemente use esto

    ID

    para definir un color de fondo diferente u otro estilo. Mueva ese atributo

    ID

    al elemento de menú correcto en otras páginas para que la página actual esté siempre resaltada. ul#navigation li#youarehere a { color de fondo: #09f; } >

    Si usted pone estos estilos juntos en su página, puede crear una barra de menú horizontal o vertical que funcione con su sitio pero que sea rápida de descargar y muy fácil de actualizar en el futuro. El uso de XHTML+CSS convierte sus listas en una herramienta muy poderosa para el diseño.

    Si desea más ejemplos de menús horizontales, consulte lo siguiente.

    • Un menú horizontal con estilo
    • Una plantilla de menú horizontal básica
    • Un menú horizontal con estilo con usted está aquí
    • Una plantilla de menú horizontal básica con usted está aquí

TAMBIÉN TE INTERESA

errores SEO más comunes

Los 10 errores SEO que más se están cometiendo en la actualidad

Respetando a todos los buscadores del momento y a la trascendencia que tienen hoy otras fuentes como TikTok para la promoción de productos y servicios, Google sigue siendo el rey a la hora de encontrar algo en internet. Por tanto, quien quiera posicionar tiene que mirar sí o sí a la principal fuente de respuestas

Thermomix TM7

Llega la Thermomix TM7: más innovadora y tecnológica que nunca

Como usuario del robot de cocina más famoso de todos los tiempos, este fin de semana me quedé parado tras recibir un mail de Vorwerk, anunciado el lanzamiento de la Thermomix TM7, la actualización de una máquina que me ha tantas y tantas alegrías y facilidades para la gastronomía. Y con solo ver las imágenes

seguridad de los datos personales

Descuidos en tu día a día que comprometen la seguridad de los datos personales

Hoy es el Día de Internet Segura, una jornada para concienciar a los usuarios sobre la importancia de cuidar la seguridad de los datos personales. La seguridad en Internet se ha convertido en una prioridad global para todos, amén del creciente número de robos virtuales e intrusiones de los delincuentes a la información sensible de

planes de entrenamiento con IA

La era de los gimnasios smart y los planes de entrenamiento con IA

El sector de los gimnasios está empezando a introducir la tecnología para sus usuarios. Los planes de entrenamiento con IA ya son una realidad en espacios como los de Metropolitan. Es cuestión de tiempo que toda la innovación que viene de la tecnología comience a aterrizar en nuestras vidas para cuidar nuestro cuerpo. De hecho,