La utilización de un mega-menú puede ayudarnos a destacar nuestros contenidos de manera clara y estructurada. Sobre todo si disponemos de muchos items y subitems. Existen varios plugins que hacen esta tarea de manera muy completa: varias columnas, inserción de contenido multimedia, buscadores, etc. Por ejemplo, Max Mega Menu.
Sin embargo, si lo que buscamos es algo sencillo, podemos revolverlo simplemente con css.
Cómo crear un mega-menú sin utilizar plugins
La manera es sencilla:
- Incluimos unas líneas de estilo en nuestro CSS.
- Utilizamos clases en los items de menú.
Lo siguiente es un ejemplo extraído de la documentación oficial del tema GeneratePress. Tema que se complementa muy bien con el editor visual Elementor, combo con el que realizo actualmente casi todos los proyectos web.
Incluir estilo a través de CSS
Incluimos en nuestro fichero CSS las siguientes líneas:
nav .main-nav .mega-menu {
position: static;
}
nav .main-nav .mega-menu > ul {
position: absolute;
width: 100%;
}
nav .main-nav .mega-menu > ul > li > a {
font-weight: bold;
}
nav .main-nav .mega-menu>ul>li {
display: inline-block;
width: 25%;
vertical-align: top;
}
nav .main-nav .mega-menu.mega-menu-col-2>ul>li {
width: 50%;
}
nav .main-nav .mega-menu.mega-menu-col-3>ul>li {
width: 33.3333%;
}
nav .main-nav .mega-menu.mega-menu-col-5>ul>li {
width: 20%;
}
nav .main-nav .mega-menu > ul > li > a:hover,
nav .main-nav .mega-menu > ul > li > a:focus,
nav .main-nav .mega-menu > ul > li[class*="current-"] > a,
nav .main-nav .mega-menu ul ul {
background-color: transparent !important;
}
nav .main-nav .mega-menu ul .sub-menu {
position: static;
display: block !important;
opacity: 1 !important;
width: 100%;
box-shadow: 0 0 0;
}
nav .main-nav .mega-menu .sub-menu .menu-item-has-children .dropdown-menu-toggle {
display: none;
}
@media (max-width: 768px) {
nav .mega-menu>ul>li {
display: block;
width: 100% !important;
}
nav .main-nav .mega-menu > ul {
position: relative;
}
}
A partir de WordPress 4.7, podemos incluir CSS fácilmente a través de su interfaz: Personalizar > Añadir CSS.
También puedes utilizar un plugin como Simple CSS.
Si no, puedes hacerlo en el archivo correspondiente en la carpeta del theme (generalmente style.css o similar).
Definir mega-menú
Después, simplemente debemos añadir la clase al item de menú correspondiente:
Por defecto, el mega-menú se estructura en 4 columnas. Podemos cambiarlo con:
Según el ejemplo. podemos utilizar las siguientes columnas:
- mega-menu-col-2
- mega-menu-col-3
- mega-menu-col-4
- mega-menu-col-5
Fuente:
Esta información se basa en una entrada del blog del tema Generatepress. Puedes ver la documentación completa en: https://docs.generatepress.com/article/building-simple-mega-menu/
Una respuesta
hola
muchas gracias por el tutorial
queria saber si han probado este otro mega menu?
al parecer hay un complemento que permite importar desde max mega menu
y a diferenciade este viene con la funcion sticky sin ncesidad de pagar la premium
https://wordpress.org/plugins/quadmenu/
saludos