The very top level of my navigation is a horizontal bar of buttons. When the user hovers over the top level, a second level dropdown toggles on. Is there any way to program my navigation so that when the user clicks on a particular second-level item, it will close the second-level container and automatically open a different second-level dropdown elsewhere on the navigation, as if on hover??
In other words, say my top level navigation bar is six horizontal buttons. When the user hovers over button four, they will see a dropdown of various selections. When they click on a particular selection inside that dropdown, it will automatically close the button four dropdown container and open the dropdown container under top-level button five, as if the user was hovering on it?
(I have searched, but turned up nothing I identified as similar to my issue.)
EDIT: adding code per request.
Button four dropdown html:
<li class="top-level">Division4
<div class="drop_1col-topA" title="Menu by category">
<div class="col_A">
<ul>
<li class="second-level">Product1
</li>
<li class="second-level">Product2
</li>
<li class="second-level">Product3
</li>
<li class="second-level">Division 5 Products
</li>
</ul>
</div>
</div>
</li>
Button five dropdown html:
<li class="top-level">Division5
<div class="drop_1col-topA" title="Menu by category">
<div class="col_A">
<ul>
<li class="second-level">Product1
</li>
<li class="second-level">Product2
</li>
<li class="second-level">Product3
</li>
</ul>
</div>
</div>
</li>
I would like it if the user clicks on "Division 5 Products" under button four dropdown and it automatically opens the button five drowdown, as if the user was hovering on it.
Related
My website has a vertical side menu with around 20 items. When a item is click it loads the destination, but the side menu needs to be again scrolled to find the active items if at the bottom of the side menu. Now how do I make the side menu auto scroll to active item on page load. Code snippet as below. Please help.
<nav class="menu">
<ul class="sidebar-menu metismenu" id="sidebar-menu">
<li class="">
Page 1
</li>
<li class="">
Page 2
</li>
<li class="">
Page 3
</li>
<li class="">
Page 4
</li>
<li class="">
Page 5
</li>
<li class="">
Page 6
</li>
<li class="">
Page 7
</li>
.......
<li class="active">
Page 20
</li>
</ul>
</nav>
If you are using javascript/JQuery then you one way to do this is by saving the selected item index in localStorage.Then fetch the saved index on window.onload/document.ready and then use scrollIntoView/animate to autoscroll to active item.
You should ideally be using two , one for the menu and one for the display destination page. You can have an id tag for each menu item and set it to have the focus. So for example:
<li id="6" class="">
Page 6
</li>
You can use document.getElementById("6").focus() to set the focus to the 6th item. Aternatively, you can make the menu div section non-scrolling.
I have a burger icon that show on small screens, on clicking on it a div is shown beneath the navigation menu containing some <li> elements that are used for navigation among pages .
<div class='tabs'>
<ul class="navs">
<li class="active"><a href="#" >Home</a></li>
<li><a href="#" >Organizations</a></li>
<li>About</li>
<li>Register</li>
<li>Contact</li>
<li><input type="text" class="search-input"><button type="submit" class="search-button"><img src=""/></button></li>
</ul>
</div>
The burger icon :
<label for="toggle">☰</label>
<input type="checkbox" id="toggle"></input>
When I click the burger icon the dropdown menu appears and if I click on one of the <li>, active class is added to this <li>
I want to close this dropdown after clicking on one of the <li> or click outside the tabs div using Javascript .
I'm not using Bootstrap or Jquery.
Two solutions here, if you add jQuery or if you want raw JavaScript:
// jQuery version
let toggle = $('#toggle');
let menu = $('.navs');
toggle.click(() => {
menu.toggleClass('active');
});
// non-jQuery / raw JavaScript
let toggle = document.getElementById('toggle');
let menu = document.getElementsByClassName('navs');
toggle.addEventListener('mouseup', () => {
menu.classList.toggle('active');
});
You may have to tweak a little bit to your page. element.classList is standard now, that said some older browsers may not support it.
I have some Bootstrap Dropdown elements in my navbar that should hide if the user scrolls. However, after calling the toggle method on the dropdown clicking on the dropdown no longer toggles the dropdown.
After pageload you can scroll the page and repeatedly toggle dropdowns via click. If you scroll while a dropdown is open the JS closes the open dropdown. After that point you cannot toggle that dropdown via click. Other dropdowns continue to toggle until you scroll while the dropdown is open.
<nav>
<li class="menu-item menu-item-has-children dropdown">
<span class="dropdown-header"></span>About Our Company
<div role="menu" class=" dropdown-menu">
<div class="container">
<div class="row">
<section class="widget menu-post-widget-2 menu-post-widget-class">
<div class="row">
...
</div>
</section>
</div>
</div>
</div>
</li>
</nav>
The JS:
$(window).on('scroll', function(){
// Close the drop down on scroll
$('nav .dropdown.open').dropdown('toggle');
});
I have a side bar menu collapsible submenu in my Angular project. I used isActive comment for showing active state. When i refresh any page it should show the particular menu with active state. it works on when i refresh submenu's first link. If i click submenu's second link, it doesn't work.
I dont know how to declare active more than a link. ng-class="{show:isActive('/create-workorder')}"
My code is below
<ul>
<li>Work
<ul class="second_level" ng-class="{show:isActive('/create-workorder')}">
<li>
<a href="#/create-workorder" class="" ng-class="{active_sub:isActive('/create-workorder')}">
<div class="create_wo"></div>Create WO</a>
</li>
<li>
<a href="#/workorder-all" class="" ng-class="{active_sub:isActive('/workorder-all')}">
<div class="overall_queue"></div>Overall all</a>
</li>
</ul>
</li>
<li>Status
<ul class="second_level" ng-class="{show:isActive('/history')}">
<li>
<a href="#/history" class="" ng-class="{active_sub:isActive('/history')}">
<div class="status"></div>History</a>
</li>
<li>
<a href="#/recent" class="" ng-class="{active_sub:isActive('/recent')}">
<div class="recent"></div>Recent</a>
</li>
</ul>
</li>
</ul>
A common technique to use to determine active menu is to use the URL itself.
On page refresh you can check the URL and highlight corresponding menu.
For parent-child menu, you can choose to code the relationship, e.g. specify that you should also highlight "status" when you highlight "history".
Or you can use URL itself for the structure, e.g. #/status/history instead of #/history.
I have write my own document click function $(document).click(function(e) { to trace click and hide my custom build menu. However, when I clicked on Bootstrap standard drop down menu, my document click function is being skipped from running.
<li class="dropdown">
Settings <b class="caret"></b>
<ul class="dropdown-menu">
<li>My Account</li>
<li>Log Out</li>
</ul>
</li>
For better explanation, here is my sample code: http://jsfiddle.net/XwjE6/2/ As you can see if you clicked on "My Menu" and then click on "Settings", "My Menu" doesn't disappear.
How can I ensure my document click function is always listen click and execute code? So that I can get my menu to hide when user click on bootstrap menu. Thanks.