I have build a admin panel where in sidebar there is submenu with menu But the problem I'm facing is i want to stay visible when i cliked one of the submenu..But it again going to main menu.
How to stay visible for the submenu cliked..any suggestion or help with code please?
<div id="sidebar"><i class="icon icon-home"></i> Dashboard
<ul>
<li class="submenu"> <i class="icon icon-list"></i> <span>Members</span>
<ul>
<li>Create Member</li>
<li>Member List</li>
</ul>
</li>
<li class="submenu"> <i class="icon icon-list"></i> <span>Payroll</span>
<ul>
<li>Create Monthly Payroll</li>
<li>Edit Monthly Payroll</li>
</ul>
</li>
<li class="submenu"> <i class="icon icon-list"></i> <span>Report</span>
<ul>
<li>Manager Monthly Report</li>
<li>Employee Monthly Report</li>
</ul>
</li>
</ul>
</div>
Related
I have 2 different pages with common sidebar menu. In my example, you can see Parent Menus with Submenus. In Dashboard I've page1 sub-menu, when I click on it, redirects to other pages, I want in sidebar Parent menu should add a class. Even I refresh the page.
Here is my HTML code
Check this fiddle
<ul class="nav nav-sidebar">
<li class="sidebar-nav-item with-sub">
<i class="icon ion-ios-home-outline"></i> Dashboard
<ul class="nav sidebar-nav-sub">
<li class="nav-sub-item">Page 01</li>
<li class="nav-sub-item">Page 02</li>
<li class="nav-sub-item">Page 03</li>
<li class="nav-sub-item">Page 04</li>
<li class="nav-sub-item">Page 05</li>
</ul>
</li>
<li class="sidebar-nav-item with-sub">
<i class="icon ion-ios-home-outline"></i> Menu
<ul class="nav sidebar-nav-sub">
<li class="nav-sub-item">Menu 01</li>
<li class="nav-sub-item">Menu 02</li>
<li class="nav-sub-item">Menu 03</li>
<li class="nav-sub-item">Menu 04</li>
<li class="nav-sub-item">Menu 05</li>
</ul>
</li>
<li class="sidebar-nav-item with-sub">
<i class="icon ion-ios-book-outline"></i> Pages
<ul class="nav sidebar-nav-sub">
<li class="nav-sub-item sub-with-sub">
Pricing
<ul>
<li class="sub-sub-link">Pricing 01</li>
<li class="sub-sub-link">Pricing 02</li>
<li class="sub-sub-link">Pricing 03</li>
</ul>
</li>
</ul>
</li>
</ul>
Since you're using jQuery, you could use the jquery lib js-cookie to add the selected menu to the cookies then read it in the other pages and attach the class.
But I suggest another way based on the URL of the page target the related anchor them activate the parent sidebar menu item.
Add the following line to the top of your ready function :
$(document).ready(function() {
$('a[href="'+window.location.pathname+'"]').closest('.sidebar-nav-item').find('.sidebar-nav-link').addClass('active');
...
});
I have a side menu with some menu items.
One menu items can have some submenu items
Here is how I realize this
<div id="mySidenav" class="sidenav mainmenu">
×
Home
<li>Calendar
<ul class="submenu">
<li>- Shedule new appointment</li>
</ul>
</li>
Patient Database
<li>Findings
<ul class="submenu">
<li>- All Findings</li>
<li>- Open Findings</li>
</ul>
</li>
<li>Controlling
<ul class="submenu">
<li>- Patients</li>
<li>- Medical Partners</li>
<li>- Internal Controlling</li>
</ul>
</li>
<li>Invoices
<ul class="submenu">
<li>- Receipt of payment</li>
</ul>
</li>
I need to click on a menu item and it will show submenu items if I click once again it will hide them. How can I realize this?
See here I apply click even on li not on because on anchor you add a url of other pages, so 22 event not fired on same element.Checkout and if any issue let me know
$(document).ready(function() {
$('.main_wrapper li').on('click', function() {
$(this).children('.submenu').slideToggle();
});
});
.submenu {
display: none;
}
ul li {
background-color: #000;
margin-bottom: 5px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mySidenav" class="sidenav mainmenu">
×
Home
<ul class="main_wrapper">
<li>Calendar
<ul class="submenu">
<li>- Shedule new appointment</li>
</ul>
</li>
<li>Patient Database</li>
<li>Findings
<ul class="submenu">
<li>- All Findings</li>
<li>- Open Findings</li>
</ul>
</li>
<li>Controlling
<ul class="submenu">
<li>- Patients</li>
<li>- Medical Partners</li>
<li>- Internal Controlling</li>
</ul>
</li>
<li>Invoices
<ul class="submenu">
<li>- Receipt of payment</li>
</ul>
</li>
</ul>
if you use bootstrap then it will be easy to do with it.
<div id="mySidenav" class="sidenav mainmenu">
×
Home
<!-- my changes starts here -->
<li data-toggle="collapse" data-target="#test">Calendar
<ul class="submenu collapse" id="test">
<li>- Shedule new appointment</li>
</ul>
</li>
Patient Database
<li>Findings
<ul class="submenu">
<li>- All Findings</li>
<li>- Open Findings</li>
</ul>
</li>
<li>Controlling
<ul class="submenu">
<li>- Patients</li>
<li>- Medical Partners</li>
<li>- Internal Controlling</li>
</ul>
</li>
<li>Invoices
<ul class="submenu">
<li>- Receipt of payment</li>
</ul>
</li>
source: https://www.w3schools.com/bootstrap/bootstrap_collapse.asp
I am trying to do the Sidenav, when i have a full screen, the menu displays but when i minimize the browser the menu button shows but when i click it, it doesn't display anything. I don't know why. I am using Materialize css. http://jsfiddle.net/xdrL9e83/8/. When i run it in Jsfiddle it shows the Toggle icon being outside Navbar. I don't know why
<nav>
<div class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo">Booking</a>
<i class="material-icons"></i>
</div>
<ul class="hide-on-med-and-down">
<li>Patients</li>
<li>Patients History</li>
<li>Bookings</li>
<li>Notes</li>
<li>Add Patient</li>
</ul>
<ul id="slide-out" class="side-nav fixed">
<li class="bold">Patients</li>
<li class="bold">Patients History</li>
<li>Bookings</li>
<li>Notes</li>
<li>Add Patient</li>
</ul>
<i class="mdi-navigation-menu"></i>
</nav>
The Javascript
<script>
$(".button-collapse").sideNav();
</script>
Your DIV is closed in the wrong place. It needs to close after the content of your Nav.
<nav>
<div class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo">Booking</a>
<i class="mdi-navigation-menu"></i>
<ul class="right hide-on-med-and-down">
<li>Patients</li>
<li>Patients History</li>
<li>Bookings</li>
<li>Notes</li>
<li>Add Patient</li>
</ul>
<ul id="slide-out" class="side-nav">
<li class="bold">Patients</li>
<li class="bold">Patients History</li>
<li>Bookings</li>
<li>Notes</li>
<li>Add Patient</li>
</ul>
</div>
</nav>
http://jsfiddle.net/aaronfranco/xdrL9e83/14/
Put the menu toggle icon (mdi-navigation-menu) at the top..
<nav>
<i class="mdi-navigation-menu"></i>
<div class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo">Booking</a>
<i class="material-icons"></i>
</div>
<ul class="hide-on-med-and-down">
<li>Patients</li>
<li>Patients History</li>
<li>Bookings</li>
<li>Notes</li>
<li>Add Patient</li>
</ul>
<ul id="slide-out" class="side-nav fixed">
<li class="bold">Patients</li>
<li class="bold">Patients History</li>
<li>Bookings</li>
<li>Notes</li>
<li>Add Patient</li>
</ul>
</nav>
Demo: http://codeply.com/go/mMvlUnsNRT
I am trying to make my header with the Ink framework (CSS/JS) fixed so it does not move on the page while scrolling and I can't seem to make it so.
HTML:
<div id="topbar">
<nav class="ink-navigation ink-grid hide-all show-large">
<ul class="menu horizontal flat blue">
<li>
Home
</li>
<li>
Menu item
</li>
<li>
Menu item
</li>
<li>
Menu item
</li>
<li>
Menu item
</li>
<li>
Menu item
</li>
<li>
Menu item
</li>
<li>
Menu item
</li>
<li>
Menu item
</li>
<li>
Menu item<i class="icon-caret-down"></i>
<ul class="submenu">
<li>
Submenu item
</li>
<li>
Submenu item
</li>
</ul>
</li>
</ul>
</nav>
<nav class="ink-navigation ink-grid hide-all show-medium show-small">
<ul class="menu vertical flat blue">
<li>
<a class="logoPlaceholder push-left" href="#" title="Site Title">Home</a>
<button class="toggle push-right" data-target="#topbar_menu" id="toggleVisibility">
<span class="icon-reorder"></span>
</button>
</li>
</ul>
<ul class="menu vertical flat blue hide-all" id="topbar_menu">
<li>
Menu item
</li>
<li>
Menu item
</li>
<li>
Menu item
</li>
<li>
Menu item
</li>
<li>
Menu item
</li>
<li>
Menu item
</li>
<li>
Menu item
</li>
<li>
Menu item
</li>
<li class="">
<a class="toggle" data-target=".submenu" href="#">Menu item<i class="icon-caret-down"></i></a>
<ul class="submenu hide-all dropdown">
<li>
Submenu item
</li>
<li>
Submenu item
</li>
</ul>
</li>
</ul>
</nav>
<div class="border">
</div>
</div>
I've looked and tried toggling around with the CSS package but could not get it going.
Any help would be appreciated!
are you using last version release or are you using the source from github?
In last version release we have a bug and it does not work if the element is wider than 90% of the viewport width.
Get the last build from https://github.com/sapo/Ink/tree/develop/dist and use:
<div id="topbar" data-offset-top="0" class="sticky" data-activate-in-layouts="large,medium,small">
....
attribute "data-activate-in-layouts" is optional to make it work in the selected viewport sizes.
I'm trying to create an "expandable" menu. So, if a user clicks on option A two suboptions should show up. I'm trying to do something like this but in a menu...
This is my code so far...
<li>
<i class="icon-picture icon-white"></i> Galleries
<div class="nav-collapse88">
<ul>
<li>
<i class="icon-play"></i> Add
</li>
<li>
<i class="icon-play"></i> Delete
</li>
</ul>
</div>
</li>
So when I click on galleries the options Add and Delete should appear. Any suggestions?
I would nest ul's like so:
<ul>
<li>
<a class="expand">Link used to expand</a>
<ul>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
</ul>
</li>
</ul>
The I would use this jquery:
$(document).on('click', 'a.expand', function(e) {
e.preventDefault();
$(this).siblings('ul').slideToggle();
});
You would need to set the sub menu CSS to display none.
Something along these lines should do the trick.
This works:
<ul>
<li class="dropdown">
Support
<ul class="dropdown-menu" role="menu">
<li><i class="icon-play"></i> Add</li>
<li><i class="icon-play"></i> Delete</li>
</ul>
</li>
</ul>
I believe you want the class to be dropdown not collapse. That's how the bootstrap documentation recommends it for menus.
Change the class to be dropdown, remove the inner div, and add the class dropdown-menu the inner ul.
<li class="dropdown">
<i class="icon-picture icon-white"></i>>Galleries
<ul class="dropdown-menu">
<li>
<i class="icon-play"></i> Add
</li>
<li>
<i class="icon-play"></i> Delete
</li>
</ul>
</li>
tyy this http://jsfiddle.net/68RXP/213/
$(function(){
$(".nav-collapse88").hide();
$("a").click(function(e){
e.preventDefault();
$(".nav-collapse88", $(this).parent()).slideToggle();
});
})
<li>
<a href="?op=1">
<i class="icon-picture icon-white"></i> Galleries</a>
<div class="nav-collapse88">
<ul>
<li>
<i class="icon-play"></i> Add
</li>
<li>
<i class="icon-play"></i> Delete
</li>
</ul>
</div>
</li>