Preserve active state of a menu item about bootstrap-hover-dropdown HOT 7 CLOSED

That active class is certainly added by the system when the page is rendered and then there is CSS to make that active class appear, and then styles to make it look different.

I don't understand the other part... you want to show menus as "open" by default if they are active? Why? Wouldn't that cover up some of the page?

In terms of adding a class to the <li>, you could do something like this in PHP ($currentLink is a variable you set possibly from a $_SERVER variable):

<li class="<?= $currentLink == '/about/' ? 'active' : '' ?>"><a href="/about/">About</a></li>

or same example but using AngularJS (currentLink is something set from $location, i.e. $scope.currentLink = $location.path()):

<li ng-class="{ active: currentLink == '/about/' }"><a href="/about/">About</a></li>

from bootstrap-hover-dropdown.

Thanks for the feedback!

The part of setting the corresponding class to the

<u class="nav navbar-nav">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-target="#" href="/products/">Products</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-target="#" href="/about/">About</a></li>
<ul>

<u class="nav navbar-nav">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-target="#" href="/products/">Products</a></li>
<li class="dropdown active"><a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-target="#" href="/about/">About</a></li>
<ul>

from bootstrap-hover-dropdown.

I think so, but why not use separate styles for active? There's no reason it shouldn't always show the active state, even if they're hovering over other items. For example, Bootstrap even has an active class, and it highlights the item blue, and the hover styles are light grey (in this screenshot, I'm hovering over the 2nd to bottom item and the top one is "active"):

from bootstrap-hover-dropdown.

I just setup an example here: http://www.bootply.com/RbT27Dlej6
As you can see, the "Dropdown" submenu is active and the submenu visible; fine.
But when I hover over "Contact", the "Dropdown" submenu remains, but should hide while hovering over "Contact".

from bootstrap-hover-dropdown.

This issue isn't with my plugin but with the other plugin you're using. You could make the background a solid for the submenu and then have the submenu have a higher z-index than the active and be done. You could fix this all with tweaking a couple lines of CSS on the other plugin.

from bootstrap-hover-dropdown.

Ok. Another approach without interfering any other plugins.
I'm just using your demo page: When the entry "Dropdown" has the class active, while hovering over "Account", how can I disable the active status for this time?

from bootstrap-hover-dropdown.

You would have to mess with my plugin. And it would require changing the JavaScript whereas the other plugin only requires you putting some styles in your own stylesheet.

You'd have to create a index of elements with active on them and take them off/put them back depending on if other menu items are open. It will be tricky, but you're welcome to fork and do that. It's not something I think needs to belong in this plugin tho.

from bootstrap-hover-dropdown.