We Keep Coding

Highlight next menu item using jquery

Hi I am trying to implement a feature in my website where when i click on a menu item the highlight should be able to flow to the next menu item.From the below example if I click on people the menu should highlight people and then also highlight the next case in the menu which is tourist.. I am using CSS for hover but what I understand from other posts is that a:active doesn't work with CSS?
This is what I have so done so far:
HTML
<section id="nav">
<li><a class="nav" href="People.html">People</a></li>
<li><a class="nav" href="Tourist.html">Tourist</a></li>
<li><a class="nav" href="Joints.html">Joints</a></li>
<li><a class="nav" href="Project.html">Project</a></li>
<li><a class="nav" href="Products.html">Products</a></li>
<li><a class="nav" href="cafes.html">cafes</a></li>
</section>
jQuery
<script>
$(function() {
$('#nav').on('click','.nav', function ( e ) {
e.preventDefault();
$(this).parents('#nav').find('.active').removeClass('active').end().end().addClass('active');
$(activeTab).show();
});
});
</script>
CSS
#nav{
width:100%;
text-align:center;
min-width:1300px;
height:80px;
position:absolute;
top:0;
left:0;
background:#fff;
list-style:none;
border-bottom: 1px solid #000;
}
#nav li{
display:inline;
}
#nav .nav{
display:inline-block;
background-color:#000;
color:#FFF;
font-family: 'Oswald', sans-serif;
letter-spacing:1px;
font-size:16pt;
line-height:18pt;
font-weight:400;
text-decoration:none;
margin-right: 3px;
margin-left: 3px;
margin-top:35px;
padding:0px 3px 2px 3px;
}
#nav .nav:hover{
background:#FFFF00;
color:#000;
}
.active{
background:#FFFF00;
color:#000;
}
Please help me with this.I am stuck up on this

This should do the trick for you (if I understand the question correctly):
$('#nav').on('click','.nav', function ( e ) {
e.preventDefault();
// remove all "active" classes:
$('.active').removeClass('active');
// find the next menu item and append "active" class:
$(this).parent().next('li').find('.nav').addClass('active');
$(activeTab).show();
});
Add !important to .active styles (you need to override parent dependent styles, as you set them like: #nav .nav):
.active{
background:#FFFF00 !important;
color:#000 !important;
}
JSFiddle demo

if you want to highlight the next item in the menu, you simply need to retrieve the index of the menu item (index of the <li> in your case), and calculate the next one:
UPDATE:
added animation to snippet
$(function () {
$('#nav').on('click', '.nav', function (e) {
e.preventDefault();
var NextMenuID = ($(this).parent().index()+1)%$(this).parent().parent().children().length;
var NextItem =$('#nav .nav').eq(NextMenuID);
$('#nav .nav').removeClass("active");
var x1=$(this).offset().left;
var y1=$(this).offset().top;
var width1=$(this).width();
var height1=$(this).height();
var x2=NextItem.offset().left;
var y2=NextItem.offset().top;
var width2=NextItem.width();
var height2=NextItem.height();
var slidingDiv=$("<div/>");
slidingDiv.css({
"width":width1,
"height":height1,
"left":x1,
"top":y1,
"display":"block",
"position":"absolute",
"background":"#FFFF00",
"padding":"0px 3px 2px 3px"
}).appendTo($("body")).animate({
"width":width2,
"height":height2,
"left":x2,
"top":y2,
},function(){
NextItem.addClass("active");
slidingDiv.remove();
});
//$(activeTab).show();
});
});
#nav {
width:100%;
text-align:center;
height:80px;
position:absolute;
top:0;
left:0;
background:#fff;
list-style:none;
border-bottom: 1px solid #000;
}
#nav li {
display:inline;
}
#nav .nav {
display:inline-block;
background-color:#000;
color:#FFF;
font-family:'Oswald', sans-serif;
letter-spacing:1px;
font-size:16pt;
line-height:18pt;
font-weight:400;
text-decoration:none;
margin-right: 3px;
margin-left: 3px;
margin-top:35px;
padding:0px 3px 2px 3px;
}
#nav .nav:hover {
background:#FFFF00;
color:#000;
}
.active {
background:#FFFF00 !important;
color:#000 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="nav">
<li><a class="nav" href="People.html">People</a>
</li>
<li><a class="nav active" href="Tourist.html">Tourist</a>
</li>
<li><a class="nav" href="Joints.html">Joints</a>
</li>
<li><a class="nav" href="Project.html">Project</a>
</li>
<li><a class="nav" href="Products.html">Products</a>
</li>
<li><a class="nav" href="cafes.html">cafes</a>
</li>
</section>
If you have any questions about the example, feel free to ask.

What technique do I use to get text into each individual tab?

I have been stuck on this for ages, here is my code so far:
<html>
<head>
<script src="http://mihaifrentiu.com/wp-content/themes/mf/js/jquery_1.7.1.min.js" type="text/javascript"></script>
<style type="text/css">
body, html, div, ul, li, a {
margin:0;
padding:0;
}
body {
font-family:arial;
font-size:12px;
color:#000000;
}
.clear {
clear:both;
}
ul {
list-style:none;
position:relative;
z-index:2;
top:1px;
display:table;
border-left:5px solid #808080;
}
ul li {
float:left;
}
ul li a {
background:#000000;
color:#000000;
display:block;
padding:6px 15px;
text-decoration:none;
border-right:100px solid #000000;
border-top:1px solid #000000;
border-right:3px solid #808080;
}
ul li a.selected {
border-bottom:1px solid #808080;
color:#000000;
background:#808080;
}
h1 {
display:block;
width:600px;
margin:0 auto;
padding:200px 0;
color:#000000;
}
#navigation {
width:602px;
margin: 0 auto;
}
#content {
width:600px;
margin:0 auto;
height:200px;
background:#ffffff;
border:1px solid #000000;
z-index:1;
text-align:center;
padding:10px 0;
}
#logo {
width:600px;
margin:0 auto;
padding:10px 0;
text-align:right;
}
</style>
</head>
<body>
<div id="navigation">
<ul>
<li><font color="white">Tab 1</li>
<li><font color="white">Tab 2</li>
<li><font color="white">Tab 3</li>
<li><font color="white">Tab 4</li>
<li><font color="white">Tab 5</li>
</ul>
<div class="clear"></div>
</div>
<div id="content">
<p id="content_changer">You have selected Tab 1</p>
<p>See the page source for full code</p>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#navigation ul a').click(function() {
$('#navigation ul a').removeClass('selected');
$(this).addClass('selected');
$('#content_changer').html('You have selected ' + $(this).html());
});
});
</script>
</body>
</html>
I can not figure out how to get one of these tabs menu thing to work, I have tried so many different methods but nothing will work.

It's not very good code, but it works for me. The only problem is that the #content text is set to font color white, so you can't see it, though it is there.
You should avoid font tags, as they are badly out of date, as well as inline JS.

I tried running your code. I found that the text is written #content_changer element, but its white colored.
Here's how you can solve it.
Add the following css rule
#content_changer{
color:#000;
}
Change the $(this).html() to $(this).text().
That much should do.

The problem is not in your JS, but in your CSS. Font color is white on the links in the navigation, which means it will be invisible on the content area. Also, using is deprecated and you need to set content-area color to black.
Here is a working jsFiddle:
http://jsfiddle.net/8ftyy/
Differences are these:
#content_changer {
color: black;
}
ul li a {
color: white;
}
and no font-color in html.

Keep parent menu item highlighted, after entering into the child menu web link

I want to implement a navigation menu on my website. I need to highlight a parent list item after click on its child menu item. This is Working, if it is a single file. I include it in all files. My problem of the below code is, when I click on a child menu item, its parent menu item is highlighted till the loading time. After loading completely, Highlighted color is disappearing. Clicking on the menu item which has no child, is also not highlighted.
Any help would be greatly received.
Thanks. My website link is www.theiab.org/IABPHP.
HTML:
<html>
<head>
<script>
$(document).ready(function () {
$('#menu-wplook-main-menu').find('li a').click(function () {
//e.preventDefault();
$('#menu-wplook-main-menu').find('li a').removeClass('active');
$(this).addClass('active');
$($(this).closest('li.menu-item').children()[0]).addClass('active');
});
});
</script>
<style>
#menu-wplook-main-menu li a.active{
color:#e53b51;
}
</style>
</head>
<body>
<p class="site-title"><img src="images/logo/iab_logo.png" alt="Indian Association for the Blind" title="Indian Association for the Blind"></p>
<nav class="navigation"id="nav">
<ul id="menu-wplook-main-menu" class="parent" >
<li class="menu-item"><div id="whoWeAre">WHO WE ARE</div>
<ul class="sub-menu"id="sub-menu1">
<li class="sub-menu-item1"id="sub-menu-item1"><div id="subMenuItem1">ABOUT FOUNDER</div></li>
<li class="sub-menu-item2"id="sub-Menu-Item2"><div id="subMenuItem2">ABOUT IAB</div></li>
<!--<li class="menu-item ">TEAM IAB</li>-->
</ul>
</li>
<li class="menu-item">WHAT WE DO
<ul class="sub-menu"id="sub-menu2">
<li class="sub-menu-item3 ">EDUCATION</li>
<li class="sub-menu-item4">CAREER & SKILL TRAINING</li>
<li class="sub-menu-item5">RESIDENTIAL SERVICES</li>
<li class="sub-menu-item6">SUPPORT SERVICES</li>
<li class="sub-menu-item7">EMPLOYMENT</li>
</ul>
</li>
<li class="menu-item">AWARDS & RECOGNITION</li>
<li class="menu-item">NEWS & EVENTS</li>
<li class="menu-item">CONTACT</li>
</ul>
</nav>
</body>
</html>
CSS:
nav {
float:right;
padding:38px 0 0;
}
nav li {
position:relative;
display:inline-block;
}
nav ul li a {
color:#a0a0a0;
font-weight:bold;
}
nav li a:hover {
color:#e53b51;
text-decoration: none;
}
nav li:hover .sub-menu{
visibility:visible;
opacity: 1;
transition: all 1s ease;
}
ul.sub-menu {
visibility:hidden;
opacity:0;
transition: visibility 1s linear 0.5s,opacity 0.5s linear;
position:absolute;
top:27px !important;enter code here
left:0px;
z-index:5000;
list-style:none;
margin:0;
padding: 0 !important;
width: auto;
min-width:150px;
box-shadow:0 0px 8px rgba(0,0,0,0.2);
background:#fff;
}
ul.sub-menu li {
width:100%;
float:left;
border-bottom: 1px solid #ccc;
margin: 0 !important;
line-height:100%;
padding: 10px 0px !important;
}
ul.sub-menu li:last-child {
border-bottom: none;
}
nav ul.sub-menu li a {
padding:0px 12px;
height: auto;
font-size:13px !important;
display: block;
}
ul.sub-menu li:hover {
border-top:none !important;
background: #f9f9f9;
}

You need to change this:
nav li a:hover {
color:#e53b51;
text-decoration: none;
}
To this:
nav li:hover a {
color:#e53b51;
text-decoration: none;
}
That way when you hover over the list-item (li), the anchor (a) will be changed. The way you had it, you needed to hover over the ANCHOR ITSELF for the hover state to be activated. Now hovering over the list-item will activate the changes.

Creating a dropdown menu

I have a menu that contains a submenu which gets displayed below the main menu when a link inside the main menu is hovered over. What I want to do is add a second submenu inside the first submenu but make it a dropdown. I am not that great at css and I was wondering if anyone can help me with this. I haved followed some tutorials online and I was not able to get the results I was looking for. Here is the html and css I have so far.
<div id="navigation">
<ul id="mymenu">
<li>Home</li>
<li>Gallery</li>
<li>What We Do</li>
<li>Contact</li>
</ul>
</div>
<div id="sublinks">
<ul id="s1">
<li>General</li>
<li>Landon News</li>
<li>Trust Us</li>
</ul>
<ul id="s2">
<li>
Security Systems
<ul id="s2sys">
<li>Arlington HA</li>
<li>Enfield HA</li>
<li>Revere HA</li>
</ul>
</li>
<li>
WLAN Systems
<ul id="s2wlan">
<li>Beverly HA</li>
<li>Holyoke HA</li>
<li>Meriden HA</li>
<li>Revere HA</li>
</ul>
</li>
</ul>
<ul id="s3">
<li>Computers</li>
<li>Strategic Planning</li>
<li>Security Systems</li>
<li>WLAN, WiFi Broadband</li>
</ul>
<ul id="s4">
<li>Email</li>
<li>Address Info</li>
</ul>
</div>
Here is the javascript for the main menu which will display the first submenu
function showsubmenu(id){
submenu = document.getElementById('s'+id);
for(i=1;i<=4;i++){
if(i==id){
submenu.style.display="block";
} else {
document.getElementById('s'+i).style.display="none";
}
}
}
sfHover = function() {
var sfEls = document.getElementById("sublinks").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
Here is the CSS
#navigation{
height:32px;
margin:0 auto;
width:auto;
}
#navigation ul{
height:32px;
line-height:32px;
}
#navigation ul li{
display:inline;
}
#navigation ul li a,
#navigation ul li a:visited {
padding:0 20px;
display:block;
text-decoration:none;
float:left;
color:#1361A5;
font-weight:bold;
text-shadow:#ffffff 2px 2px 2px;
}
#navigation ul li a:hover{
color:#C3C2C1;
}
/* ----------- Sub Menu ----------- */
#sublinks{
width:auto;
margin:0 auto;
background:#C3C2C1;
height:30px;
font-size:11px;
border-radius:8px;
-moz-border-radius:8px; /* Firefox 3.6 and earlier */
-webkit-border-radius: 8px;
-webkit-box-shadow: 0 2px 3px rgba(136, 136, 136, 1);
-moz-box-shadow: 0 2px 3px rgba(136, 136, 136, 1);
box-shadow: 0 2px 3px rgba(136, 136, 136, 1);
behavior: url(http://localhost/landon/assets/pie/PIE.php);
position: relative;
}
#sublinks ul{
height:32px;
line-height:31px;
}
#sublinks ul li{
display:inline;
}
#sublinks ul li a,
#sublinks ul li a:visited {
padding:0 10px;
display:block;
text-decoration:none;
float:left;
color:#FFFFFF;
}
#sublinks ul li a:hover{
text-decoration:underline;
}
#sublinks li:hover ul{
display: block;
position: absolute;
margin: 0;
padding: 0;
}
#sublinks li:hover li {
float: none;
}
#sublinks li:hover li a {
background-color: #C3C2C1;
border-bottom: 1px solid #fff;
color: #000;
left:50;
}
#sublinks li li a:hover {
background-color: #8db3ff;
}
/* ----------- Hide Sub menu ----------- */
#s2, #s3, #s2sys, #s2wlan{display:none;}
What I am trying to do is make the second submenu a dropdown from the first submenu and at the moment it displays within the same line and not as a dropdown. How can I do this?

http://jsfiddle.net/kVztG/1/
To make the sub-sub-menu a dropdown change the css below.
#sublinks li:hover li {
display:block;
position:relative;
top:30px;
}
The position:relative and top:30px stop the dropdowns from appearing ontop of the sub-menu, and display:block stops the li from display inline.

Try adding this css to your drop down ul list that is within your sub-menu.
position: absolute;
top: 30px;
Depending on the type of result your looking for, you might want to amend the top value, or have the dropdown vertical by adding a width
Demo: http://jsfiddle.net/4k2Tx/2/

Toggle menu - keep the menu open on the current page

I've got a toggle menu, please see code and function in JsFiddle
When you click on a h3 tag eg Category 1 which is an a tag, the menu opens and stays open on the linking/current page.
However when you click on h3 tag (Category1) again or any submenu for Category 1 eg Option 1, the menu collapses close and then open again on the current page.
Is there any way I can avoid the closing and opening function when you click on any of the links on the current page?
Any code or examples would be appreciated.
Thanks in advance.

http://jsfiddle.net/LcsLr/33/
HTML
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
</head>
<body>
<div id="productmenu">
<div class="submenublock" id="submenu1">
<h3>
<a href="#" class="link" >Category 1</a>
<a href='#' class="arrow" ></a>
</h3>
<ul class="second_level">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</div>
<div class="submenublock" id="submenu2">
<h3>Category 2</h3>
</div>
<div class="submenublock" id="submenu3">
<h3>
Category 3
<a href='#' class="arrow" ></a>
</h3>
<ul class="second_level">
<li><a href="#" class="linkx">Option 1
</a></li>
<li><a href="#" class="linkx">Option 2
</a></li>
<li><a href="#" class="linkx">Option 3
</a></li>
</ul>
</div>
</div>
</body>​
JS
$(document).ready(function() {
$('h3,.second_level li').each(function(){
var href = $(this).children('a').attr('href');
if(window.location.pathname.search(href) != -1) {
$(this).children('a').addClass('currentPage')
}
});
$('.currentPage').each(function(){
var parent;
if($(this).parent('h3').length > 0){
parent = $(this).parent('h3');
}
else{
parent = $(this).parents('ul').siblings('h3');
}
$(parent).children('.arrow').addClass('open');
$(parent).siblings('ul').show();
});
$('.link').click(function() {
OpenParent($(this).parent('h3'));
window.location = $(this).attr('href');
});
$('.arrow').click(function(e){
e.preventDefault();
OpenParent($(this).parent('h3'));
});
});
function OpenParent(CurrentParent){
var currentArrow = $(CurrentParent).children('.arrow');
$('.open').not(currentArrow ).removeClass('open').parent().siblings('ul').slideUp('fast');
currentArrow.toggleClass('open');
$(CurrentParent).next().slideToggle('fast');
}​
CSS
#sidebar {
float:left;
width:220px;
}
#productmenu { width:220px; margin-left: 0px;}
.submenublock{
margin: 0px;
padding: 0px;
}
.submenublock h3{
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
margin: 0px;
border-bottom:#CCC 1px solid;
}
.submenublock h3 a{
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
text-decoration:none;
color: #000000;
}
.submenublock h3 a:hover, .submenublock h3 a:active, .submenublock h3 a:focus
{
color: #00aeef;
}
.second_level{
list-style-type:none;
list-style:none;
margin:0px;
padding:0px;
}
.second_level li{
list-style-type:none;
list-style:none;
display: block;
border-bottom:#CCC 1px dashed;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
/* background:url(images/menuarrowright.gif) no-repeat right;*/
}
.second_level li a{
display: block;
margin-left:15px;
text-decoration:none;
color:#000000;
}
#productmenu ul li a:hover, #productmenu ul li a:active, #productmenu ul li a:focus
{
color: #00aeef;
}
.second_level{
display:none;
}
a.currentPage{
color:blue !important;
}
.link{
padding:10px;15px;
display:block;
}
.linkx{
padding:10px;15px;
display:block;
}
.arrow{
background:url(http://www.worldhypertensionleague.org/Images/SmallDownArrow.png) no-repeat right 2px;
float:right;
height:17px;
width:13px;
margin-top:-27px;
}
.open{
background:url(http://www.logan.ws/images/small_up_arrow_icon.gif) no-repeat right 2px;
}
</style>​