I'm working on a website where I have a sub-menu on the left side of the page. Assume the following menu structure
<div>
<li class="parent"><a style="cursor: pointer;"><i class="glyphicon glyphicon-book"></i>Parent</a>
<ul class="child">
<li><i class="glyphicon glyphicon-folder-close"></i>Child One</li>
<li><i class="glyphicon glyphicon-list-alt"></i>Child Two</li>
</ul>
</li>
<li class="parent"><a style="cursor: pointer;"><i class="glyphicon glyphicon-list"></i>Parent</a>
<ul class="child">
<li><i class="glyphicon glyphicon-sort-by-alphabet"></i>Child One</li>
<li><i class="glyphicon glyphicon-random"></i>Child Two</li>
<li><i class="glyphicon glyphicon-floppy-disk"></i>Child Three</li>
</ul>
</li>
</div>
I can collapse the menu no problem using jQuery. However, suppose a user clicks on one of the child links I would like to keep the collapsed open for only that particular parent and rest of the collapsed closed. I can't figure out how I would achieve this. Thanks in advance for your help.
This is my jQuery code so far.
$('.child').hide();
$('.parent').click(function () {
$(this).find('ul').slideToggle();
});
$('.collapse').on('show', function (e) {
// hide open menus
$('.collapse').each(function () {
if ($(this).hasClass('in')) {
$(this).collapse('toggle');
}
});
});
Do not over-ride <a> tag. And enclose the <li> within <ul> and not <div>. Use this way:
$(function () {
$('.child').hide();
$('.parent > a').click(function (e) {
e.preventDefault();
$(this).next('ul').slideToggle();
});
$('.collapse').on('show', function (e) {
// hide open menus
$('.collapse').each(function () {
if ($(this).hasClass('in')) {
$(this).collapse('toggle');
}
});
});
});
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<ul>
<li class="parent"><i class="glyphicon glyphicon-book"></i>Parent
<ul class="child">
<li><i class="glyphicon glyphicon-folder-close"></i>Child One</li>
<li><i class="glyphicon glyphicon-list-alt"></i>Child Two</li>
</ul>
</li>
<li class="parent"><i class="glyphicon glyphicon-list"></i>Parent
<ul class="child">
<li><i class="glyphicon glyphicon-sort-by-alphabet"></i>Child One</li>
<li><i class="glyphicon glyphicon-random"></i>Child Two</li>
<li><i class="glyphicon glyphicon-floppy-disk"></i>Child Three</li>
</ul>
</li>
</ul>
Related
I have my index calls from other HTML pages using the library CSI.js
my index:
<div class="col-6 col-md-2" id="nav">
<div data-include="./views/menu/sticky-menu.html"></div> <!-- menu -->
</div>
in menu page:
<div class="sticky-menu" id="sticky-menu">
<div class="sticky-menu-header">
<img class="logo" src="./img/logo-branco.svg" />
</div>
<ul>
<li class="active"><i class="fa fa-home"></i>Home </li>
<li><i class="fa fa-glass"></i>Eventos </li>
<li><i class="fa fa-file-image-o"></i>Alertas <span class="sticky-menu-label">4 </span></li>
<li><i class="fa fa-cog"></i>Indicadores
<ul class="submenu">
<li>Teste</li>
<li>Teste </li>
<li>
Teste
<ul class="submenu">
<li>Teste </li>
</ul>
</li>
<li>Consulting </li>
</ul>
</li>
<li>
<i class="fa fa-suitcase"></i>Grafana
<ul class="submenu">
<li>Item 0 </li>
<li>Item 1 <span class="sticky-menu-label">10 </span></li>
</ul>
</li>
</ul>
</div>
submenu have dropdown animation with jquery:
jQuery(document).ready(function() {
jQuery("#sticky-menu").jqueryAccordionMenu();
});
On the menu page (sticky-menu.html) it works fine, like this:
https://i.stack.imgur.com/oAPds.png
Notice that the + sign appears when clicked:
https://i.stack.imgur.com/9OJIu.png
However, not index.html, menu (jquery) does not work:
https://i.stack.imgur.com/tvBRR.png
When I enter the code in the console:
jQuery(document).ready(function() {
jQuery("#sticky-menu").jqueryAccordionMenu();
});
it works: https://i.stack.imgur.com/YZe8y.png
I've included the js code on both pages, I think it's silly, but I really can not. Thank you for your help.
EDIT:
I noticed that my sticky-menu.html is wearing after the script. How to solve?
https://i.stack.imgur.com/j1Pzu.png
EDIT 2 :
I solved with requireJS.
You could run some code as follows
function waitForElement(id, callback){
var checkForElement = setInterval(function(){
if(document.getElementById(id)){
clearInterval(checkForElement);
callback();
}
}, 100);
}
waitForElement("idOfElementToWaitFor", function(){
alert("element is loaded.. do stuff");
});
Where your id for your element would be #sticky-menu and your callback function would be jQuery("#sticky-menu").jqueryAccordionMenu();
I have this side menu, each item with sub-items, that when clicked go to another page.
When I press the sub-item News of MAIN and I load another page, the menu collapses like in the first photo. Is there any way to keep the menu open when navigating to other pages. This below is my HTML code. I've been stuck for two days with this problem. I've tried options from similar questions here but no luck. I'm fairly new to front-end development, so any help would be appreciated.
<div id="main-menu" class="main-menu collapse navbar-collapse">
<ul class="nav navbar-nav">
<li> <i class="menu-icon fa fa-home"></i>Home </li>
<h3 class="menu-title">L&D</h3><!-- /.menu-title -->
<li class="menu-item-has-children dropdown">
<i class="menu-icon fa fa-calendar"></i>MAIN
<ul id="navigation" class="sub-menu children dropdown-menu">
<li>News</li>
<li>Sport</li>
<li>Lifestyle</li>
<li>Economy</li>
<li>Politics</li>
</ul>
</li>
<li class="menu-item-has-children dropdown">
<i class="menu-icon fa fa-bolt"></i>ABOUT
<ul class="sub-menu children dropdown-menu">
<li>Authors</li>
<li>History</li>
<li>Trivia</li>
</ul>
</li>
</ul>
</div>
var url = location.href;
$('.sub-menu').each(function() {
var $dropdownmenu = $(this);
$(this).find('li').each(function() {
if( $(this).find('a').attr('href')== url ) {
console.log( $dropdownmenu ); // this is your dropdown menu which you want to display
console.log($($dropdownmenu).parents('li')); // this is the parent list item of the dropdown menu. Add collapse class or whatever that collapses its child list
}
});
});
This code will help
*Modified
Maybe you can save the "status" of menu on a cookie or on session, like a snapshot and read it when you are loading the page.
Using javascript find the anchor that's URL matches the current URL and then toggle it's parent's visibility.
Obviously, you will need to tweak for your specific needs.
$(document).ready(function(){
//var current_url = window.location.href;
var current_url = "news";
$(".sub-menu").find("a[href='" + current_url + "']").closest("ul").addClass("show");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main-menu" class="main-menu collapse navbar-collapse">
<ul class="nav navbar-nav">
<li> <i class="menu-icon fa fa-home"></i>Home </li>
<h3 class="menu-title">L&D</h3><!-- /.menu-title -->
<li class="menu-item-has-children dropdown">
<i class="menu-icon fa fa-calendar"></i>MAIN
<ul id="navigation" class="sub-menu children dropdown-menu">
<li>News</li>
<li>Sport</li>
<li>Lifestyle</li>
<li>Economy</li>
<li>Politics</li>
</ul>
</li>
<li class="menu-item-has-children dropdown">
<i class="menu-icon fa fa-bolt"></i>ABOUT
<ul class="sub-menu children dropdown-menu">
<li>Authors</li>
<li>History</li>
<li>Trivia</li>
</ul>
</li>
</ul>
</div>
When each main list item is expanded, it has a show class added. You could check what URL the user is going to, and if it's under that submenu, pass that into the list items classlist via your templating engine. It would look something like
<li class="menu-item-has-children dropdown {% if showClass %}show{% endif %}">
And resolve to
<li class="menu-item-has-children dropdown show">
Thus being expanded on the next page.
Edit: The same class needs to be added to the <ul> element below the parent <li>, i.e.
<li class="menu-item-has-children dropdown {% if showClass %}show{% endif %}">
...
<ul id="navigation" class="sub-menu children dropdown-menu {% if showClass %}show{% endif %}">
Disclaimer! ... I am not real keen on front end development.
I have a nav menu that has two sub-menus. I am using the Symfony 3 framework for the application, so twig is involved. My base template has the navigation code so it should be available on all extended twig pages. Here is the html
<ul class="nav">
<!-- Main menu -->
<li class="current"><i class="glyphicon glyphicon-th"></i> Dashboard
</li>
<li><i class="glyphicon glyphicon-stats"></i> Emails</li>
<li><i class="glyphicon glyphicon-user"></i> Users</li>
<li class="submenu">
<a href="#">
<i class="glyphicon glyphicon-list"></i> Admin
<span class="caret pull-right"></span>
</a>
<ul>
<li><i class="glyphicon glyphicon-user"></i> My Profile</li>
<li>Change Password</li>
</ul>
</li>
<li class="submenu">
<a href="#">
<i class="glyphicon glyphicon-list"></i> Public Pages
<span class="caret pull-right"></span>
</a>
<ul>
<li>Home Page</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</li>
<li>Logout</li>
</ul>
On the dashboard page it works just as expected.When "Admin" is clicked, the sub menu opens and the sub links are displayed. Click the other, the first sub menu closes and the other opens up.
However, when I switch to another page such as "Emails" when any of the sub menus are clicked it immediately closes. I have tried multiple ways to try and fix this but it does not seem to work. Here is the javascript for "submenu"
$(".submenu > a").click(function(e) {
e.preventDefault();
var $li = $(this).parent("li");
var $ul = $(this).next("ul");
if($li.hasClass("open")) {
$ul.slideUp(350);
$li.removeClass("open");
} else {
$(".nav > li > ul").slideUp(350);
$(".nav > li").removeClass("open");
$ul.slideDown(350);
$li.addClass("open");
}
});
Thank you for your help.
Iam trying to add active class in the <li> but it's not working.
This is all my codes in the view:
<script type="text/javascript">
$(document).ready(function () {
$('#nav li.menu').click(function () {
$('#nav li.menu').removeClass("active");
$(this).addClass("active");
});
});
</script>
<nav id="nav">
<ul class="nav nav-pills nav-stacked">
<li class="main_menu"><span class="fa fa-bars fa-lg icon_here"></span> <span class="main">MENU</span></li>
#foreach (var item in Model) {
<li class="menu"> <i class="fa fa-dot-circle-o fa-lg"></i> #item.sm_name</li>
}
</ul>
</nav>
This is what displayed in the console:
I have a question on Bootstrap. I have this code:
<ul>
<li><span class="icon fa-home">Home</span></li>
<li><span class="icon fa-th">Photogallery</span></li>
<li><span class="icon fa-user">Chi sono</span></li>
<li><span class="icon fa-linkedin-square">Curriculum</span>
<ul>
<li>Formazione</li>
<li>Stage</li>
<li>Insegnante Hip Hop</li>
<li>Danzatore</li>
<li>Coreografie</li>
</ul></li>
<li><span class="icon fa-envelope">Contatti</span></li>
</ul>
I would that the central <ul> element was a sub menu of the #curriculum <li> element. In other words I would that the sub menu was shown only when the #curriculum element was expanded.
How can I do this?
In this moment the navigation menu is this:
<ul>
<li><span class="icon fa-home">Home</span></li>
<li><span class="icon fa-th">Photogallery</span></li>
<li><span class="icon fa-user">Chi sono</span></li>
<li><span class="icon fa-linkedin-square">Curriculum</span>
<ul>
<li>Formazione</li>
<li>Stage</li>
<li>Insegnante Hip Hop</li>
<li>Danzatore</li>
<li>Coreografie</li>
</ul></li>
<li><span class="icon fa-envelope">Contatti</span></li>
</ul>
You could put the list items you want in the sub menu inside a bootstrap dropdown like this:
Example http://www.bootply.com/IspYezDkvo
<li class="dropdown">
Curriculum <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Formazione</li>
<li>Stage</li>
<li>Insegnante Hip Hop</li>
<li>Danzatore</li>
<li>Coreografie</li>
</ul>
</li>