samedi 18 juin 2016

jquery: do not show specific dropdown menus

Some of my main menu items have dropdown menus, some not. i would like to set which ones show up on hover and on click, and which ones not. in an example below, i would like to forbid first and fourth dropdowns to show up, because they have only one item.

<div id="main-menu">
<ul>
<li><a href="http://piirissaareturism.ee/avasta-piirissaar/">Avasta Piirissaar</a>
<ul class="dropdown-menu">
<li><a rel="bookmark" href="http://piirissaareturism.ee/avasta-piirissaar/welcome-to-your-site">Welcome to Your Site!</a></li>
</ul></li>
<li><a href="http://piirissaareturism.ee/kasulik-info/">Kasulik info</a>
<ul class="dropdown-menu">
<li><a rel="bookmark" href="http://piirissaareturism.ee/kasulik-info/toitlustus">Toitlustus</a></li>
<li><a rel="bookmark" href="http://piirissaareturism.ee/kasulik-info/majutus">Majutus</a></li>
</ul></li>
<li><a href="http://piirissaareturism.ee/puhkajale/">Puhkajale</a></li>
<li><a href="http://piirissaareturism.ee/meist/">Meist</a>
<ul class="dropdown-menu">
<li><a rel="bookmark" href="http://piirissaareturism.ee/meist/mtu-piirissaare-turism">MTÜ Piirissaare Turism</a></li>
</ul></li>
</ul>
</div>

i use also jquery to do next:

first: slide down dropdown on hover

    $('#main-menu ul li').hover(
    function () {
        $('ul', this).stop(true, true).delay(100).slideDown(300);
    },
    function () {
        $('ul', this).stop(true, true).slideUp(300);            
    });

second: if menu item has dropdown - show it on click and do not go to item's url, otherwise go to that item's url.

 $('#main-menu ul li:has(.dropdown-menu)').on('click', function (event) {
 if ($(event.target).parents('ul.dropdown-menu').length > 0) {
    event.stopPropagation();
 } else {
    event.preventDefault();
 }
 $(this).find('ul').slideToggle();
 });

i know, my description is abstruse, but look at my jsfiddle to understand better.

Aucun commentaire:

Enregistrer un commentaire