Crear un menú desplegable en Blogger

Menú desplegable responsive - ¿Por qué correr detrás de las secuencias de comandos, como jQuery, mientras que usted puede utilizar simplemente CSS y HTML para crear un menú desplegable responsive para su blog o web. Ahora necesita aprender cómo crear un menú desplegable en la navegación.

Anteriormente di a conocer algunos estilos de Menú desplegable para Blogger de los cuales les dejo los enlaces a continuación:

Como agregar un menú para mi blog de Blogger con un solo widget
Como hacer un Menú vertical desplegable para mi blog de Blogger
Como hacer un menú horizontal con submenús y buscador integrado para Blogger
Menu Jquery para Blogger
Menú desplegable para Blogger
Menú desplegable para Blogger con imágenes

Puede utilizar una herramienta llamada Editor HTML ONLINE, donde podrá realizar los cambios en vivo y luego copiar el código he insertarlo en un solo widget de Blogger, o una pagina web.

Editor HTML

A continuación puede ver su demostración en el siguiente blog de demos

Demo Clic aquí

¿Cómo crear un menú desplegable?

Un menú desplegable adicional, es cuando se tiene demasiado contenido en su blog o web o te gusta mantener las cosas bien organizadas. Para agregar un menú desplegable para blogs de Blogger haga lo siguiente:

Un clic en Diseño

Un clic en "Añadir un gadget"

Seleccione el widget HTML/Javascript, abralo

Ingrese las siguientes lineas de código en su interior

<style>
/* Root variables for consistent theming */
:root {
  --primary-bg: #1a1a1a; /* Dark background */
  --accent-color: #e63946; /* Vibrant red accent */
  --text-color: #f1f1f1; /* Light text */
  --dropdown-bg: #2c2c2c; /* Slightly lighter dropdown */
  --hover-bg: #e63946; /* Hover background */
  --transition: all 0.3s ease; /* Smooth transitions */
  --shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Subtle shadow */
}

/* Reset and base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text-color);
    background-color: #f9fafb;
    padding-top: 70px; /* Para compensar el menú fijo */
}

/* Main navbar styles */
#modern-navbar {
  background: var(--primary-bg);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  box-shadow: var(--shadow);
  padding: 0 20px;
}

/* Navigation container */
#modern-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  height: 60px;
}

/* Main menu styles */
#modern-nav ul {
  display: flex;
  list-style: none;
}

#modern-nav li {
  position: relative;
}

#modern-nav li a {
  display: block;
  color: var(--text-color);
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  padding: 20px 15px;
  transition: var(--transition);
}

#modern-nav li a:hover {
  background: var(--hover-bg);
  color: var(--text-color);
}

/* Dropdown styles */
#modern-nav li ul {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--dropdown-bg);
  flex-direction: column;
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: var(--transition);
  box-shadow: var(--shadow);
  border-radius: 4px;
}

#modern-nav li:hover > ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#modern-nav li ul li a {
  padding: 12px 15px;
  font-size: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#modern-nav li ul li:last-child a {
  border-bottom: none;
}

/* Hamburger menu for mobile */
.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  padding: 15px;
}

.hamburger span {
  width: 25px;
  height: 3px;
  background: var(--text-color);
  margin: 2px 0;
  transition: var(--transition);
}

/* Mobile menu toggle */
#menu-toggle {
  display: none;
}

/* Responsive styles */
@media (max-width: 768px) {
  .hamburger {
    display: flex;
  }

  #modern-nav ul {
    display: none;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    background: var(--primary-bg);
    flex-direction: column;
    padding: 20px;
    box-shadow: var(--shadow);
  }

  #menu-toggle:checked ~ ul {
    display: flex;
  }

  #modern-nav li {
    width: 100%;
  }

  #modern-nav li a {
    padding: 15px;
    font-size: 18px;
  }

  #modern-nav li ul {
    position: static;
    background: var(--dropdown-bg);
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
    margin-left: 20px;
  }

  #modern-nav li:hover > ul,
  #modern-nav li ul li:hover > ul {
    display: block;
  }

  /* Hamburger animation */
  #menu-toggle:checked ~ .hamburger span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

  #menu-toggle:checked ~ .hamburger span:nth-child(2) {
    opacity: 0;
  }

  #menu-toggle:checked ~ .hamburger span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
  }
}

/* Accessibility improvements */
#modern-nav a:focus {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}
</style>

<div id="modern-navbar">
  <nav id="modern-nav">
    <input type="checkbox" id="menu-toggle">
    <label for="menu-toggle" class="hamburger">
      <span></span>
      <span></span>
      <span></span>
    </label>
    <ul>
      <li><a href="/">Inicio</a></li>
      <li><a href="#">Temas</a></li>
      <li><a href="#">Contactos</a></li>
      <li>
        <a href="#">Noticias</a>
        <ul>
          <li><a href="#">Nombre 1</a></li>
          <li><a href="#">Nombre 2</a></li>
          <li><a href="#">Nombre 3</a></li>
        </ul>
      </li>
      <li>
        <a href="#">Servicios</a>
        <ul>
          <li><a href="#">Servicio 1</a></li>
          <li><a href="#">Servicio 2</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</div>

Reemplace # con las URLs de sus entradas y el texto en negrita Nombre 1 con el nombre de las páginas pertinentes.

Para añadir otra pestaña simplemente pega este código antes del cierre </ul>

<li>   <a href='#'>Nombre 4</a>  </li>

Listo ahora ya tienes este menú horizontal con submenús en tu blog de Blogger

Si deseas puedes realizar algunos cambios:

Para cambiar el color

/* Root variables for consistent theming */
:root {
  --primary-bg: #1a1a1a; /* Dark background */
  --accent-color: #e63946; /* Vibrant red accent */
  --text-color: #f1f1f1; /* Light text */
  --dropdown-bg: #2c2c2c; /* Slightly lighter dropdown */
  --hover-bg: #e63946; /* Hover background */
  --transition: all 0.3s ease; /* Smooth transitions */
  --shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Subtle shadow */
}

Un clic en "Guardar" eso es todo!

Visite sus blogs para ver los nuevos cambios

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE

¿Te ha resultado útil este artículo, recomiendanos?

Si

TAGS: Menu desplegable

Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.