2 min de lectura

Menú horizontal HTML CSS

Veamos como crear un menu horizontal utilizando unícamente HTML y CSS.
Puedes ver también la entrada anterior donde hemos visto como crear un menú vertical con HTML y CSS.

Paso 1: Crear la lista con las opciones del menú

Lo cual de momento se ve así:

Notemos que la lista tiene ya los enlaces, pero estos apuntan dentro de la misma página a ningún lugar utilizando el símbolo numeral (#).

Paso 2: Dar formato a la lista

2.1: Tamaño y posición

Aplicar las propiedades float y clear para cargar el menú hacia el lado requerido. Poner el ancho del menú al total de la página.

2.2: Quitar viñetas y márgenes

Eliminar las viñetas automáticas y todos los márgenes y espaciados aplicados por defecto:

2.3: Acomodar los elementos en horizontal

La clave para el menú horizontal reside en modificar la propiedad float de los elementos <li> del menú

2.4: Estilos a los elementos

Aplicar estilos a los enlaces

Compartir
Líder técnico en equipos de desarrollo de software. Profesor de Desarrollo Web en la Universidad de Guadalajara. Emprendedora. Fundadora y CTO de CORB.mx. Ponente y tallerista. Colaboradora en proyectos de software libre y Open Source. Comprometida con la comunidad y la industria de la tecnología. Enfocada en el empoderamiento de las mujeres.

7 COMENTARIOS

  1. Hola que tal Michelle, es un gusto saludarte.
    Quisiera saber si puedes apoyarme con un tema que tengo.
    Estoy creando una aplicacion web en la que requiero anexar un boton en el cual el cliente haga un pago y se haga el cargo a su tarjeta, podrás asesorarme, es que no tengo ni idea como funciona esta parte de enlace con lso bancos o es alguna utilería?
    de antemano agradezco
    saludos

Deja tus comentarios

This site uses Akismet to reduce spam. Learn how your comment data is processed.