Open Menu dzosoft
Close Menu dzosoft

   TODO SOBRE INFORMÁTICA Y TECNOLOGÍA


                             




BUILD THE MASS IN A FEW MONTHS THAT OTHERS BUILD IN YEARS!

Publish perfectly-optimized content in 1-click



 
 
 

Cómo crear un menú horizontal en css

 
 

Step 1

 

Implementación de código HTML5

 
Lo primero que debe hacer es construir el código HTML para nuestro menú.
Para ello, simplemente crearemos una lista con un enlace por línea.
Luego agregamos la identificación del menú que nos permitirá orientar el menú y los elementos que lo componen con CSS.
<ul id="menu">
    <li>
        <a href="home.html">Home>/a>
    </li>
    <li>
        <a href="login.html">Login</a>
    </li>
    <li>
        <a href="contact.html">Contact</a>
    </li>
</ul>

aquí como se ve primero nuestro menú
 

Paso 2


 

Posicionamiento horizontal de enlaces

 
Ahora usaremos el #selector de menú para manipular el elemento <ul>.
Entonces, comencemos convirtiendo nuestra lista en un cuadro flexible con flexbox con la pantalla: flex; propiedad.
Luego aprovechamos para eliminar los márgenes internos que están presentes por defecto en las listas con relleno: 0;.

Y terminamos agregando un color de fondo con background-color: #fff;
#menu {
    display: flex;              /* Conversion to flexbox */
    padding:0;                  /* Deletion of internal margins */
    background-color: #fff;     /* Add the background color */
}


 

Paso 3


 

Eliminación de las viñetas.

 

Como puede ver, los enlaces encajan muy bien uno al lado del otro, pero las viñetas todavía están allí, por lo que deben eliminarse.
Para ello, vamos a utilizar el selector .menu li para manipular las diferentes líneas de la lista. Este selector coincide
todos los elementos HTML <li> que están dentro del elemento con id=menu.
#menu li {
    list-style-type: none ;       /* Deletion of the bullet points */
}


 

Etapa 4



 

Dimensiones de enlaces

 
Ahora trabajaremos directamente sobre los enlaces con el selector de #menú a. Este selector coincide con todos los HTML <a> elementos que son
dentro del elemento con id = menú.
Comenzamos convirtiendo los enlaces en elementos similares a bloques, para que se puedan dimensionar fácilmente.

Recomiendo la propiedad min-width para dimensionar los enlaces
La ventaja de min-width sobre width es que el botón puede ser más ancho si uno de los enlaces contiene demasiado texto.
También puedes optar por no poner dimensiones y dejar que el contenido defina el ancho de los botones.
#menu a {
    display:block;                /* Displays an element as a block element */
    min-width: 80px;              /* Minimum link width */
}


 

Paso 5

 

Botones de formato

 
Los enlaces tienen tamaño, ahora tenemos que administrar su configuración de visualización para que parezcan botones.
Las opciones de personalización son numerosas. Aquí tienes un ejemplo de personalización, varía los valores a ver que pasa.
#menu a {
    display:block;                /* Displays an element as a block element */
    min-width: 80px;              /* Minimum link width  */   
    margin: 0.5rem;               /* External margins (1 values ​​= 4 directions) */
    padding: 0.4rem 0;            /* Internal margins (2 values ​​= top/bottom and left/right)*/
    text-align: center;           /* Text centering */   
    background-color: #99CCFF;    /* Background color */
    color: #000099;               /* Text color */
    text-decoration: none;        /* Remove underline */
    border: 1px solid #000099;    /* Adding a border*/
    border-radius: 4px;           /* Rounded edges */
}


 

Paso 6


 

Alineación horizontal de los enlaces

 
La ventaja de haber creado una caja flexible es que podremos elegir fácilmente cómo posicionar los diferentes
enlaces en la línea. Simplemente agregue una propiedad de alineación flexible con el valor de nuestra elección:
center, flex-end, space-around, space-between, space-evenly.
#menu {
    display: flex;              /* Transformation en flexbox */
    padding:0;                  /* Suppression des marges internes */
    background-color: #fff;     /* Ajout de la couleur d'arrière-plan */
    justify-content: center     /* Alignements des liens dans le menu */
}


 

Paso 7

 

Agregar el efecto de desplazamiento del enlace

 
Para agregar un efecto al botón flotante, usamos el pseudo-selector :hover. Todo lo que tienes que hacer es hacer todo el formato.
variaciones que desee. Esto solo se aplicará al pasar el mouse por encima.
#menu a:hover {
  background-color: #000099;
  color: #fff;
  border-color: #fff;
}



 

Paso 8

 

Agregar una transición para tener efectos de desplazamiento gradual

 
Para hacer que los efectos al pasar el mouse se apliquen gradualmente, simplemente agregue una transición.
Por lo tanto, usamos la propiedad de transición con los valores all y 1s.
La propiedad all significa que todas las propiedades que cambien al pasar el mouse se animarán y 1s es la duración de la animación.
#menu a {
    display:block;                /* Displays an element as a block element */
    min-width: 80px;              /* Minimum link width  */   
    margin: 0.5rem;               /* External margins (1 values ​​= 4 directions) */
    padding: 0.4rem 0;            /* Internal margins (2 values ​​= top/bottom and left/right)*/
    text-align: center;           /* Text centering */   
    background-color: #99CCFF;    /* Background color */
    color: #000099;               /* Text color */
    text-decoration: none;        /* Remove underline */
    border: 1px solid #000099;    /* Adding a border*/
    border-radius: 4px;           /* Rounded edges */
    transition: all 1s ;          /*Adding a transition to have gradual hover effects */
}	



Puede descargar el código aquí   

Descargar el código



También te puede interesar


Cómo podemos hacer animaciones solo con CSS

Cómo crear un menú con css y javascript

Cómo se redondea el radio del borde en CSS?

Cómo crear un formulario de registro con HTML y CSS

Cómo hacer un sitio web responsivo

Cómo crear efecto GLITCH con CSS

Como cambiar el estilo de las barras de desplazamiento

Cómo crear un efecto de enfoque al pasar el mouse usando CSS

Cómo crear un pie de página usando Bootstrap: tutorial y ejemplo


Leave comment
          

Guardar apodo y correo electrónico en este navegador para la próxima vez.



Cargando...     

Publish perfectly-optimized content in 1-click