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 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.
A continuación puede ver su demostración en el siguiente blog de demos
¿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
62 comentarios: