TODO SOBRE INFORMÁTICA Y TECNOLOGÍA




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>

<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ú
Home Login Contact

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 */
}

#menu {
    display: flex;              /* Conversion to flexbox */
    padding:0;                  /* Deletion of internal margins */
    background-color: #fff;     /* Add the background color */
}

Home Login Contact


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 */
}

#menu li {
    list-style-type: none ;       /* Deletion of the bullet points */
}

Home Login Contact


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 */
}

#menu a {
    display:block;                /* Displays an element as a block element */
    min-width: 80px;              /* Minimum link width */
}


Home Login Contact

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 */
}

#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 */
}


Home Login Contact

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 */ }

#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 */
}


Home Login Contact

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;
}

#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 */
}

#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 */
    <b>transition: all 1s ;</b>          /*Adding a transition to have gradual hover effects */
}