javascript - Bootstrap: on hover in Dropdown menu parent menu highlighted -
I found the solution here:
I'm fixing the bootstrap NAV , I've customized it a little bit, so instead of clicking on the menu, hover it over the menu.
This is the code I added:
ul.nav li.dropdown: hover & gt; Ul.dropdown-menus {display: block; } And this is the structure of HTML:
When the parents are hive on the menu, it shows the menu below, but when I go to the sub menu parent menu hover state, then in that case should be selected. Can someone please implement me in Bootstrap 3.0?
Try it with Javascript:
$ (document) .ready (function () {$ (". Dropdown "). Hover (function () {$ ('. Dropdown-menu', this). Stop (true, TrueDown ("sharp"); $ (this) Toggle class ('Open');}, function () {$ ('. Dropdown-menu', this). Stop (true, true) .SlideUp ("Fas T "); $ (This) .toggleClass ('open');});}); & lt; Link href = "// maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel = "stylesheet" /> & Lt; Script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" & gt; & Lt; / Script & gt; & Lt; Script src = "// maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> & Lt; Li class = "dropdown" & gt; & Lt; A href = "#" class = "dropdown-toggle" data-toggle = "dropdown" roll = "button" aerial-expanded = "wrong" & gt; Top menu & lt; / A & gt; & Lt; Ul class = "dropdown menu" & gt; & Lt; Li & gt; & Lt; A href = "submenu.php" & gt; Submenu & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "submenu.php" & gt; Submenu & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "submenu.php" & gt; Submenu & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt;
Comments
Post a Comment