Auto generate bootstrap dropdown menu on mouse hover using jquery

Question

I am trying generating a dynamic bootstrap 3 dropdown menu for sharing on mouse hover.

See this picture

Dropdown menu

Instead of creating lots of HTML code I decided to generate dynamic menu. Here is what I have done so far:

HTML

<div class="dropdown dropup" >
    <a href="#" class="open-dropdown" data-link="http://google.com">Dropdown</a>
    <ul class="dropdown-menu" role="menu">
        <li id="link1">Link One</li>
        <li id="link2">Link Two</li>
        <li class="caret"></li>
    </ul>
</div>

JQuery

$(function() {
    $('.open-dropdown').hover(function(){
        $('#link1').html("Share link 1 "+$(this).data('link'));
        $('#link2').html("Share link 2 "+$(this).data('link'));
        $('.open-dropdown').dropdown();
    });
});

Problems

It opens the dropdown menu on click not on MOUSE HOVER.
I can't place <ul class="dropdown-menu" role="menu"> code outside of <div class="dropdown dropup"> container. See this jsfiddle http://jsfiddle.net/LTk3x/

Niflhel · Accepted Answer · 2014-07-25 01:25:35Z

1

What about just using some CSS ? :)

.dropdown:hover .dropdown-menu{
    display: block;    
}

Here is a jsFiddle:
http://jsfiddle.net/hMp2r/

answered Jul 25, 2014 at 1:25

Niflhel

6631 gold badge6 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Maximus Over a year ago

@Nifhel why caret position is misplaced? Also did you check my second problem?

Niflhel Over a year ago

sorry but I really don't get the second problem, could you provide a jsfiddle with an example please? And caret was like that when I included the bootstrap elements, it is the same in the other answer. But it might be working correctly for you if you didn't have this issue before.

Niflhel Over a year ago

Nope this is the one I created... And I don't see the relation with the second point, or please be more explicit.

Maximus Over a year ago

I want to use <ul class="dropdown-menu" role="menu"> outside of the <div class="dropdown dropup" > because I want to reuse the dropdown code on unlimited posts. I hope it makes sense now.

Niflhel Over a year ago

But I don't get why you would not be able to reuse it if it's not outside of the dropdown div... So an example would be nice. If you say it is not working you should have some code to show us.

|

inye · Accepted Answer · 2014-07-25 01:38:00Z

1

You can change $('.open-dropdown').dropdown(); by $('.dropdown-menu').toggle();

$(function() {
    $('.open-dropdown').hover(function(){
        $('#link1').html("Share link 1 "+$(this).data('link'));
        $('#link2').html("Share link 2 "+$(this).data('link'));
        $('.dropdown-menu').toggle();
    });
});

see http://jsfiddle.net/32xLc/1/

answered Jul 25, 2014 at 1:38

inye

1,7941 gold badge23 silver badges32 bronze badges

7 Comments

Maximus Over a year ago

Thanks @inye have you checked my second problem?

inye Over a year ago

why you need put the ul elemento outside of div container ?

Maximus Over a year ago

I want to reuse this code on hundreds of posts on a page.

Maximus Over a year ago

yes, this dropdown will appear on all sharing links

inye Over a year ago

I dont understan very well what you want. Maybe you can create a fiddle.jshell.net example.

|

Collectives™ on Stack Overflow

Auto generate bootstrap dropdown menu on mouse hover using jquery

HTML

JQuery

Problems

2 Answers 2

6 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

HTML

JQuery

Problems

2 Answers 2

6 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related