Multiple Nav update Jquery - javascript

Created a header and footer nav. The header nav contains 1 UL and the footer nav contains 5 UL. I want the li:first child of each UL in the footer nav to match up with the header nav. The footer nav has the same main li as the header nav but contain sub li within them Can someone please help me out?
I created a jsFiddle of my issue:
http://jsfiddle.net/WkZuv/41/
$(".Nav > li").live({
mouseover:function(){
$(this).addClass("menuHover");
},
mouseout:function(){
$(this).removeClass("menuHover");
},
click:function(){
$(".Nav > li").removeClass("menuClicked");
$(this).addClass("menuClicked");
}
});
$(".footer > li:first-child").live({
mouseover:function(){
$(this).addClass("menuHover");
},
mouseout:function(){
$(this).removeClass("menuHover");
},
click:function(){
$(".Nav > li").removeClass("menuClicked");
$(".Nav > li").eq($(this).index()).addClass("menuClicked");
$(".footer > li").removeClass("menuClicked");
$(this).addClass("menuClicked");
}
});
.menuHover{
background-color:#666;
color:#fff;
}
.menuClicked{
background-color:yellow;
color:#666;
}
.footerTitle{
font-weight: bold;
color:black;
}
<h1>Header NAV</h1>
<ul class="Nav">
<li class ="menuClicked"> List 1 </li>
<li>List 2 </li>
<li> List 3 </li>
<li> List 4 </li>
<li> List 5</li>
</ul>
<hr />
<h1>FOOTER NAV</h1>
<ul class="footer">
<li class ="footerTitle"> List 1 </li>
<li>Sub List 2 </li>
<li>Sub List 3 </li>
<li> Sub List 4 </li>
<li>Sub List 5</li>
</ul>
<ul class="footer">
<li class ="footerTitle"> List 2 </li>
<li>Sub List 2 </li>
<li>Sub List 3 </li>
<li> Sub List 4 </li>
<li>Sub List 5</li>
</ul>
<ul class="footer">
<li class ="footerTitle"> List 3 </li>
<li>Sub List 2 </li>
<li>Sub List 3 </li>
<li> Sub List 4 </li>
<li>Sub List 5</li>
</ul>
<ul class="footer">
<li class ="footerTitle"> List 4 </li>
<li>Sub List 2 </li>
<li>Sub List 3 </li>
<li> Sub List 4 </li>
<li>Sub List 5</li>
</ul>
<ul class="footer">
<li class ="footerTitle"> List 5 </li>
<li>Sub List 2 </li>
<li>Sub List 3 </li>
<li> Sub List 4 </li>
<li>Sub List 5</li>
</ul>

I think I understand what you are looking for. Try something like this:
$(".Nav > li").live({
mouseover:function(){
$(this).addClass("menuHover");
$(".footer > li:first-child").eq($(this).index()).addClass("menuHover");
},
mouseout:function(){
$(this).removeClass("menuHover");
$(".footer > li:first-child").eq($(this).index()).removeClass("menuHover");
},
click:function(){
$(".Nav > li").removeClass("menuClicked");
$(this).addClass("menuClicked");
$(".footer > li:first-child").removeClass("menuClicked").eq($(this).index()).addClass("menuClicked");
}
});
$(".footer > li:first-child").live({
mouseover:function(){
$(this).addClass("menuHover");
$(".Nav>li").eq($(".footer").index($(this).parent("ul"))).addClass("menuHover");
},
mouseout:function(){
$(this).removeClass("menuHover");
$(".Nav>li").eq($(".footer").index($(this).parent("ul"))).removeClass("menuHover");
},
click:function(){
$(".Nav > li").removeClass("menuClicked");
$(".footer > li:first-child").removeClass("menuClicked");
$(this).addClass("menuClicked");
$(".Nav>li").eq($(".footer").index($(this).parent("ul"))).addClass("menuClicked");
}
});
DEMO:
http://jsfiddle.net/dirtyd77/WkZuv/65/

