CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user617447
user617447

Reputation:

Problems with dropdown using CSS and jQuery

I am trying to create a drop down menu using jQuery and CSS.
Here is jsFiddle

But this doesn't seem to work well. Can anyone point what am I missing?

Upvotes: 1

Views: 230

Answers (5)

Mandeep Pasbola
Mandeep Pasbola

Reputation: 2639

just remove all the jquery from the code and add this in css 

#userbox:hover ul{ display:block;}

Demo : http://jsfiddle.net/v6TvC/8/

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 205987

DEMO fiddle

$('#userbox').click(function(){
       $(this).addClass('open');
}).mouseleave(function(){
        $(this).removeClass('open');
});

DEMO fiddle 2

$('#userbox').bind('click mouseleave',function(ev){
    ev.type === 'click' ? $(this).addClass('open') : $(this).removeClass('open');
});

Upvotes: 0

Indrek
Indrek

Reputation: 6696

The simplest solution I could come up with jQuery:

$('#userbox h3').click(function() {
    $('#userbox ul').show('100');
});

$('#userbox').bind('mouseleave', function() {
                   $('#userbox ul').hide('100');
});

Upvotes: 0

Sergio Tulentsev
Sergio Tulentsev

Reputation: 230286

Here's working code, but it's a little bit more complicated than what you had:

var timer;

function openMenu() {
    $(this).addClass('open');
}

function keepOpen() {
    clearTimeout(timer);
}

function closeMenu() {
    $(this).removeClass('open');
    timer = setTimeout(function() {closeMenu(this);}, 50);
}

$('#userbox').hover(keepOpen, closeMenu);
$('#userbox').click(openMenu);

Example: http://jsfiddle.net/stulentsev/v6TvC/3/

Upvotes: 0

Jesse Pollak
Jesse Pollak

Reputation: 1600

Your current code is:

<div id="userbox" onClick="$(this).addClass('open');"      onMouseOut="$(this).removeClass('open');">
    <h3>Administrator</h3>
    <ul>
        <li><a href="#">Settings</a></li>
        <li><a href="#">Logout</a></li>
    </ul>
</div>

The onClick is what I think is wrong, it should be onmouseover. When you change it to that:

<div id="userbox" onmouseover="$(this).addClass('open');" onMouseOut="$(this).removeClass('open');">
    <h3>Administrator</h3>
    <ul>
        <li><a href="#">Settings</a></li>
        <li><a href="#">Logout</a></li>
    </ul>
</div>

The drop down menu works.

Hope this answer helps.

Upvotes: 0

Related Questions