I am working on a sidebar menu navigation which expands and collapses when user clicks on the menu. On top of that, I want the menu to stay expanded if the link on the sub menu is active when the page loads.
This is the code sample that I am working on right now. Can someone please help me check the issue on my code?
jQuery(document).ready(function(e) {
{
var m = e("ul.menu li.sidebar ul.sub-menu");
e("li")
}
e("ul.menu > li.sidebar > a").click(function(e) {
e.preventDefault()
}),
e(document).mouseup(function(i) {
var n = e("li.sidebar");
n.is(i.target) || 0 !== n.has(i.target).length || m.hide("fast")
});
});
.sidebar {
padding: 0 !important;
margin-top: 2%;
}
.sidebar a {
background-color: #122842;
padding: 3%;
color: white !important;
}
.sidebar .sidebar-submenu a {
color: #6e6e6e !important;
background-color: #e1ecf1 !important;
display: block;
}
.sidebar .current-menu-item a {
color: #22374f !important
}
.sidebar .sub-menu {
display: none;
}
.current-menu-ancestor .sub-menu {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<ul class="menu ">
<li class="sidebar current-menu-ancestor">Menu A ▶
<ul class="sub-menu">
<li class="sidebar-submenu current-menu-item">submenu 1
</li>
<li class="sidebar-submenu current-menu-item">submenu 2
</li>
<li class="sidebar-submenu">submenu 3
</li>
</ul>
</li>
<li class="sidebar current-menu-ancestor">Menu B ▶
<ul class="sub-menu">
<li class="sidebar-submenu current-menu-item">submenu 4
</li>
<li class="sidebar-submenu">submenu 5
</li>
<li class="sidebar-submenu">submenu 6
</li>
</ul>
</li>
<li class="sidebar">Menu C ▶
<ul class="sub-menu">
<li class="sidebar-submenu">submenu 7
</li>
<li class="sidebar-submenu">submenu 8
</li>
</ul>
</li>
</ul>
These are the behavior that I want to achieve:
Submenu 1, submenu 2, and submenu 4 are on the same page but different 'menu'. If the page is selected, both menu A and menu B expand while menu C stay collapse.
If user clicks on submenu 3 which is under menu A, when the page loads, menu A expands while menu B and C collapse.
Whenever a submenu is active, class "current-menu-item" is added to
the li tag and class "current-menu-ancestor" is added to the ul tag
The issue that I have right now:
The menu is automatically expanded when any sub-menu is active, but the menu is not clickable
when I replace the jQuery with the code below, the menu is clickable
and automatically expanded when any sub-menu is active, BUT the sub
menu is not clickable (not opening the link)
jQuery(document).ready(function(e){
jQuery('.sidebar a').click(function(e){
e.preventDefault();
if (jQuery(('.sidebar').children('.sub-menu:first').is(':visible')) {
jQuery(('.sidebar').children('.sub-menu:first').hide();
} else {
jQuery(('.sidebar').children('.sub-menu:first').show();
}
});
});
Thank you in advance!
Please add jquery cookies library in your head just after jquery
<script src="path/to/Scripts/jquery_cookie.js" type="text/javascript"></script>
check this for more info stack-cookie-is-not-function
Related
Please help me to resolve this problem.
Below is my navigation bar. I used Bootstrap 3 for navigation bar.
How to add active class to current list anchor tag and also add active class to parent list anchor tag in drop down menu.
Below is my html, css, and js file.
please guide me to resolve my problem.
//dropdown menu
$('.nav_bar_custom .drop_menu1').hover(function() {
$(this).children('ul').stop(true, false, true).slideToggle(300);
});
var path = window.location.pathname.split("/").pop();
if ( path == '' ) {
path = 'index.php';
}
var target = $('nav .nav_bar_custom li a[href="'+path+'"]');
target.addClass('active_menu');
.navigation{
background: #304269;
}
.nav li a{ color: #fff;}
nav li{
display: inline-block;
float: left;
}
.nav li .drop_menu2 li{
display: block;
float: none;
}
nav ul li a.active_menu {
color: #0BADEE;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="navigation clearfix" id="navigation">
<nav>
<ul class="nav navbar-nav navbar-right nav_bar_custom">
<li>
Home
</li>
<li class="drop_menu1">
Training
<ul class="drop_menu2" id="drop_menuT" style="display: none;">
<li>
Basic
</li>
<li>
Intermediate
</li>
<li>
Advance
</li>
</ul>
</li>
<li>
Blog
</li>
<li>
Contact
</li>
</ul>
</nav>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Please use below script:
<script>
var path = 'basic'; //Dynamic value using PHP
var target = $("a[href$='"+path+"']");
target.addClass('active_menu');
target.parent().parent().parent().find('a:first').addClass('active_menu');
</script>
I have created the fiddle for the menu-header section for my webpage. I have made it by seeing this image. Once I click PROGRAMS and WORLD OF NORTHMAN, it should dropdown and show elements but it should only start the dropdown from the border of that header and that is I am not able to make it work.
Below is my HTML code:
<div class="topnav">
<img src="https://s4.postimg.org/ojd13poal/northman_wordmark_CMYK.png">
<nav>
<ul>
<li class="dropdown">
<b>PROGRAMS</b> <i class="fa fa-angle-down"></i>
<ul class="dropdown-content">
<li><i>INDIVIDUAL</i>
</li>
<li><i>CORPORATE</i>
</li>
</ul>
</li>
<li class="dropdown">
<b>WORLD OF NORTHMAN</b> <i class="fa fa-angle-down"></i>
<ul class="dropdown-content">
<li><i>BE EXTRODINARY</i>
</li>
<li><i>RISK & REWARD</i>
</li>
<li><i>BLOG</i>
</li>
<li><i>OUR STORY</i>
</li>
</ul>
</li>
</ul>
</nav>
</div>
How can I make sure that dropdown starts from the border of that menu instead coming directly from each of those text?
Try adding margin-top: 14px to the .topnav ul > li > ul selector:
.topnav ul > li > ul {
display: none;
margin-top: 14px;
width: 200px;
padding: 0;
position: absolute;
background-color: #f76c38;
}
https://jsfiddle.net/2nv4dd2w/15/
As a plus, if you want to close other opened menus: https://jsfiddle.net/2nv4dd2w/16/
Just add this
.dropdown-content{ margin-top:14px; }
You need to add the padding to .topnav a rather than .topnav ul > li. https://jsfiddle.net/2nv4dd2w/14/. This is because the ul html tag sits below the a html tag. If you want to keep the background-color the same size, use margin for the a tag, instead of padding, but I think it looks better with padding in my opinion :)
EDIT: Updated fiddle with inline-block image and navigation. https://jsfiddle.net/2nv4dd2w/19/. This should get you close to what you want. The rest is up to you. Happy Coding.
Here is some code and a question: how to enable toggle effect after clicking again on menu link button with saving existing functionality? So I need to hide content on second click (secondary click on link one hides content 1, etc.) All other staff is working perfect, but I have something broken in my jQuery. Also, maybe I have too many non-useful lines of code here. Please correct me if you can.
// Dropdown menu functionality
var anchor = $('.main_nav li a');
var menu = $('.menu');
anchor.click(function () {
if ($(this.getAttribute('href')).hasClass('is-visible')) {
this.parent.siblings().removeClass('is-visible');
menu.not(this).removeClass('is-visible').addClass('is-hidden');
} else {
$(this).addClass('active');
anchor.not(this).removeClass('active');
$(this.getAttribute('href')).removeClass('is-hidden').addClass('is-visible');
}
return false;
});
$(document).mouseup(function (e) {
// if the target of the click isn't the menu nor a decendant of the menu
if (!menu.is(e.target) && menu.has(e.target).length === 0) {
anchor.removeClass('active');
menu.removeClass('is-visible').addClass('is-hidden');
}
});
// hide menu when clicking on links
$('.menu a').click(function () {
anchor.removeClass('active');
menu.removeClass('is-visible').addClass('is-hidden');
});
.is-hidden {
display: none;
}
.is-visible {
display: block;
}
.active {
background: green;
}
.main_nav {
padding: 0;
}
.main_nav li {
display: inline-block;
position: relative;
width: 180px;
background: grey;
text-align: center;
}
.main_nav li a {
display: block;
padding: 30px 0 1px;
cursor: pointer;
text-decoration: none;
}
.menu {
background: grey;
width: 1000px;
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Main navigation -->
<ul class="main_nav">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
</ul>
<!-- Div's -->
<div class="menu is-hidden" id="link_1">
Content 1
</div>
<div class="menu is-hidden" id="link_2">
Content 2
</div>
<div class="menu is-hidden" id="link_3">
Content 3
</div>
<div class="menu is-hidden" id="link_4">
Content 4
</div>
<div class="menu is-hidden" id="link_5">
Content 5
</div>
<div class="menu is-hidden" id="link_6">
Content 6
</div>
Here is a pen containing the code for this example.
What you really want is, just hide other divs except the selected one, when you click on the respective link and again hide it with second click.
Well It doesn't need that kind of messy javascript code
$(function(){
$('.clicker').click(function(e){
$('.menu').hide();
$('#link_'+$(this).attr('target')).toggle();
});
});
.menu{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Main navigation -->
<ul class="main_nav">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
</ul>
<!-- Div's -->
<div class="menu" id="link_1">
Content 1
</div>
<div class="menu" id="link_2">
Content 2
</div>
<div class="menu" id="link_3">
Content 3
</div>
<div class="menu" id="link_4">
Content 4
</div>
<div class="menu" id="link_5">
Content 5
</div>
<div class="menu" id="link_6">
Content 6
</div>
.
I think this must be a complete solution for your problem.
It seems that your onClick function on anchors are not working exactly as you had in mind. Here's what I'm going to do:
First, let's get rid of other functions, mouseup and menu click. You can elaborate on those matters later.
For the problem at hand, your anchor click function, just toggle the divs. You can select which div to show/hide by using the hrefs.
Just remove the dash from the href and sent it to jQuery selector. Then you can toggle it. I seperated the code into multiple lines for the sake of understanding.
Hope this helps.
anchor.click(function() {
var href = $(this).attr("href").replace('#', '');
var div = $('#' + href);
$('div.menu').not(div).hide();
$(div).toggle();
});
Here's a pen
The solution finds me. Only JS below:
// Dropdown menu functionality
var anchor = $('.main_nav li a');
var menu = $('.menu');
anchor.click(function () {
if ($(this.getAttribute('href')).hasClass('is-visible')) {
$(this).parent().siblings().removeClass('is-visible');
menu.not(this).removeClass('is-visible').addClass('is-hidden');
} else {
$(this).addClass('active');
menu.removeClass('is-visible').addClass('is-hidden');
anchor.not(this).removeClass('active');
$(this.getAttribute('href')).removeClass('is-hidden').addClass('is-visible');
}
return false;
});
// close menu when clicking on links or button inside of it
$('.menu a, .menu button').click(function () {
anchor.removeClass('active');
menu.removeClass('is-visible').addClass('is-hidden');
});
// close menu when clicking inside of it
$('body').click(function(e) {
var el = e.target || e.srcElement;
// if the target of the click isn't the other menu nor navigation link
if (!$(el).closest('.menu').length && !$(el).closest('.main_nav li a').length) {
anchor.removeClass('active');
menu.removeClass('is-visible').addClass('is-hidden');
}
});
This is a multilevel menu. When i click the link "About" it opens the submenu which contains 3 links Johnny, Julie & Jamie.
When i click "About" again, it closes the menu. Clicking the submenu also closes the menu, and that i want to avoid.
How do i avoid closing the opened submenu, if i click the submenu (Johnny, Julie & Jamie) ?
$('li.parent').click(function() {
$(this).find('.sub-nav').toggleClass('visible');
});
#nav ul.sub-nav {
display: none;
}
#nav ul.visible {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="nav">
<li class="parent">About
<ul class="sub-nav">
<li>Johnny
</li>
<li>Julie
</li>
<li>Jamie
</li>
</ul>
</li>
<li class="parent">AnotherLink
<ul class="sub-nav">
<li>Martin
</li>
<li>Rasmus
</li>
<li>Morten
</li>
</ul>
</li>
</ul>
Alternative to stopPropagation approach for child elements would be adding a small check if the clicked element is the current one (and not it's descendants):
$('li.parent').click(function(e) {
if (this === e.target)
$(this).find('.sub-nav').toggleClass('visible');
});
$('li.parent').click(function(e) {
if (this === e.target)
$(this).find('.sub-nav').toggleClass('visible');
});
#nav ul.sub-nav {
display: none;
}
#nav ul.visible {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="nav">
<li class="parent">About
<ul class="sub-nav">
<li>Johnny
</li>
<li>Julie
</li>
<li>Jamie
</li>
</ul>
</li>
<li class="parent">AnotherLink
<ul class="sub-nav">
<li>Martin
</li>
<li>Rasmus
</li>
<li>Morten
</li>
</ul>
</li>
</ul>
You need to stopPropagation of event on child anchor elements:
$("li.parent a").click(function(e) {
e.stopPropagation();
});
You need to prevent the click on the .sub-nav element to be transmitted to your event handler: https://api.jquery.com/event.stoppropagation/
I have this sample:
link
CODE HTML:
<div class="menu">
<ul>
<li>Link1
<li>Link2
<ul>
<li>Home Link 1 Link 1</li>
<li>Home Link 1 Link 2</li>
<li>Home Link 1 Link 3</li>
</ul>
</li>
</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
<li>Link5</li>
</ul>
</div>
CODE CSS:
ul{
list-style-type:none;
}
.menu ul ul {
display: none;
}
.menu ul li:hover > ul {
display: block;
}
.active{
border-left:2px solid red;
}
CODE JS:
$('.menu li ').click(function(){
$(this).addClass('active').siblings().removeClass('active');
});
My problem is following
If a user click for example on the element 4 and page reload,element 4 not have border-left
In the above example this works because everything is dinamic..dar imagine what would happen when opening a new HTML page...then the menu item that was clicked not have border-left.
How can I solve this problem?
Thanks in advance!
You cant show a menu bar or infact anything if the whole page is getting reloaded. But you can use AJAX calls for it. It will reload or update only a part of the page so that the menu remains as it is.