Make Column in sub submenu (megamenu)

Hi Basilis,

Thanks for the link but I’ve seen it before and there is no explication for I want to do. I used it to set up what you see on the picture above but I want to go further that why I ask for help.

Best regards,

Clément

Just to let you see the result :

Now I wonder if I can set upthe width of the submenu to display more than 3 column by category… I’ll look for that !

Hi Ismael,

I use this html code for the left column :

<br />
<center>
<a href="http://www.bijouterie-valer.fr/lesmarques/bijouterie/#creationsvalerbijoux">
<img src="http://www.bijouterie-valer.fr/wp-content/uploads/2016/06/Img-crea-valer-menu-01.png" div class="intro2"; alt="Les Créations Valer"; style="width:128px; height:64px" />
</center>
</a>

<a href="http://www.bijouterie-valer.fr/lesmarques/bijouterie/#dinvanh">
<img src="http://www.bijouterie-valer.fr/wp-content/uploads/2016/06/Dinh-Van-logo-noir-WEB.png" div class="intro2"; alt="Dinh Van"; style="width:86px; height:64px" /></a>

<a href="http://www.bijouterie-valer.fr/lesmarques/bijouterie/#degrisogono">
<img src="http://www.bijouterie-valer.fr/wp-content/uploads/2016/06/De-Grisogono-logo-WEB.png" div class="intro2"; alt="De Grisogono"; style="width:86px; height:64px" /></a>

<a href="http://www.bijouterie-valer.fr/lesmarques/bijouterie/#jaegerlecoultre">
<img src="http://www.bijouterie-valer.fr/wp-content/uploads/2016/06/Logo-Jaegger-LecoultreWEB.png" div class="intro2"; alt="Jaegger Lecoultre"; style="width:86px; height:64px" /></a>

<a href="http://www.bijouterie-valer.fr/lesmarques/bijouterie/#chaumet">
<img src="http://www.bijouterie-valer.fr/wp-content/uploads/2016/06/chaumet_logo-bijouterie-WEB.png" div class="intro2"; alt="Chaumet"; style="width:86px; height:64px" /></a>

<a href="http://www.bijouterie-valer.fr/lesmarques/bijouterie/#hublot">
<img src="http://www.bijouterie-valer.fr/wp-content/uploads/2016/06/Logo-Hublot-WEB.png" div class="intro2"; alt="Hublot"; style="width:86px; height:64px" /></a>

<a href="http://www.bijouterie-valer.fr/lesmarques/bijouterie/#messika">
<img src="http://www.bijouterie-valer.fr/wp-content/uploads/2016/06/Messika-Logo-WEB.png" div class="intro2"; alt="Messika"; style="width:86x; height:64px" /></a>

<a href="http://www.bijouterie-valer.fr/lesmarques/bijouterie/#chopard">
<img src="http://www.bijouterie-valer.fr/wp-content/uploads/2016/06/chopard-vector-logoNB-WEB.png" div class="intro2"; alt="Chopard"; style="width:86px; height:64px" />
</a>

This code for the right column :

<br />
<center>
<a href="http://www.bijouterie-valer.fr/lesmarques/horlogerie/#creationsvalerhorlogerie">
<img src="http://www.bijouterie-valer.fr/wp-content/uploads/2016/06/Img-crea-valer-menu-02.png" div class="intro"; alt="Les Créations Valer"; style="width:128px; height:64px" />
</center>
</a>
<a href="http://www.bijouterie-valer.fr/lesmarques/horlogerie/#zenith">
<img src="http://www.bijouterie-valer.fr/wp-content/uploads/2016/06/Logo_Zenith-WEB.png" div class="intro"; alt="Zenith"; style="width:86px; height:64px" /></a>
<a href="http://www.bijouterie-valer.fr/lesmarques/horlogerie/#chaumet">
<img src="http://www.bijouterie-valer.fr/wp-content/uploads/2016/06/chaumet_logo-horlogerieWEB.png" div class="intro"; alt="Chaumet"; style="width:86px; height:64px" /></a>  
<a href="http://www.bijouterie-valer.fr/lesmarques/horlogerie/#jaegerlecoultre">
<img src="http://www.bijouterie-valer.fr/wp-content/uploads/2016/06/Jaeger-lecoultre-logoWEB.png" div class="intro"; alt="Jaeger Lecoultre"; style="width:86px; height:64px" /></a>
<a href="http://www.bijouterie-valer.fr/lesmarques/horlogerie/#chopard">
<img src="http://www.bijouterie-valer.fr/wp-content/uploads/2016/06/chopard-vector-logo_WEB.png" div class="intro"; alt="Chopard"; style="width:86px; height:64px" /></a>
<a href="http://www.bijouterie-valer.fr/lesmarques/horlogerie/#breitling">
<img src="http://www.bijouterie-valer.fr/wp-content/uploads/2016/06/breitling-vectorWEB.png" div class="intro"; alt="Breitling"; style="width:86px; height:64px" /></a>
<a href="http://www.bijouterie-valer.fr/lesmarques/horlogerie/#omega">
<img src="http://www.bijouterie-valer.fr/wp-content/uploads/2016/06/omega-logo-WEB.png" div class="intro"; alt="Omega"; style="width:86px; height:64px" /></a>
<a href="http://www.bijouterie-valer.fr/lesmarques/horlogerie/#hermes">
<img src="http://www.bijouterie-valer.fr/wp-content/uploads/2016/06/logo-hermes-2-WEB.png" div class="intro"; alt="Hermes"; style="width:86px; height:64px" /></a>
<a href="http://www.bijouterie-valer.fr/lesmarques/horlogerie/#tagheuer">
<img src="http://www.bijouterie-valer.fr/wp-content/uploads/2016/06/logo-tag-heuer-WEB.png" div class="intro"; alt="Tag Heuer"; style="width:86px; height:64px" /></a>

And I’ve put this CSS code in my style.css child theme to make a class (I still hesitate between the class “intro” or “intro2”:) :

.intro {
    opacity:0.3;
}
.intro:hover {
   opacity:1;
}

.intro2 {
    opacity:0.3;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.intro2:hover {
   opacity:1;
   -webkit-transform: scale(1.1);
   -moz-transform: scale(1.1);
   -o-transform: scale(1.1);
   transform: scale(1.1);
}

Do you need more information ?

Thanks !

Best regards,

Clement

• This reply was modified 8 years, 6 months ago by Blue_Bear.

Hi,

Yes I thought about that but prefer changing the max width of the submenu in order to allow more images to show on one line rather than put smaller images.

You can consider that topic close.

Once again thanks for your help enfold team !

Best regards,

Clement