There is an issue with the following statement.
$(".Nav > li").eq($(this).index()).addClass("menuClicked");
$(this).index() is always returning zero. Try adjusting your css selector to match the set of ul.footer elements to get the correct index. You will have to make some other modifications though.

Related

Display parent UL and for the root parent both UL and LI node

<ul id="ul_Book1">
<li id="li_Book1"> Book1 </li>
<ul id="ul_Chap1">
<li id= "li_Chap1"> Chapter 1</li>
<ul>
<li id="li_Sect11" > Section 1.1 </li>
<li id="li_Sect12" > Section 1.2 </li>
<li id="li_Sect13" > Section 1.3 </li>
</ul>
</ul>
<ul id="ul_Chap2">
<LI id= "li_Chap2"> Chapter 2</LI>
<ul>
<li id="li_Sect21" > Section 2.1 </li>
<li id="li_Sect22" > Section 2.2 </li>
<li id="li_Sect23" > Section 2.3 </li>
</ul>
</ul>
<ul id="ul_Chap3">
<li id= "li_Chap3"> Chapter 3</li>
<ul>
<li id="li_Sect31" > Section 3.1 </li>
<li id="li_Sect32" > Section 3.2 </li>
<li id="li_Sect33" > Section 3.3 </li>
</ul>
</ul>
function menuDisplayPath(li_id) {
var idVal = li_id;
var $obj = $('li').filter(function () { return $(this).attr('id') == idVal; }).parents();
$($obj.get().reverse()).each(function () {
if ($(this).is("li")) {
$(this).find('li').each(function () {
$(this).show();
});
$(this).find('Ul').each(function () {
$(this).show();
});
}
});
}
When a LI node is selected , say "Section 3.2" , I would like to expand/show only "Book1-- Chapter3 -- Section 3.2" and rest of the UL nodes under Book1 should not expand.
But my function menuDisplayPath(li_id) is expanding all the UL under Book1 and also display all LI's. What am I missing in the function.
Assuming all is expanded on load.
First, I corrected many missing double-quotes and extra spaces...
So here is your HTML:
<input type="reset" id="reset" value="Expand all">
<ul id="ul_Book1">
<li id="li_Book1"> Book1 </li>
<ul id="ul_Chap1">
<li id="li_Chap1"> Chapter 1</li>
<ul>
<li id="li_Sect11"> Section 1.1 </li>
<li id="li_Sect12"> Section 1.2 </li>
<li id="li_Sect13"> Section 1.3 </li>
</ul>
</ul>
<ul id="ul_Chap2">
<li id="li_Chap2"> Chapter 2</li>
<ul>
<li id="li_Sect21"> Section 2.1 </li>
<li id="li_Sect22"> Section 2.2 </li>
<li id="li_Sect23"> Section 2.3 </li>
</ul>
</ul>
<ul id="ul_Chap3">
<li id="li_Chap3"> Chapter 3</li>
<ul>
<li id="li_Sect31"> Section 3.1 </li>
<li id="li_Sect32"> Section 3.2 </li>
<li id="li_Sect33"> Section 3.3 </li>
</ul>
</ul>
</ul>
And here is the way to hide the other chapters on click of a li with a section id:
$(document).ready(function(){
$("#ul_Book1").on("click","ul ul li", function(){
$(this).parent().parent().siblings("ul").each(function(){
$(this).hide(); // Hides all other chapter
});
});
$("#reset").on("click",function(){
$("#ul_Book1").children("ul").each(function(){
$(this).show();
});
});
});
Fiddle
Now... Can't tell you how to display the <section> since I didn't see the relevant HTML.
The following worked for me:
function open($li) {
$('.content').hide();
$li.children().show();
if ($li.hasClass('section')) $li.parent().parent().children().show();
}
// test driver
$(document).ready(function() {
$('li').click(function (e) { open($(this)); e.stopPropagation(); });
});
.content {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="book">
<li class="chapter">Chapter One
<ul class="chapter content">
<li class="section">Section One<br><i class="content">1.1 contents</i></li>
<li class="section">Section Two<br><i class="content">1.2 contents</i></li>
</ul>
</li>
<li class="chapter">Chapter Two
<ul class="chapter content">
<li class="section">Section One<br><i class="content">2.1 contents</i></li>
<li class="section">Section Two<br><i class="content">2.2 contents</i></li>
</ul>
</li>
</ul>
Basically you put the section element you want to be open inside the open($li) function.
You should also only put <li> elements inside <ul> elements.
I hope this is what you wanted.

removing html tags but keep the inner html

I have a nav menu which have a mega menu.It has several markup to make it a mega menu.But i want to remove some of the markups when in small viewport.
So my markups are
<ul class="megamenu-wrapper">
<li>
<ul>
<li>Home</li>
<li>Abort</li>
<li>Contact</li>
</ul>
</li>
<li>
<ul>
<li>gang</li>
<li>menu</li>
<li>food</li>
</ul>
</li>
</ul>
what i want
<ul class="megamenu-wrapper">
<li>Home</li>
<li>Abort</li>
<li>Contact</li>
<li>gang</li>
<li>menu</li>
<li>food</li>
</ul>
i have two mega-menu-wrapper
What i have tried
var megaContents = $('.megamenu-wrapper li ul').contents();
$('.megamenu-wrapper li ul').replaceWith( megaContents );
It makes a same list in two each mega menu and in each megamenu there is about 5 times repetation of each elements.
Anyone please help.
Use
//Fimd child ul li and append it to main ul
$('.megamenu-wrapper > li > ul > li').appendTo('.megamenu-wrapper');
//Remove li having ul
$('.megamenu-wrapper > li:has(ul)').remove();;
$(document).ready(function() {
$('.megamenu-wrapper > li > ul > li').appendTo('.megamenu-wrapper'); +
$('.megamenu-wrapper > li:has(ul)').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="megamenu-wrapper">
<li>
<ul>
<li>Home
</li>
<li>Abort
</li>
<li>Contact
</li>
</ul>
</li>
<li>
<ul>
<li>gang
</li>
<li>menu
</li>
<li>food
</li>
</ul>
</li>
</ul>
use .each() if you have multiple menus
$('.megamenu-wrapper') each(function () {
$(this).find('> li > ul > li').appendTo(this);
$(this).find(' > li:has(ul)').remove();
});
DEMO
With your current markup, you can use append() which will take the children li with anchors and append them as direct children of .megamenu-wrapper
Then, use remove() to remove the former parent li elements which now contain empty ul children
$('.megamenu-wrapper').append($('li:has(a)'));
$('.megamenu-wrapper').children('li:has(ul)').remove();
Update
For multiple menus, you can use the snippet above, but wrap it in an each() call
$('.megamenu-wrapper').each(function(){
$(this).append($(this).find('li:has(a)'));
$(this).children('li:has(ul)').remove();
});
$('.megamenu-wrapper').each(function(){
$(this).append($(this).find('li:has(a)'));
$(this).children('li:has(ul)').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="megamenu-wrapper">
<li>
<ul>
<li>Home</li>
<li>Abort</li>
<li>Contact</li>
</ul>
</li>
<li>
<ul>
<li>gang</li>
<li>menu</li>
<li>food</li>
</ul>
</li>
</ul>
<ul class="megamenu-wrapper">
<li>
<ul>
<li>Home</li>
<li>Abort</li>
<li>Contact</li>
</ul>
</li>
<li>
<ul>
<li>gang</li>
<li>menu</li>
<li>food</li>
</ul>
</li>
</ul>

nested list css problems

I am having trouble nesting a list in the following. The nested list isn't appearing on the page. I assume its something to do with my JS hiding it. Can anyone see what the problem may be - it's driving me mad!
<ul class="question">
<li>QUESTION goes here
<ul>
<li>ANSWER goes here>
</li>
</ul>
</li>
<li>QUESTION 2 goes here
<ul>
<li><a href="#">ANSWER 2 goes here>
<li>
<ul>
<li>nested list item 1</li>
<li>nested list item 2</li>
<li>nested list item 3</li>
</ul>
</li></a>
</li>
</ul>
</li>
</ul>
My JS:
<script>
$(document).ready(function () {
$('#question > li > a').click(function(){
if (!$(this).hasClass('active')){
$('#question li ul').slideUp();
$(this).next().slideToggle();
$('#question li a').removeClass('active');
$(this).addClass('active');
}
else{
$('#question li ul').slideUp();
$('#question li a').removeClass('active');
}
});
});
</script>
Here:
http://jsfiddle.net/eAJjs/
$('#question > li > a').click(function () {
if (!$(this).hasClass('active')) {
$('#question>li>ul').slideUp();
$(this).next().slideToggle();
$('#question>li>a').removeClass('active');
$(this).addClass('active');
} else {
$('#question>li>ul').slideUp();
$('#question>li>a').removeClass('active');
}
});
<ul id="question">
<li>QUESTION goes here
<ul>
<li>ANSWER goes here>
</li>
</ul>
</li>
<li>QUESTION 2 goes here
<ul>
<li><a href="#">ANSWER 2 goes here>
<li>
<ul>
<li>nested list item 1</li>
<li>nested list item 2</li>
<li>nested list item 3</li>
</ul>
</li></a>
</li>
</ul>
</li>
</ul>

Jquery code for multi-level dropdown navigation menu

All,
I am new to JQuery and trying to write JQuery code to create a multi level dropdown menu. The HTML looks like below:
<ul id="menu">
<li>Link 1
<ul class="submenu">
<li>Sub Link 1.1
<ul class="submenu">
<li> Sub Link 1.1.1</li>
<li> Sub Link 1.1.2</li>
</ul>
</li>
<li>Sub Link 1.2</li>
<li>Sub Link 1.3</li>
</ul>
</li>
<li>Link 2
<ul class="submenu">
<li>Sub Link 2.1
<ul class="submenu">
<li> Sub Link 2.1.1</li>
<li> Sub Link 2.1.2</li>
</ul>
</li>
<li>Sub Link 2.2</li>
</ul>
</li>
</ul>
The JQuery code I got so far is as under, but it's not opening and closing the submenus.How can I make it work?
$(document).ready(function () {
$('#ul.menu > li').hover(function () { $('ul:first', this).show(); },
function () { $('ul:first', this).hide(); }
);
$('#ul.menu li li').hover(function () {
$('ul:first', this).each(function () {
var p = $(this).parent();
$(this).css('top', p.position().top)
.css('left', p.position().left + p.width())
.show();
});},
function () { $('ul:first', this).hide(); }
);
});
Chick this out: http://jsfiddle.net/g5xSX/ , maybe it is exactly what you want
I created this fiddle, it's just a start but some of it it's working http://jsfiddle.net/mZzqu/2/
I simplified your markup (attach click handler to 'li', it's better)
<ul id="menu">
<li>Link 1
<ul class="submenu">
<li>Sub Link 1.1
<ul class="submenu">
<li id='1'> Sub Link 1.1.1</li>
<li>Sub Link 1.1.2</li>
</ul>
</li>
<li>Sub Link 1.2</li>
<li>Sub Link 1.3</li>
</ul>
</li>
<li>Link 2
<ul class="submenu">
<li>Sub Link 2.1
<ul class="submenu">
<li> Sub Link 2.1.1</li>
<li> Sub Link 2.1.2</li>
</ul>
</li>
<li>Sub Link 2.2</li>
</ul>
</li>
</ul>
jquery code
$.fn.dropdown = function (options) {
var settings = jQuery.extend({
timeout: 0.2
}, options);
var closetimer = null;
var ddmenuitem = null;
$(this).children('li').each(function(){
$(this).find('ul').hide();
});
$(this).find('li').hover(dropdown_open, dropdown_close);
document.onclick = dropdown_close;
function dropdown_open(event)
{
dropdown_canceltimer();
//dropdown_close();
ddmenuitem = $(event.target).children('ul').css('display', 'block');
}
function dropdown_close(event) {
$(event.target).parent('ul:not(#menu)').hide();
}
function dropdown_timer() {
closetimer = window.setTimeout(dropdown_close, settings.timeout * 1000);
}
function dropdown_canceltimer() {
if (closetimer) {
window.clearTimeout(closetimer);
closetimer = null;
}
}
return this;
}

jQuery and selecting the next list items objects

I have a nav built with a list and sub nav as lists inside a parent list. The sub nav resides in the next list item to it's corresponding main nav link:
This sits in a div with an id of 'nav'
<ul>
<li>Nav main 1</li>
<li>
<ul>
<li>sub 1</li>
<li>sub 2</li>
<li>sub 3</li>
<li>sub 4</li>
</ul>
</li>
<li>Nav main 2</li>
<li>
<ul>
<li>sub 1</li>
<li>sub 2</li>
<li>sub 3</li>
<li>sub 4</li>
</ul>
</li>
</ul>
Currently I have the following jquery:
$(document).ready(function() {
$("#nav ul li a[href^='#']").each(function(){
if ($(this).next().is(':visible')) {
$(this).next().hide();
} else {
$("#nav ul li a[href^='#']").each(function(){
$(this).next().hide();
});
$(this).next().show();
}
});
I thought this would work to make all the sub menu's hide and then show the one that had been clicked on. For some reason nothing happens. I have checked the console (firebug) and there is no error shown.
Getting frustrated with it now! :-/
EDIT: Here is the answer:
$(document).ready(function() {
$("#nav ul li a[href^='#']").each(function(){
$(this).parent().next().hide();
$(this).click(function() {
if ($(this).parent().next().is(':visible')) {
$(this).parent().next().hide();
} else {
$("#nav ul li a[href^='#']").each(function(){
$(this).parent().next().hide();
});
//then reshow and label the clicked nav
$(this).parent().next().show();
}
});
});
});
HTML:
<div id="nav">
<ul>
<li>
Nav main 1
<ul>
<li>sub 1</li>
<li>sub 2</li>
<li>sub 3</li>
<li>sub 4</li>
</ul>
</li>
<li>
Nav main 2
<ul>
<li>sub 1</li>
<li>sub 2</li>
<li>sub 3</li>
<li>sub 4</li>
</ul>
</li>
</ul>
</div>
JavaScript:
var s = $('#nav ul ul').hide();
$('#nav a').click(function() {
var u = $(this).next();
u.is(':visible') ? u.hide() : ( s.hide(), u.show() );
return false;
});
Live demo: http://jsfiddle.net/Tq6LM/1/
Never mind... I have figured it out. Writing it out again must have helped. I needed to call the .parent()
Seems that i was trying to call the next a href, i needed to call the next list!
DEMO: http://so.devilmaycode.it/jquery-and-selecting-the-next-list-items-objects
your Javascript Code should be:
$(function() {
$('#main-nav li').click(function(e) {
e.preventDefault();
$('#main-nav li ul').slideUp(500);
$(this).find('ul:not(:visible)').slideDown(500);
});
});
little bit of CSS
#main-nav li ul { display:none }
your HTML should look like this:
<ul id="main-nav">
<li>Nav main 1
<ul>
<li>sub 1</li>
<li>sub 2</li>
<li>sub 3</li>
<li>sub 4</li>
</ul>
</li>
<li>Nav main 2
<ul>
<li>sub 1</li>
<li>sub 2</li>
<li>sub 3</li>
<li>sub 4</li>
</ul>
</li>
</ul>

Categories

Resources