Cómo crear: Botón "Más" en la barra de navegación

Página anterior botón página siguiente/antigua
página siguiente botón de bloque

Aprenda a crear un botón "Más".

Botón "Más" en la barra de navegación

Cree una barra de navegación con menú desplegable

Al pasar el ratón sobre un elemento dentro de la barra de navegación, aparecerá un menú desplegable.

Primer paso - Añadir HTML:

<div class="navbar">
  <a href="#home">Inicio</a>
  <a href="#news">Noticias</a>
  <div class="dropdown">
    <button class="dropbtn">Más
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Enlace 1</a>
      <a href="#">Enlace 2</a>
      <a href="#">Enlace 3</a>
    </div>
  </div>
</div>

Ejemplo de explicación:

Use cualquier elemento para abrir el menú desplegable, por ejemplo, un elemento <button>, <a> o <p>.

Cree un menú desplegable usando un elemento contenedor (como <div>) y añada enlaces del menú desplegable.

Envuelva el botón y otro elemento <div> con un elemento <div> para usar CSS para posicionar correctamente el menú desplegable.

Segundo paso - Añadir CSS:

/* Contenedor de la barra de navegación */
.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial;
}
/* Enlaces dentro de la barra de navegación */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* Contenedor del menú desplegable */
.dropdown {
  float: left;
  overflow: hidden;
}
/* Botón del menú desplegable */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Importante para alineación vertical en teléfonos */
  margin: 0; /* Es importante para la alineación vertical en teléfonos */
}
/* Añade un fondo de color rojo al enlace de la barra de navegación al pasar el ratón */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}
/* Contenido del menú desplegable (por defecto, está oculto) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* Enlaces dentro del menú desplegable */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
/* Añade un fondo de color gris al enlace del menú desplegable al pasar el ratón */
.dropdown-content a:hover {
  background-color: #ddd;
}
/* Muestra el menú desplegable al pasar el ratón */
.dropdown:hover .dropdown-content {
  display: block;
}

Prueba personalmente

Ejemplo de explicación:

Hemos establecido estilos como color de fondo y margen para la barra de navegación y los enlaces de navegación.

Hemos establecido estilos como color de fondo y margen para el botón del menú desplegable.

.dropdown La clase es .dropdown-content El contenedor. Ya que es un elemento <div> y no un elemento <a>, debemos hacerlo flotar para asegurarnos de que se quede al lado del enlace.

.dropdown-content La clase contiene el menú desplegable real. Por defecto, está oculto y se mostrará al pasar el ratón (ver a continuación). Nota: el ancho mínimo está establecido en 160px. Puedes cambiar este ajuste libremente.

No hemos utilizado bordes, sino box-shadow La propiedad, hace que el menú desplegable se vea como una tarjeta. Además, utilizamos z-index Coloca el menú desplegable delante de otros elementos.

:hover El selector se utiliza para mostrar el menú desplegable cuando el usuario coloca el ratón sobre el botón del menú desplegable.