javascript - Auto generate bootstrap dropdown menu on mouse hover using jquery -
I am trying to create a dynamic Bootstrap 3 dropdown menu to share on Mouse Hover.
See this photo
< P> Instead of creating a lot of HTML code, I decided to generate dynamic menus. Here's what I did:
HTML & lt; Div class = "dropdown dropup" & gt; & Lt; A href = "#" class = "Open-dropdown" data-link = "http://google.com" & gt; Dropdown & lt; / A & gt; & Lt; Ul class = "dropdown-menu" role = "menu" & gt; & Lt; Li id = "link1" & gt; Link a & lt; / Li & gt; & Lt; Li id = "link2" & gt; Link two & lt; / Li & gt; & Lt; Li class = "carat" & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; $ (function () {$ ('.option-dropdown'). Hover (function () {$ ('# link1' Html ("Share link 1" + $ (this) .data ('link'); $ ('# link2') .html ("shared link 2" + $ (this) .data ('link') ); $ ('.option-dropdown'). Dropdown ();});}); Problems - This does not click on Microsoft hover but opens the dropdown menu.
- I use
& lt; Ul class = "dropdown-menu" role = "menu" & gt; code can not be outside of and Container See this JSFDial
Just about using some CSS what? :)
.dropdown: hover .dropdown-menu {display: block; } Here is a jsFiddle:
& lt; Div class = "dropdown dropup" & gt; & Lt; A href = "#" class = "Open-dropdown" data-link = "http://google.com" & gt; Dropdown & lt; / A & gt; & Lt; Ul class = "dropdown-menu" role = "menu" & gt; & Lt; Li id = "link1" & gt; Link a & lt; / Li & gt; & Lt; Li id = "link2" & gt; Link two & lt; / Li & gt; & Lt; Li class = "carat" & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; $ (function () {$ ('.option-dropdown'). Hover (function () {$ ('# link1' Html ("Share link 1" + $ (this) .data ('link'); $ ('# link2') .html ("shared link 2" + $ (this) .data ('link') ); $ ('.option-dropdown'). Dropdown ();});}); Problems - This does not click on Microsoft hover but opens the dropdown menu.
- I use
& lt; Ul class = "dropdown-menu" role = "menu" & gt; code can not be outside of and Container See this JSFDial
Just about using some CSS what? :)
.dropdown: hover .dropdown-menu {display: block; } Here is a jsFiddle:
Comments
Post a Comment