I want to create an accordion menu with jQuery which remembers the active page. Now i've got the following menu:
<nav id="secondary">
<ul id="nav">
<li class="tournament">
<a onclick="function">Belgie</a>
<ul class="sub" style="display: none;">
<li>
<li class="first">tournament1</li>
<li class="last">test</li>
</li>
</ul>
</li>
<li class="tournament">
<a onclick="function">Nederland</a>
<ul class="sub" style="display: none;">
<li>
<li class="first">Nedtournament1</li>
<li class="has_children current">
Nedtournament2
<ul class="dropdown">
<li class="first">subtournament2-1</li>
<li class="last current">subtournament2-2</li>
</ul>
</li>
<li>Nedtournament3</li>
<li class="last">Nedtournament3</li>
</li>
</ul>
</nav>
Im using the following jQuery, it sets a cookie to determine on which page we are and which menu should be expanded. This works, but not for the children pages.
// creatie cookie
$('#nav > li > a').click(function(){
var navIndex = $('#nav > li > a').index(this);
$.cookie("nav-item", navIndex);
$('#nav li ul').slideUp();
if ($(this).next().is(":hidden")){
$(this).next().slideUp();
} else {
$(this).next().slideToggle();
}
$('#nav li a').removeClass('active');
$(this).addClass('active');
});
// use cookie value
var checkCookie = $.cookie("nav-item");
if (checkCookie != "") {
$('#nav > li > a:eq('+checkCookie+')').next().show();
}
// complete jquery
$(document).ready(function () {
var checkCookie = $.cookie("nav-item");
if (checkCookie != "") {
$('#nav > li > a:eq('+checkCookie+')').next().show();
}
$('#nav > li > a').click(function(){
var navIndex = $('#nav > li > a').index(this);
$.cookie("nav-item", navIndex);
$('#nav li ul').slideUp();
if ($(this).next().is(":visible")){
$(this).next().slideUp();
} else {
$(this).next().slideToggle();
}
$('#nav li a').removeClass('active');
$(this).addClass('active');
});
});
does anyone know how I can add the cild pages to they expand when I click them? And they keep expanded when i reload the page.
Related
I want to change color of menu item based on selection, for eg. In below code
there is a on class if any menu item is selected i have to append on class to
the li of menu.
$('ul.nav li a').click(function(e){
e.preventDefault();
$('.nav ul li').each(function () {
$(this).parents('.nav').find('.on').removeClass('on').end().end().addClass('on');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
<li class="on">
<a href="course_roadmap.php">
Opt1
</a>
</li>
<li>
<a href="course_roadmap.php">
Opt2
</a>
</li>
</ul>
Try this:
$('ul.nav li').click(function(e){
$(this).addClass('on').siblings().removeClass('on');
var anchortext = $(this).find('a').text();
e.preventDefault();
});
Try this
$('ul.nav li').click(function(){
$('ul.nav li').removeClass("on");
$(this).addClass("on");
});
I have an accordian style menu which works fine on hover state but I'd like to change to to click instead...
<script type="text/javascript">
$(document).ready(function(){
$('#nav > li').hover(
function() {
if ($('> span',this).attr('class') != 'active') {
$('#nav li ul').slideUp();
$('span',this).next().slideToggle();
$('#nav li span').removeClass('active');
$('> span',this).addClass('active');
}
},
function() {
$('#nav li ul').slideUp();
$('#nav li a').removeClass('active');
});
});
</script>
But simply replacing hover with click doesn't work, any advise much appreciated I'm a designer so my JS is pretty poor :)
Try this,
<script type="text/javascript">
$(document).ready(function () {
$('#nav > li').click(function () {
if ($('> span', this).attr('class') != 'active') {
$('#nav li ul').slideUp();
$('span', this).next().slideToggle();
$('#nav li span').removeClass('active');
$('> span', this).addClass('active');
}
}).mouseout(function (e) {
if ($(e.target).parents().find('#' + $(this).attr('id')).length) return;
$('#nav li ul').slideUp();
$('#nav li span').removeClass('active');
});
});
</script>
HTML:
<li id="t1"><span>Nav item click me 1</span>
<ul>
<li>Sub link 1</li>
<li>Sub link 2</li>
<li>Sub link 3</li>
<li>Sub link 4</li>
</ul>
</li>
<li id="t2"><span>Nav item click me 2</span>
<ul>
<li>Sub link 1</li>
<li>Sub link 2</li>
<li>Sub link 3</li>
<li>Sub link 4</li>
</ul>
</li>
.hover(fucntion() {}, function()); // .hover() accept two function
.click(function() {}); // only accept one
try
$('selector').on('click', function() {
if($(this).hasClass('active')) {
// do something if this has class active
}
else {
// do something if not.
}
} );
I would like to keep my menu open when I am on a page in the sub navigation. This way it will allow the user to tell much more easily where they are on the site. How can I accomplish this with the code I have? Thanks for any feedback.
jQuery:
$('#cssmenu > ul > li > a').click(function() {
var checkElement = $(this).next();
$('#cssmenu li').removeClass('active');
$(this).closest('li').addClass('active');
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
$(this).closest('li').removeClass('active');
checkElement.slideUp('normal', function() {
menuHeight();
});
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#cssmenu ul ul:visible').slideUp('normal', function() {
menuHeight();
});
checkElement.slideDown('normal', function() {
menuHeight();
});
}
if($(this).closest('li').find('ul').children().length == 0) {
return true;
} else {
return false;
}
});
HTML (sample):
<div id='cssmenu'>
<ul>
<li id="home"><a href='/index'><span>Home</span></a></li>
<li id="landscaping-overview"><a href='/landscaping/landscaping-overview'><span>Landscaping</span></a>
<ul>
<li id="landscaping-planters"><a href='/landscaping/planters'><span>Planters</span></a></li>
<li id="landscaping-walls"><a href='/landscaping/walls'><span>Walls</span></a></li>
<li id="landscaping-stone-work"><a href='/landscaping/stone-work'><span>Stone Work</span></a></li>
<li id="landscaping-walkways"><a href='/landscaping/walkways'><span>Walkways</span></a></li>
<li id="landscaping-stairways"><a href='/landscaping/stairways'><span>Stairways</span></a></li>
<li id="landscaping-steps"><a href='/landscaping/steps'><span>Steps</span></a></li>
<li id="landscaping-water-falls"><a href='/landscaping/water-falls'><span>Water Falls</span></a></li>
<li id="landscaping-ponds"><a href='/landscaping/ponds'><span>Ponds</span></a></li>
<li id="landscaping-creek-beds"><a href='/landscaping/creek-beds'><span>Creek Beds</span></a></li>
<li id="landscaping-pondless-water-features"><a href='/landscaping/pondless-water-features'><span>Pondless Water Features</span></a></li>
<li id="landscaping-enhancement-lighting"><a href='/landscaping/enhancement-lighting'><span>Enhancement Lighting</span></a></li>
<li id="landscaping-patios"><a href='/landscaping/patios'><span>Patios</span></a></li>
<li id="landscaping-fireplaces"><a href='/landscaping/fireplaces'><span>Fireplaces</span></a></li>
</ul>
</li>
</div>
i have this html menu:
<ul id='main'>
<li class='active current' id='lighty'>
<a href='/'>Lighty</a>
<ul>
<li class='sub'>
<a href='/'>Hem</a>
</li>
</ul>
</li>
<li id='community'>
<a href='/community'>Community</a>
</li>
</ul>
And this jquery:
$("#menu ul > li").mouseenter(function(){
id = $(this).attr("id");
$("#menu #main li").removeClass("active");
$(this).addClass("active");
}).mouseleave(function(){
id = $(this).attr("id");
menu.timers[id] = setTimeout(function(){$("#menu #main li#"+id).removeClass("active");}, 2000);
});
What i am trying to acomplish is that when i hover one of the li's in the main ul the child ul of that li should be displayed. and when i move the mouse out of the li or the child ul the menu should be visible for 2 seconds.
It works through the main li button but if on the child ul and move out it just disapears, it doesnt wait for two seconds.
The waiting two seconds is so you can go in to the menu if you accidentaly move the mouse out of it.
Can anybody help me to fix this error? Maybe you have a better solution?
Here is also a screenshot on how the menu looks if it helps:
screen shot under or click here
is this what you mean?
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
<!--
$(function() {
$("ul#main > li").mouseenter( function(){
$("#main li").removeClass("active");
$(this).addClass("active");
}).mouseleave(function(){
setTimeout( function()
{
$("#main li").removeClass("active");
}, 2000);
});
});
//-->
</script>
<style type="text/css">
#main li ul {
display: none;
}
#main li.active ul {
display: inline;
}
</style>
<ul id="main">
<li id="lighty">
Lighty
<ul>
<li class="sub">
Hem
</li>
</ul>
</li>
<li id="community">
Community
<ul>
<li class="sub">
more
more1
more2
more4
</li>
</ul>
</li>
</ul>
I'm building a simple dropdown where I'd like to add a class to parent if UL exists:
HTML:
<ul id="menu">
<li>Parent 1</li>
<li>Parent 2
<ul>
<li>Sub 2.1</li>
<li>Sub 2.2</li>
</ul>
</li>
</ul>
So I'd like to:
hide all nested (ul#menu > li > ul) ul's initially
show/hide nested ul on hover
addClass "dropdown" to parents that have nested ul's
This isn't quite working, not sure why:
$(function () {
$("ul#menu li").hover(function () {
$(this).addClass("hover");
$('ul:first', this).css('visibility', 'visible');
},
function () {
$(this).removeClass("hover");
$('ul:first', this).css('visibility', 'hidden');
});
$("ul#menu li ul li:has(ul)").find("a:first").addClass("dropdown");
});
Many thanks for your help!
var ul = $('#menu');
if (ul.length) {
ul.children('li').hover(function() {
$(this).children('ul').show();
}, function() {
$(this).children('ul').hide();
}).children('ul').hide().parent().addClass('dropdown');
}
Demo: http://jsbin.com/ofayu
BTW: you are closing the <li> tags incorrectly in your markup.
You wrote:
$("ul#menu li ul li:has(ul)")
Given your HTML structure, shouldn't this be:
$("ul#menu li:has(ul)")
This should do the trick (untested):
$('ul#menu > li > ul').each(function()
{
var list = $(this);
list.hide();
list.parent().hover(list.hide, list.show);
list.parent().parent().addClass('dropdown');
});