Stick second level navigation onclick

Stick second level navigation onclick - javascript

I have this 2 level navigation. If I click on second level it should not hide, but stick there. On hover, second level is showing properly, now what I want is, is I click on sub 2 and move my cursor out, the sub 2 should be selected and stay there.
$(document).ready(function () {
var $nav = $('#top_navigation > ul > li');
$nav.hover(
function() {
$('ul', this).stop(true, true).slideDown('fast');
$('a',this).first().css({"background-color":"#ccc", "color":"#000"});
},
function() {
$('ul', this).slideUp('fast');
$('a',this).first().css({"background-color":"#ccc", "color":"#000"});
}
);
});
#top_navigation {
width: 1248px;
margin: 0 auto;
position: relative;
text-transform: uppercase;
font-family: "Rounded Font", sans-serif;
font-size: 13px;
}
#top_navigation ul ul {
display: none;
}
#top_navigation ul {
padding-left: 0;
}
#top_navigation ul li {
margin: 0;
padding: 0;
float: left;
width: 100px;
height: 30px;
line-height: 30px;
font-size: 13px;
list-style: none;
}
#top_navigation ul li a {
display: block;
text-align: center;
text-decoration: none;
color: #000;
background-color: #FFF;
}
#top_navigation ul li.selected_menu_item a {
background-color: #ccc;
color: #FFF;
}
#top_navigation ul li a:hover {
background-color: #ccc;
color: #FFF;
}
#top_navigation li li {
height: 30px;
line-height: 30px;
border-top: #ccc 1px solid;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body bgcolor="black">
<div id="top_navigation">
<ul>
<li>item1</li>
<li>item2
<ul class="submenu">
<li>sub1</li>
<li>sub2</li>
<li class="selected_menu_item">sub3</li>
</ul>
</li>
</ul>
</div>
</body>
</html>

Try this:
$(document).ready(function () {
var $nav = $('#top_navigation > ul > li');
$nav.hover(
function() {
$('ul', this).stop(true, true).slideDown('fast');
$('a',this).first().css({"background-color":"#ccc", "color":"#000"});
},
function() {
if( ! $('ul', this).children().hasClass('show')) {
$('ul', this).slideUp('fast');
} else {
$('#top_navigation ul').click(function(){
$('ul.submenu').slideUp();
})
}
$('a',this).first().css({"background-color":"#ccc", "color":"#000"});
}
);
$('ul.submenu li').click(function(){
$('ul.submenu li').removeClass('selected_menu_item')
$(this).addClass('selected_menu_item show')
});
});
Working Fiddle: https://jsfiddle.net/co7u8L23/2/

$(document).ready(function () {
var $nav = $('#top_navigation > ul > li');
var $nav1 = $('#top_navigation > ul > li >ul >li');
$nav.hover(
function() {
$('ul', this).stop(true, true).slideDown('fast');
$('a',this).first().css({"background-color":"#ccc", "color":"#000"});
},
function() {
$('ul', this).slideUp('fast');
$('a',this).first().css({"background-color":"#ccc", "color":"#000"});
}
);
$nav1.click(function(){
$(this).addClass("selected_menu_item");
}
);
});
#top_navigation {
width: 1248px;
margin: 0 auto;
position: relative;
text-transform: uppercase;
font-family: "Rounded Font", sans-serif;
font-size: 13px;
}
#top_navigation ul ul {
display: none;
}
#top_navigation ul {
padding-left: 0;
}
#top_navigation ul li {
margin: 0;
padding: 0;
float: left;
width: 100px;
height: 30px;
line-height: 30px;
font-size: 13px;
list-style: none;
}
#top_navigation ul li a {
display: block;
text-align: center;
text-decoration: none;
color: #000;
background-color: #FFF;
}
#top_navigation ul li.selected_menu_item a {
background-color: #ccc;
color: #FFF;
}
#top_navigation ul li a:hover {
background-color: #ccc;
color: #FFF;
}
#top_navigation li li {
height: 30px;
line-height: 30px;
border-top: #ccc 1px solid;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body bgcolor="black">
<div id="top_navigation">
<ul>
<li>item1</li>
<li>item2
<ul class="submenu">
<li>sub1</li>
<li>sub2</li>
<li class="selected_menu_item">sub3</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
I have added click event in your code.This is running snippest of it

Related

Why isn't my code changing the div colour?

var el = document.querySelectorAll('.gange-color ul li'),
colorLesit = [],
i;
for (i = 0; i < el.length; i++) {
colorLesit.push(el[i].getAttribute('datacolor'));
el[i].addEventListener('click', function() {
document.body.classList.remove('red', 'green', 'purbal', 'black');
document.body.classList.add(this.getAttribute('datacolor'));
})
}
* {
box-sizing: border-box;
}
.gange-color {
margin-left: 40%;
}
ul li {
display: inline-block;
list-style: none;
width: 30px;
height: 30px;
margin: 30px auto;
cursor: pointer;
}
ul li:first-child {
background-color: red;
}
ul li:nth-child(2) {
background-color: green;
}
ul li:nth-child(3) {
background-color: purple;
}
ul li:last-child {
background-color: black;
}
*emphasized text* h3 {
color: red;
font-size: 19px
}
.contant {
background-color: red;
padding: 30px;
}
.contant h4 {
color: white;
font-size: 17px
}
<head>
<title>cangecolor</title> `
</head>
<body>
<div class="gange-color">
<ul>
<li datacolor='red'></li>
<li datacolor='green'></li>
<li datacolor='purbal'></li>
<li datacolor='black'></li>
</ul>
</div>
<h3>TWFSRG</h3>
<div class="contant">
<h4>TESTINH</h4>
</div>
</body>

Because you have not defined css styles for body e.g
body.green {
background-color: green;
}

Keep nav menu open if child item is active in a vertical list

I am working on Vertical list and list shows child item when user clicks on the parent item and also changes the color of the child item in red if it matches the URL.
I want the parent nav in open state if it's child item has an active-menu class.
I am using below script but it's not working, not sure what I am missing
Fiddle code
$(".nav-w > ul > li > a").click(function() {
$(this).next().slideToggle();
});
//open active list
$('.nav-w ul li').children().has('.active-menu').css('display', 'block');
// compare url with nav url to show active url
$(function() {
//var url = window.location.href;
var url = window.location.pathname;
var pgurl = window.location.href.substr(
window.location.href.lastIndexOf("/") + 1
);
$(".nav-w ul li a").each(function() {
if ($(this).attr("href") == url || $(this).attr("href") == "") {
$(this).addClass("active-menu");
}
});
console.log("url : " + window.location.pathname);
});
.nav-w a {
color: black;
padding: 10px 15px;
padding-left: 35px;
text-decoration: none;
display: block;
border-bottom: 1px solid #f1f1f1;
font-size: 12px;
font-weight: 600;
/* color: #178B43 !important; */
color: #757575;
}
/* ul inside content area*/
.nav-w ul {
margin-left: 0px;
list-style-type: none;
margin-bottom: 0px;
}
.nav-w ul li {
/*padding-left: 10px;*/
text-transform: uppercase;
position: relative;
width: 100%;
}
/* ol inside content area*/
.nav-w>ul {
padding-left: 0px;
padding-right: 0px;
}
.nav-w ul>li ul {
padding-left: 0px;
padding-right: 0px;
display: none;
}
.active-menu {
color: red !important;
}
.nav-w>ul li::after {
text-transform: uppercase;
content: "+";
position: absolute;
left: 15px;
top: 4px;
line-height: 30px;
font-size: 20px;
z-index: 0;
}
.nav-w>ul li ul li::after {
text-transform: uppercase;
content: "";
position: absolute;
left: 0px;
top: 5px;
line-height: 32px;
font-size: 20px;
z-index: 0;
}
.nav-w ul li ul li a {
padding-left: 45px;
}
.nav-w a:hover {
background: #f5f5f5;
border-left: 2px solid #178B43;
}
<div class="nav-w">
<ul class="">
<li>Share Information
<ul class="" style="display: none;">
<li>Share Overview</li>
<li>Share Graph </li>
<li>Investement Calculator</li>
<li>Historical Share Prices</li>
</ul>
</li>
<li>Financial Information
<ul class="" style="display: none;">
<li>Earning Releases</li>
<li>Financial Statements</li>
<li><a href="/investor-relations/financial-information/presentation">Presentation
</a></li>
<li><a href="/investor-relations/financial-information/quarterly-key-figures">Quarterly Key Figures
</a></li>
<li><a href="/investor-relations/financial-information/annual-key-figures">Annual Key Figures
</a></li>
</ul>
</li>
</ul>
</div>

Corrected your script,
$('.nav-w ul li').each(function() {
if ($(this).hasClass('active-menu')) {
$(this).parents("ul").css('display', 'block');
}
})
$('.nav-w ul li') will return array of elements, you will need run loop through it to find active element then open it's parent.
I have manually added active-menu class to below li to test the code.
<li class="active-menu">Earning Releases</li>
$(".nav-w > ul > li > a").click(function() {
$(this).next().slideToggle();
});
//open active list
$('.nav-w ul li').each(function() {
if ($(this).hasClass('active-menu')) {
$(this).parents("ul").css('display', 'block');
}
})
// compare url with nav url to show active url
$(function() {
//var url = window.location.href;
var url = window.location.pathname;
var pgurl = window.location.href.substr(
window.location.href.lastIndexOf("/") + 1
);
$(".nav-w ul li a").each(function() {
if ($(this).attr("href") == url || $(this).attr("href") == "") {
$(this).addClass("active-menu");
}
});
console.log("url : " + window.location.pathname);
});
.nav-w a {
color: black;
padding: 10px 15px;
padding-left: 35px;
text-decoration: none;
display: block;
border-bottom: 1px solid #f1f1f1;
font-size: 12px;
font-weight: 600;
/* color: #178B43 !important; */
color: #757575;
}
/* ul inside content area*/
.nav-w ul {
margin-left: 0px;
list-style-type: none;
margin-bottom: 0px;
}
.nav-w ul li {
/*padding-left: 10px;*/
text-transform: uppercase;
position: relative;
width: 100%;
}
/* ol inside content area*/
.nav-w>ul {
padding-left: 0px;
padding-right: 0px;
}
.nav-w ul>li ul {
padding-left: 0px;
padding-right: 0px;
display: none;
}
.active-menu {
color: red !important;
}
.nav-w>ul li::after {
text-transform: uppercase;
content: "+";
position: absolute;
left: 15px;
top: 4px;
line-height: 30px;
font-size: 20px;
z-index: 0;
}
.nav-w>ul li ul li::after {
text-transform: uppercase;
content: "";
position: absolute;
left: 0px;
top: 5px;
line-height: 32px;
font-size: 20px;
z-index: 0;
}
.nav-w ul li ul li a {
padding-left: 45px;
}
.nav-w a:hover {
background: #f5f5f5;
border-left: 2px solid #178B43;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav-w">
<ul class="">
<li>Share Information
<ul class="" style="display: none;">
<li>Share Overview</li>
<li>Share Graph </li>
<li>Investement Calculator</li>
<li>Historical Share Prices</li>
</ul>
</li>
<li>Financial Information
<ul class="" style="display: none;">
<li class="active-menu">Earning Releases</li>
<li>Financial Statements</li>
<li><a href="/investor-relations/financial-information/presentation">Presentation
</a></li>
<li><a href="/investor-relations/financial-information/quarterly-key-figures">Quarterly Key Figures
</a></li>
<li><a href="/investor-relations/financial-information/annual-key-figures">Annual Key Figures
</a></li>
</ul>
</li>
</ul>
</div>

jquery toggle append remove

Here is a menu with submenu. I need that when I click on the submenu item, submenu text toggle beside menu item "Everyday". Like the image below
(function($) {
$(".menu .sub-menu li a").each(function() {
var dayName = $(this).text();
$(this).on("click", function() {
$(this).closest(".menu").children("li").children("a").append('<span class="day-name">' + dayName + '</span>');
});
});
})(jQuery);
ul {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
}
.menu > li {
position: relative;
}
.menu > li > a {
background-color: #eee;
color: #333;
display: inline-block;
padding: 10px 20px;
}
.menu li:hover > .sub-menu {
opacity: 1;
visibility: visible;
}
.menu .sub-menu {
position: absolute;
left: 0;
background-color: #fff;
box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
min-width: 200px;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease 0s;
}
.menu .sub-menu li {
}
.menu .sub-menu li a {
color: #777;
display: block;
padding: 5px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="menu">
<li>
Everyday
<ul class="sub-menu">
<li>Sat</li>
<li>Sun</li>
<li>Mon</li>
<li>Tue</li>
<li>Wed</li>
<li>Thu</li>
<li>Fri</li>
</ul>
</li>
</ul>
This is what I'm trying, but its does not work.

You can use Javascript's join & jQuery's - hasClass & toggleClass methods with on('click') event like this:
See jsFiddle
or see the code snippet below:
$(function() {
$('.menu .sub-menu li a').on('click', function(e) {
$(this).toggleClass('selected');
var txt = $('#title').text();
var total_len = $('.menu .sub-menu li').length;
var count = 0;
var values = [];
$('.menu .sub-menu li a.selected').each(function(i) {
values.push($(this).text());
count++;
});
if(count == total_len) {
txt = "Every Day";
} else {
txt = "Every " + values.join(',');
}
$('#title').text(txt);
});
})
ul {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
}
.menu > li {
position: relative;
}
.menu > li > a {
background-color: #eee;
color: #333;
display: inline-block;
padding: 10px 20px;
}
.menu li:hover > .sub-menu {
opacity: 1;
visibility: visible;
}
.menu .sub-menu {
position: absolute;
left: 0;
background-color: #fff;
box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
min-width: 200px;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease 0s;
}
.menu .sub-menu li {
}
.menu .sub-menu li a {
color: #777;
display: block;
padding: 5px 10px;
}
.menu .sub-menu li a.selected {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="menu">
<li>
<a id="title" href="#">Every </a>
<ul class="sub-menu">
<li>Sat</li>
<li>Sun</li>
<li>Mon</li>
<li>Tue</li>
<li>Wed</li>
<li>Thu</li>
<li>Fri</li>
</ul>
</li>
</ul>

(function($) {
$(".menu .sub-menu li a").on("click", function() {
var $this = $(this);
if (this.hasAttribute("data-selected")) {
$this.removeAttr("data-selected");
} else {
$this.attr("data-selected", 'true');
}
$this.closest(".menu").find(" > li > a").html(fillButton);
});
function fillButton() {
var options = $(this).next(".sub-menu").find("li a");
if (options.filter("[data-selected]").length > 0) {
if (options.length === options.filter("[data-selected]").length) {
return "Every day";
} else {
var html = "Every ";
options.filter("[data-selected]").each(function(i, el) {
html += (i > 0) ? ", " + $(el).text() : $(el).text();
});
return html;
}
} else {
return "Never";
}
}
})(jQuery);
ul {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
}
a[data-selected] {
background: #f0f0f0;
}
.menu > li {
position: relative;
}
.menu > li > a {
background-color: #eee;
color: #333;
display: inline-block;
padding: 10px 20px;
}
.menu li:hover > .sub-menu {
opacity: 1;
visibility: visible;
}
.menu .sub-menu {
position: absolute;
left: 0;
background-color: #fff;
box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
min-width: 200px;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease 0s;
}
.menu .sub-menu li {} .menu .sub-menu li a {
color: #777;
display: block;
padding: 5px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="menu">
<li>
Never
<ul class="sub-menu">
<li>Sat
</li>
<li>Sun
</li>
<li>Mon
</li>
<li>Tue
</li>
<li>Wed
</li>
<li>Thu
</li>
<li>Fri
</li>
</ul>
</li>
</ul>

Check this fiddle.
Change JS as below and add schedule class to the "Everyday" anchor.
(function($) {
var currentValue = [];
function renderValue(){
var content = "Everyday ";
$('.schedule').text(content + currentValue.join(' '));
}
$(".menu .sub-menu li a").each(function() {
var dayName = $(this).text();
$(this).on("click", function() {
var el = $(this),
id = el.attr('data-id');
currentValue[id] = currentValue[id] ? undefined : el.text();
renderValue();
});
});
})(jQuery);

You can try this as well. you will have to check if the appended span in the days list is equal to total days.
(function($) {
$(".menu").children("li").children("a.all").hide();
$(".menu .sub-menu li a").each(function() {
var dayName = $(this).text();
$(this).on("click", function() {
var li = $(this).closest(".menu").children("li");
if ($(".menu .sub-menu li").length == $(".menu li a.days span").length + 1 && li.children("a.all").is(":visible") == false) {
li.children("a.days").hide();
li.children("a.all").show();
li.children("a.days").append('<span class="day-name">, ' + dayName + '</span>');
} else {
li.children("a.all").hide();
li.children("a.days").show();
if (li.children("a.days").children("span:contains('" + dayName + "')").length == 0) {
li.children("a.days").append('<span class="day-name">, ' + dayName + '</span>');
} else {
li.children("a.days").children("span:contains('" + dayName + "')").remove();
}
}
});
});
})(jQuery);
ul {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
}
.menu > li {
position: relative;
}
.menu > li > a {
background-color: #eee;
color: #333;
display: inline-block;
padding: 10px 20px;
}
.menu li:hover > .sub-menu {
opacity: 1;
visibility: visible;
}
.menu .sub-menu {
position: absolute;
left: 0;
background-color: #fff;
box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
min-width: 200px;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease 0s;
}
.menu .sub-menu li {} .menu .sub-menu li a {
color: #777;
display: block;
padding: 5px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="menu">
<li>
Every
Everyday
<ul class="sub-menu">
<li>Sat
</li>
<li>Sun
</li>
<li>Mon
</li>
<li>Tue
</li>
<li>Wed
</li>
<li>Thu
</li>
<li>Fri
</li>
</ul>
</li>
</ul>

JS accordion menu on wordpress site

I'm building a personal website for a friend and he has a lot of pieces for his portfolio page. So i wanted to create a JS accordion section for the content. Essentially working as a menu but when clicking the parent it will show a youtube embedded video, his resume, etc..
Here is the JS
$(function(){
$('#cssmenu > ul > li:has(ul)').addClass("has-sub");
$('#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');
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#cssmenu ul ul:visible').slideUp('normal');
checkElement.slideDown('normal');
}
if (checkElement.is('ul')) {
return false;
} else {
return true;
}
});
});
Here is the HTML
<div id="cssmenu">
<ul>
<li><span>Résumé</span>
<ul>
<li><span>content</span></li>
</ul>
</li>
<li><span>Video Reel</span>
<ul>
<li><span>content2</span></li>
</ul>
</li>
<li><span>Writing Clips</span>
<ul>
<li><span>Piece1</span>
<ul>
<li>Content1</li>
</ul>
</li>
<li><span>Piece2</span>
<ul>
<li>Content2</li>
</ul>
</li>
<li><span>Piece3</span>
<ul>
<li>Content3</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
And here is the CSS
#cssmenu li,
#cssmenu a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
font-weight: normal;
text-decoration: none;
line-height: 1;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
position: relative;
}
#cssmenu a {
line-height: 1.3;
}
/*First-level menu*/
#cssmenu {
width: 100%;
}
#cssmenu > ul > li > a {
padding-right: 40px;
font-size: 25px;
font-weight: bold;
display: block;
background: #bd0e36;
color: #000000;
border-bottom: 1px solid #5e071b;
text-transform: uppercase;
position: relative;
}
#cssmenu > ul > li > a > span {
background: #ed1144;
padding: 10px;
display: block;
font-size: 13px;
font-weight: 300;
}
#cssmenu > ul > li > a:hover {
text-decoration: none;
}
#cssmenu > ul > li.active {
border-bottom: none;
}
#cssmenu > ul > li.active > a {
color: #fff;
}
#cssmenu > ul > li.active > a span {
background: #bd0e36;
}
#cssmenu span.cnt {
position: absolute;
top: 8px;
right: 15px;
padding: 0;
margin: 0;
background: none;
}
/*Second-level menu*/
#cssmenu ul ul {
display: none;
}
#cssmenu ul ul li {
border: 1px solid #e0e0e0;
border-top: 0;
}
#cssmenu ul ul a {
padding: 10px;
display: block;
color: #ffffff;
font-size: 13px;
}
#cssmenu ul ul a:hover {
color: #bd0e36;
}
#cssmenu ul ul li.odd {
background: #B3D4FC;
}
#cssmenu ul ul li.even {
background: #B3D4FC;
}
The page that i'm working on is: http://aaroncmansfield.com/portfolio/
I'm not sure why the menu levels aren't dropping down when i click. I added a plugin to the wordpress site that allows me to add the proper code to the header to read the .js file too. Please help! Thanks

jQuery is not being aliased with $ on your site. You can do so by including an argument in your document.ready function.
Try this:
jQuery(function($){
$('#cssmenu > ul > li:has(ul)').addClass("has-sub");
...
});

Drop down menu, CSS, HTML and JavaScript: JavaScript making menu jump and not function correctly

I have a simple drop down menu, but when used it does not work correctly, I think there is a problem with the JavaScript as it just keeps bouncing up and down!
jsFiddle Here: http://jsfiddle.net/pJeDV/
<div class="container">
<ul id="coolMenu">
<li>Lorem</li>
<li>Mauricii</li>
<li>
Periher
<ul>
<li>Hellenico</li>
<li>Genere</li>
<li>Indulgentia</li>
</ul>
</li>
<li>Tyrio</li>
<li>Quicumque</li>
</ul>
CSS
#coolMenu,
#coolMenu ul {
list-style: none;
}
#coolMenu {
float: left;
}
#coolMenu > li {
float: left;
}
#coolMenu li a {
display: block;
height: 2em;
line-height: 2em;
padding: 0 1.5em;
text-decoration: none;
}
#coolMenu ul {
position: absolute;
display: none;
z-index: 999;
}
#coolMenu ul li a {
width: 80px;
}
#coolMenu li:hover ul {
display: block;
}
/* Main menu
------------------------------------------*/
#coolMenu {
font-family: Arial;
font-size: 12px;
background: #2f8be8;
}
#coolMenu > li > a {
color: #fff;
font-weight: bold;
}
#coolMenu > li:hover > a {
background: #f09d28;
color: #000;
}
/* Submenu
------------------------------------------*/
#coolMenu ul {
background: #f09d28;
}
#coolMenu ul li a {
color: #000;
}
#coolMenu ul li:hover a {
background: #ffc97c;
}
#coolMenu li:hover ul.noJS {
display: block;
}
JavaScript
<script type="text/javascript">
$(function(){
$('#coolMenu').find('> li').hover(function(){
$(this).find('ul')
.removeClass('noJS')
.stop(true, true).slideToggle('fast');
});
});
</script>
http://jsfiddle.net/pJeDV/

Here is the working fiddle: http://jsfiddle.net/surendraVsingh/pJeDV/6/
Jquery
$(function(){
$('#coolMenu > li').hover(function(){
$(this).find('ul').slideToggle();
});
});
CSS (remove below given code completely)
#coolMenu li:hover ul {
display:block; /* Remove This*/
}

is this what you're looking for? instead of using .find('> li') i used .children('a'). Also inside the .hover() function you're missing the mouseout function.
jsFiddle
here's the code:
$(function(){
$('#coolMenu').children('a').hover(function(){
$(this).find('ul')
.removeClass('noJS')
.slideToggle('fast');
},function(){
$(this).find('ul')
.addClass('noJS')
.slideToggle('fast');
});
});

We Keep Coding

JavaScript is the programming language of the Web.

Stick second level navigation onclick - javascript

Related

Why isn't my code changing the div colour?

Keep nav menu open if child item is active in a vertical list

jquery toggle append remove

JS accordion menu on wordpress site

Drop down menu, CSS, HTML and JavaScript: JavaScript making menu jump and not function correctly

Categories

Resources