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.
Related
I have bootstrap Sidebar menu in my admin panel, when I click and fetch a link then two items are active, like in the picture, why?
Check the li tag to see if the tag contains active option in distributor's package page. You need active on current page only & not on distrubutor's page when you are on dp page
Adding more to that answer,
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
Keeping a list item 'active' would mean, that item would be always selected. Check the list item class for this.
I added a dropdown list to the navbar on another site and added the class .open to the list. My intention is as follows: upon load the webpage navbar list contains an img element and opens displaying a promotional offer. So far so good, the page loads and the list drops displaying the ad, and if clicked it then closes.
Ok what I am aiming for is adding a function via jquery or JavaScript or css which will automatically CLOSE the dropdown list after about 5 seconds. I have read that the .open class in bootstraps.min.css is not cleared by default and therefore will remain open unless it is 'clicked' to close it.
<div class="navbar-responsive">
<ul class="nav navbar-nav">
<li class="active">
<li class="open dropdown-menu">
<a href="#" Id="test" class="dropdown-toggle" data- toggle="dropdown"><strong class="caret">
<ul class="dropdown-menu">
<li>
Click to close.
</li>
<li>
<img src="image folder/my_ad_image.png"
</li>
</ul>
</li>
</li>
</ul>
</div><!---end nav collapse--->
</div><!---end container--->
</div>>!---end main navbar--->
This above is what I have written. It rests atop an already existing navbar.
Thanks for reading.
If anyone has any suggestion or could point me in the right direction with respect to tying a jquery timeout function to my .open class or id that would be great. So far I have been unable to tie a jquery function or css to my dropdown list
Thanks.
You can use setTimeout() to implement timers in javascript.
The setTimeout() method calls a function or evaluates an expression
after a specified number of milliseconds.
Adapting your code it can be implemented like this:
CSS:
...
<li id="myid" class="open dropdown-menu">
<strong class="caret"></strong>
<ul class="dropdown-menu">
<li>
Click to close.
</li>
<li> ... </li>
</ul>
</li>
...
jScript (assuming you're using jQuery):
$(function() {
setTimeout(function() {
$("#myid").removeClass("open")
}, 5000);
});
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.
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.
I have been trying to create a page using jQuery mobile.
I am trying to create a navigation menu using lists and collapsibles.
The way the navigation works is there are links and there are collections of links.
Each collection of links is put into a collapsible list.
Here is the page:
<div data-role="page">
<div data-role="content">
<ul data-role="listview">
<li> Link 1
</li>
<li> Link 3
</li>
</ul>
<div data-role="collapsible" data-inset="false">
<h3>Links inside</h3>
<ul data-role="listview">
<li>link 5
</li>
<li>link 6
</li>
</ul>
</div>
<ul data-role="listview">
<li> Link 3
</li>
<li> Link 4
</li>
</ul>
</div>
The problem is that putting anything after a listview or collapsible seems to have some issue with padding and is slightly pushed up into the previous element, covering some of it.
I tried using <br/> here
and clear:both here
If possible I would like to use only one listview instead of mixing listviews and collapsible but that did not work for me.