Make the menu drop down

Hi! I have created a menu on the left sidebar (theme minion).
It has the 1 navigation menu, with the 2 submenu. And I would like that this 2 submenu, doesn´t appear from the beginning. I want this just appear when hover or click in the 1 menu.
The reason is that the submenu is very long, so I only want to see the firts menu, which is the principal.

Thanks

2 Answers

Kido D
answered 10 years ago

Hi Miriam,
To enable the menu dropdown, you can go to Dashboard / Appearances / Customize / Custom Code, and add the code below to the Header Code section:

   <style>
.menu > li .sub-menu {
max-height: 0;
overflow: hidden;
-webkit-transition: max-height .7s;
-moz-transition: max-height .7s;
transition: max-height .7s;
}
.menu > li:hover .sub-menu {
max-height: 1000px;
}
</style>

Hope this helps!

Miriam Barahona
replied 10 years ago

Thanks a lot! It works perfectly. The only problem is with the hover effect, it doesn’t work in tablets or mobiles… Would it be possible to have the same effect, but with one click?

(example:
A=main menu
B=second menu.
If I click once in A, it shows B in the menu. And when I click again in A, it shows the A page.)

Thank again 🙂

Kido D
answered 10 years ago

Hi there,
To active the submenu on a click, please change the CSS code above to this one:

  <style>
.menu > li .sub-menu {
max-height: 0;
overflow: hidden;
-webkit-transition: max-height .7s;
-moz-transition: max-height .7s;
transition: max-height .7s;
}
.menu > li .active + .sub-menu {
max-height: 1000px;
}
.menu > li .sub-menu-collapse {
position: absolute;
right: 0;
top: 3px;
cursor: pointer;
}
</style>

Then, go to Dashboard / Appearances / Customize / Custom Code, and add the following code to Footer Code section:

  <script>
jQuery(document).ready(function($){
// Add arrow to submenu
$('.menu .menu-item .sub-menu').before( '<i class="sub-menu-collapse icon-caret-down"></i>');
$('.sub-menu-collapse').click(function(){
$(this).toggleClass('active');
});
});
</script>

Cheers!

Miriam Barahona
replied 10 years ago

Perfect! It works nicely 🙂