Crear sub-menu con imagen de background en WordPress

Hoy traemos un consejo para que podáis añadir imágenes en vuestros sub-menus dinamicos en WordPress, todo sin tocar nada de código PHP solamente mediante estilos CSS.

Crea tu sub-menu dinamico solo con estilos CSS

Empezamos explicando el código HTML del menú, como vemos en nuestro extracto tenemos la estructura del apartado con un submenu interno, nuestro ejemplo renovables ele item principal y dentro tenemos el sub-menu

<li id="" class="renovables "><a href="" style="color: rgb(255, 255, 255);">Renovables</a>
<ul class="sub-menu">
  <li id="wind" class="wind"><a href="">Energía eólica</a></li>
  <li id="solar" class="solar"><a href="">Energía solar</a></li>
</ul>
</li>

Aquí mostramos nuestros estilos principales del Sub-menu, le añadimos unos estilos de transition para que tenga movimiento al quitar el foco de nuestro sub-menu.

Añadimos la opacidad:0 y hidden para que nuestro menu este creado, pero oculto y sin visibilidad.

.nav li.renovables ul.sub-menu {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 100%;
    left: 0;
    width: 760px;
    height: 320px;
    transform: translateY(0%);
    z-index: -1;
    -webkit-transition: z-index step-start,all .4s linear;
    transition: z-index step-start,all .4s linear;
    -moz-transition: z-index step-start,all .4s linear;
    -ms-transition: z-index step-start,all .4s linear;
}

 

Al poner el foto sobre nuestro item del menu principal (renovables) hacemos que nuestro sub-menu cambie su visibilidad, opacidad y z-index para que aparezca de la nada a la vez se hace visible, el tranform y transition le dan el movimiento.

.main-menu .renovables:hover .sub-menu  {
    visibility: visible;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    transition-delay: 0s, 0s, 0.5s;
}

El dinamismo sin uso de lenguajes de programación

Para destacar hemos creado dos items dentro de nuestro sub-menu, lo cual dividiremos ambos al 50%, lo cual le damos ese ancho a cada uno respectivamente.

Le pones un background cover para que se adapte a todo el ancho la imagen del fondo.

Ademas ponemos nuestra imagen y le damos un tono de gris, para que al hacer el foco en nuestro item, este cambie a color que veremos mas abajo en los estilos del hover.

.main-menu .renovables .wind, .main-menu .renovables .solar {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    display: inline-block;
    width: 50%;
    height: 320px;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    transition: 250ms ease;
}

.main-menu .renovables .wind {
    background: url(/wp-content/themes/hine/library/images/wind.jpg) no-repeat center bottom;
}

.main-menu .renovables .solar{
    background: url(/wp-content/themes/hine/library/images/solar.jpg) no-repeat center bottom;
}

Añadimos los estilos en el hover para que pase de un gris a color, mediante el grayscale(0%), ademas le damos un 250ms de transición de un color al otro.

.main-menu .renovables .wind:hover, .main-menu .renovables .solar:hover {
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    transition: 250ms ease;
}

Para mas detalle hacemos que el texto de la caja «a» mediante el padding y el transition que se mueva al poner el foco y con un tiempo de transición de 0.5 segundos.

.main-menu .renovables .wind:hover a, .main-menu .renovables .solar:hover a {
    padding: 75px 60px 0 50px;
    transition: all 0.5s ease;
}

Espero que les sirva de ayuda en todos sus trabajos.  🙂

 

 

 

One thought on “Crear sub-menu con imagen de background en WordPress

  • Aparte debes crear las entradas o paginas de contenidos que desde Apariencia , Menus podras anidar como items de menu principales o subitems de uno de los menus principales, segun la jerarquia que desees crear.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *