CODEWITHSUNDEEP
javascriptjqueryhtmlcssdrop-down-menu
Keenan Payne
Keenan Payne

Reputation: 816

Getting jQuery dropdown to display on hover

I have a piece of jQuery that I did not write that I am using to power dropdown menus on my website. The code works great but unfortunately the dropdown menu only displays on click and I would like the option for it to also display on hover. Is there any easy way to go about doing this with my existing code?

Here is a live example: http://jsfiddle.net/up6p5/

HTML

<div class="dropdown">
    Dropdown

    <ul class="dropdown-menu">
        <li>Profile</li>
        <li>Settings</li>
        <li>Log Off</li>
    </ul>
</div>

CSS

.dropdown {
    cursor: pointer;
    outline: none;
    position: relative;
    width: auto;
}

.dropdown .dropdown-menu {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: inherit;
    font-weight: inherit;
    left: 0;
    margin-left: 0px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    text-transform: none;
    width: 200px;
    z-index: 99999;

    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}

.dropdown ul.dropdown-menu { list-style-type: none; }

.dropdown .dropdown-menu li {
    display: block;
    padding: 5px 10px;

    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.dropdown .dropdown-menu li:hover { background-color: #f3f8f8; }

.dropdown.dropdown-active .dropdown-menu {
    opacity: 1;
    pointer-events: auto;
}

jQuery

function DropDown(el) {
    this.dd = el;
    this.initEvents();
}

DropDown.prototype = {
    initEvents: function () {
        var obj = this;

        // Toggle .dropdown-active on click
        obj.dd.on('click', function (event) {
            $(this).toggleClass('dropdown-active');
            event.stopPropagation();
        });
    }
}

$(function () {
    var dd = new DropDown($('.dropdown'));

    $(document).click(function () {

        // Remove class from all dropdowns
        $('.dropdown').removeClass('dropdown-active');
    });
});

Upvotes: 0

Views: 693

Answers (5)

Ekin
Ekin

Reputation: 1955

Here is the jsfiddle: http://jsfiddle.net/xibalbian/kVBLf/

DropDown.prototype = {
  initEvents: function () {
    var obj = this;
    $(".dropdown").hover(function (event) {
  $(this).toggleClass("dropdown-active");
        event.stopPropagation();
    });
  }
}

I've used .hover(function(event) {...} so that I can listen the events on the class dropdown, then I toggled dropdown-active class.

Edit #1: See new fiddle here, http://jsfiddle.net/xibalbian/U8nVH/ 

DropDown.prototype = {
  initEvents: function () {
    var obj = this;
    $(this).hide();
    $(".dropdown").hover(function (event) {
      $(this).addClass("dropdown-active");
        event.stopPropagation();
      });
    $(".dropdown-menu").mouseleave(function (event) {
        $(this).hide();
    });
   }
 }

First I've changed .toggleClass to .addClass and if I would say .removeClass when .mouseleave on the dropdown element it would keep the same behaviour and wouldn't keep the submenu stay still. So, I've listened .mouseleave event on the (submenu) .dropdown-menu and hided when mouse leaves.

Edit #3: Okay, so last and the successful version is just like this,

DropDown.prototype = {
  initEvents: function () {
    var obj = this;

    $(".dropdown").mouseenter(function (event) {
        $(this).addClass("dropdown-active");
        event.stopPropagation();
    });
    $(".dropdown-menu").mouseleave(function () {
        $(".dropdown").removeClass("dropdown-active");
    });   
  }
}

So we listened the .mouseenterevent and added a class of .dropdown-active and removed that class when .mouseleave . FIDDLE: http://jsfiddle.net/xibalbian/U8nVH/1/

Upvotes: 2

user3030212
user3030212

Reputation: 439

Add this mouseover handler to your init event function.

    obj.dd.on('click mouseover', function (event) {
        $(this).toggleClass('dropdown-active');
        event.stopPropagation();
    });

Upvotes: 0

AlokMaurya
AlokMaurya

Reputation: 5

Replace " click " to "hover" here: // Toggle .dropdown-active on click obj.dd.on('hover', function (event)

Your code is absolutely fine and work properly.

Upvotes: 0

Alex Char
Alex Char

Reputation: 33218

Try this:

DropDown.prototype = {
    initEvents: function () {
        var obj = this;

        // Toggle .dropdown-active on click
        obj.dd.on('mouseenter mouseleave', function (event) {
            $(this).addClass('dropdown-active');
            event.stopPropagation();
        });
    }
}

fiddle

Upvotes: 2

umut
umut

Reputation: 1026

You can do it like ;

function DropDown(el) {
    this.dd = el;
    this.initEvents();
}

DropDown.prototype = {
    initEvents: function () {
        var obj = this;

        // Toggle .dropdown-active on click
        obj.dd.on('click', function (event) {
            $(this).toggleClass('dropdown-active');
            event.stopPropagation();
        });

        obj.dd.hover ( function (event) {
            if (event.type == "mouseenter") {
                $(this).addClass('dropdown-active');
            }
            else { // mouseleave
                 $(this).removeClass('dropdown-active');
            }
        });
    }
}

$(function () {
    var dd = new DropDown($('.dropdown'));


});

jsfiddle link

Upvotes: 0

Related Questions