I have a problem with js menu code. first let me explain what I try to do.
I have a menu with some items containing a submenu. The submenu's should open when a parent is clicked and contains submenu's, and when traveling to another page (from the item clicked, for example a parent of submenu item), the submenu should remain active and visible.
Now when I click on a parent item the submenu quickly blinks but is closed even as fast as it opens. I want the submenu to remain open when clicked on a parent that has a submenu, so users can easily navigate.
So, here is the code I have so far:
<div id="topnav">
<ul>
<li>
Home
</li>
<li>
Over Meves
<ul class="submenu">
<li>Historie</li>
<li>Onze mensen</li>
<li>Werkzijze</li>
</ul>
</li>
<li>
Disciplines
<ul class="submenu">
<li>Klimaatbeheersing</li>
<li>Elektrotechniek</li>
<li>Sanitaire techniek</li>
<li>Energiebesparingstechniek</li>
<li>Bouwfysica en geluid</li>
<li>Diensten energiebesparing</li>
</ul>
</li>
<li>
Expertise
<ul class="submenu">
<li>Woningbouw & Utiliteit</li>
<li>Zorg & Welzijn</li>
<li>Milieu & Energie</li>
<li>Beheer & Onderhoud</li>
<li>EPA & EPC</li>
<li>Legionella beheersing</li>
</ul>
</li>
<li>
Contact
<ul class="submenu">
<li>Adres & route</li>
<li>Werken bij</li>
</ul>
</li>
</ul>
</div>
The javascript:
var ddmenuitem = 0;
function jsddm_open()
{ jsddm_close();
ddmenuitem = $(this).find('ul.submenu').css('display', 'block');
}
function jsddm_close()
{
if(ddmenuitem) ddmenuitem.css('display', 'none');
}
$(document).ready(function()
{
$('#topnav > ul > li').bind('click', jsddm_open)
$('#topnav ul li a.suba').click(function(e){
if ($(this).attr('class') != 'active'){
$('#topnav ul li a.suba').removeClass('active');
$(this).addClass('active');
}
});
$('a').filter(function(){
return this.href === document.location.href;
}).addClass('active')
$("ul.submenu > li > a").each(function () {
var currentURL = document.location.href;
var thisURL = $(this).attr("href");
if (currentURL.indexOf(thisURL) != -1) {
$(this).parent("ul.submenu").css('display', 'block');
}
});
});
And the css:
#topnav ul
{
list-style: none;
padding: 0;
margin: 0;
}
#topnav ul li
{
float: left;
margin: 0;
padding: 0;
}
#topnav ul li a
{
padding: 5px 15px;
color: #00537F;
text-decoration: none;
display: block;
font-weight: bold;
}
#topnav ul li a:link
{
color: #FFF;
text-decoration: none;
}
#topnav ul li a:visited
{
color: #FFF;
text-decoration: none;
}
#topnav ul li a:hover
{
color: #FFF;
text-decoration: underline;
}
#topnav ul li a.active
{
text-decoration: underline;
color: #FFF;
}
/*#topnav ul li:hover .submenu
{
display:block;
}*/
#topnav ul li ul.submenu
{
float: left;
padding: 4px 0;
position: absolute;
left: 0;
top: 24px;
display: none;
background: #e0e0e0;
color: #00537F;
}
#topnav ul li ul.submenu a
{
display: inline;
color: #00537F;
padding: 4px 8px;
}
#topnav ul li ul.submenu li
{
border-right-width: 1px;
border-right-style: solid;
border-right-color: #00537F;
}
#topnav ul li ul.submenu li:last-child
{
border-right-style: none;
}
#topnav ul li ul.submenu a:link
{
color: #00537F;
}
#topnav ul li ul.submenu a:visited
{
color: #00537F;
}
#topnav ul li ul.submenu a:hover
{
text-decoration: underline;
color: #00537F;
}
#topnav ul li ul.submenu li.active
{
text-decoration: underline;
color: #00537F;
}
#topnav ul li ul.submenu a.active
{
text-decoration: underline;
color: #00537F;
}
Please help.
Edit
The submenu isn't showing when I load a parent page.
I've been playing with a code, but this is still not working:
$('#topnav a').each(function(){
var myHref= $(this).attr('href');
if( url.match( myHref)) {
$(this).addClass('active');
$(this).closest('ul').css('display', 'block');
}
});
Ok I found the answer. This will fix it:
$(document).ready(function()
{
$('#topnav ul li ul.submenu li a').click(function(e){
if ($(this).attr('class') != 'active'){
$('#topnav ul li a').removeClass('active');
$(this).addClass('active');
}
});
$('a').filter(function(){
return this.href === document.location.href;
}).addClass('active')
$("ul.submenu > li > a").each(function () {
var currentURL = document.location.href;
var thisURL = $(this).attr("href");
if (currentURL.indexOf(thisURL) != -1) {
$(this).parents("ul.submenu").css('display', 'block');
}
});
$('#topnav > ul > li > a').each(function(){
var currURL = document.location.href;
var myHref= $(this).attr('href');
if (currURL.match(myHref)) {
$(this).addClass('active');
$(this).parent().find("ul.submenu").css('display', 'block');
}
});
});
Related
So let's say user opens menu and chooses #4. When he opens the menu again while #4 is selected, the menu would ideally hide that #4 option (because it seems redundant to have the option still there). How can this be achieved in the code?
http://jsfiddle.net/j8oawqL4/
HTML
<ul class="navbar cf">
<li>
Category
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</li>
</ul>
</div>
CSS
ul.navbar {
border-style:solid;
border-width:1px;
border-color:#739FE0;
width: 100px; /*Widthchanger1*/
border-radius: 4px;
margin-left:0px;
margin-right:0px;
font-size:14px;
height:33px;
}
ul.navbar li a.ActiveListItem {
background:url(../images/downarrowblue.png) !important;
background-repeat: no-repeat !important;
background-size: 10px 10px !important;
background-position: 83px 13px !important;
color:white; !important;
background-color:#222 !important;
padding:7.5px 0px !important;
font-weight:normal !important;
margin-left:0px; /*Widthchanger2, got the activeitem centered with list text this way*/
margin-right:0px;
border-radius: 4px;
height:18px;
width:100px; /*kinda messes with width of text*/
margin-bottom:1px;
}
ul.navbar li {
position: relative;
width:100px; /*Changes width of actual list*/
}
ul.navbar li a {
display: block;
color: white;
padding:10px 5px;
text-decoration:none;
transition: all .1s ease-in;
}
ul.navbar li a:hover,
ul.navbar li:hover > a {
/*background:black; */
background:#739FE0;
color:#FFFFFF;
/*font-weight:600;*/
/*border-bottom-color:#FFFFFF;
border-bottom-style:solid;*/
/*border-color:#FFFFFF;
border-style:solid;
border-width:1px; */
}
ul.navbar li ul {
margin-top: 0px; /*Controls space from listdropdown to listchooser*/
position: absolute;
background: #222;
font-size: 14px;
/* min-width: 200px; */
display: none;
z-index: 99;
box-shadow: inset 0 0px 3px rgba(0,0,0,.6),
0 5px 10px rgba(0,0,0,.6);
}
ol, ul { list-style: outside none none; }
.hidden { display: none; }
JS
$(function() {
$('.navbar ul li a').click(function(){
$('.navbar > li:first-child > a').text($(this).text());
$('.navbar > li > ul').addClass('hidden');
$('.navbar li ul').slideToggle(100);
});
$('.navbar > li').mouseenter(function(){
$(this).find('ul').removeClass('hidden');
});
$('.ActiveListItem').click(function(){
$('.navbar li ul').slideToggle(300);
});
});
add class with style to hide it on click, and when it click some other remove it
JS
$('.navbar ul li a').click(function(event){
$('.navbar > li:first-child > a').text($(this).text());
$('.navbar > li > ul').addClass('hidden');
$('.navbar li ul').slideToggle(100);
$('.navbar ul li.gone').removeClass("gone");
$(event.taget).closest("li").addClass("gone")
});
CSS
.navbar ul li.gone { display: none; }
Another approach would be, if an option has been clicked show first all options in case there were hidden elements set before
// show all hidden options
$('.navbar ul li a').show();
Then you can now hide the selected option
// hide selected option
$(this).hide();
Code :
$(function() {
$('.navbar ul li a').click(function(){
$('.navbar > li:first-child > a').text($(this).text());
$('.navbar > li > ul').addClass('hidden');
// show all hidden options
$('.navbar ul li a').show();
// hide selected option
$(this).hide();
$('.navbar li ul').slideToggle(100);
});
$('.navbar > li').mouseenter(function(){
$(this).find('ul').removeClass('hidden');
});
$('.ActiveListItem').click(function(){
$('.navbar li ul').slideToggle(300);
});
});
Fiddle
I am working on a project in ASP.net using C#. I have a masterpage in which there is a menu with sub menus for some menu items. I want the current page menu item be highlighted when selected. Also I want the main menu item be highlighted when any of the sub menu items are selected or their link is opened in the same page.
Any idea or solution using CSS or Javascript is expected. I have searched for solution on this forum but my requirements are different so i have failed till now to find a feasible one.
<pre>
Javascript:
<script src="../Scripts/jquery-2.1.0.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#nav').find('li a').click(function () {
$('#nav').find('li a').removeClass('active');
$(this).addClass('active');
$($(this).closest('li.menu-item').children()[0]).addClass('active');
});
});
</script>
</pre>
<pre>
CSS:
#nav {
height: 50px;
width: auto;
position: relative;
background-color: #ad8f5d;
}
#nav ul li {
width:150px;
text-align:center;
}
#nav ul li a
{
color: Black;
font-size: 13px;
font-weight: bold;
line-height:50px;
text-decoration: none;
}
#nav li a.active
{
color:White;
}
#nav ul li a.has_submenu {
background: transparent url('../Images/submenu-item.jpg') no-repeat scroll right center;
padding-right: 0px;
}
#nav ul li a.has_submenu:hover, #nav ul li.sfHover a.has_submenu {
background-image: url('../Images/submenu-item-hover.jpg');
}
#nav ul ul li a.has_submenu {
background: transparent url('../Images/submenu-item-invert.jpg') no-repeat scroll right center;
padding-right: 0px;
}
#nav ul ul li a.has_submenu:hover, #nav ul ul li.sfHover a.has_submenu {
background-image: url('../Images/submenu-item-hover-invert.jpg');
}
#nav ul ul li a {
float: none;
width: 170px;
}
#nav ul > li:hover > a
{
background-color: #1f478d;
}
#nav ul ul > li:hover > a
{
background-color: #1f478d;
}
/*--------------------------Item Image Hover change---------------------CSS----*/
#nav ul > li:hover > a.has_submenu
{
background-image: url('../Images/submenu-item-hover.jpg');
}
#nav ul ul > li:hover > a.has_submenu
{
background-image: url('../Images/submenu-item-hover-invert.jpg');
}
/*--------------------------Item Image Hover change---------------------CSS ends----*/
#nav ul li a:hover, #nav ul li.sfHover a{
background-color: #1f478d;
}
#nav ul ul a
{
background-color: #ad8f5d;
}
#nav ul li li a:hover, #nav ul li.sfHover li a:hover {
background-color: #1f478d;
}
.sf-menu, .sf-menu *
{
height:50px;
margin: 0;
padding: 0;
list-style: none;
}
.sf-menu ul {
position: absolute;
top: -999em;
width: 200px;
margin-top: 0px;
padding-top: 0;
}
.sf-menu ul li {
width: 100%;
}
.sf-menu li:hover {
visibility: inherit;
}
.sf-menu li {
float: left;
position: relative;
}
.sf-menu a {
display: block;
position: relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
left: 0;
top: 49px;
z-index: 99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
left: 170px;
top: 0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
left: 10em;
top: 0;
}
</pre>
<pre>
HTML:
<div id="nav">
<ul class="sf-menu">
<li class="menu-item">Home</li>
<li class="menu-item"><a class="has_submenu" href="#">Examples</a>
<ul>
<li>Static Text Page</li>
<li>Static Frontpage</li>
<li>Another link</li>
</ul>
</li>
<li class="menu-item"><a class="has_submenu" href="#">Products</a>
<ul>
<li>Product One</li>
<li>Product Two</li>
<li>Product Three</li>
</ul>
</li>
<li class="menu-item">Solutions</li>
<li class="menu-item">Contact</li>
</ul>
</div>
</pre>
Use this code, if you need more then ask me.
$(document).ready(function () {
$('.menu-item').click(function () {
alert("S");
$('.menu-item a').css("color","black");
$(this).find('a').css("color","red");
// $($(this).closest('li.menu-item').children()[0]).addClass('active');
});
});
This has probably been asked a lot, but I can't seem to get it to work.
I'm trying to set up this CSS / JavaScript menu; before I submit it to my website, so please bear with me on the text/colour formatting. :-)
When I first created it, it was two level. ButI want to add a third tier, vertically.
When I added the code for the 3rd level, the second level just becomes a non clickable link and doesn't show the 3rd level.
HTML:
<div id='cssmenu'>
<ul>
<li class='has-sub'><a href='#'><span>Geeky Sites</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Forums</span></a>
<ul>
<li><a href='http://tools.email-checker.com/' target='_blank'><span>SMTP Checker</span></a></li>
</ul>
</li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Music and Bands</span></a>
<ul>
<li><a href='http://www.acdc.com/us/home' target='_blank'><span>AC/DC</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>iOS Apps</span></a>
<ul>
<li><a href='https://itunes.apple.com/gb/app/reeder-2/id697846300' target='_blank'><span>Reeder 2</span></a></li>
</ul>
</li>
<li class='has-sub last'><a href='#'><span>Other Stuff</span></a>
<ul>
<li><a href='http://www.flickr.com/' target='_blank'><span>Flickr - Great</span></a></li>
</ul>
</li>
</ul>
</div>
JavaScript:
$( document ).ready(function() {
$(document).ready(function(){
$('#cssmenu > ul > li ul').each(function(index, e){
var count = $(e).find('li').length;
var content = '<span class="cnt">' + count + '</span>';
$(e).closest('li').children('a').append(content);
});
$('#cssmenu ul ul li:odd').addClass('odd');
$('#cssmenu ul ul li:even').addClass('even');
$('#cssmenu > ul > li > a').click(function() {
$('#cssmenu li').removeClass('active');
$(this).closest('li').addClass('active');
var checkElement = $(this).next();
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($(this).closest('li').find('ul').children().length == 0) {
return true;
} else {
return false;
}
});
});
});
CSS:
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300);
#charset 'UTF-8';
/* Base Styles */
#cssmenu,
#cssmenu ul,
#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;
}
#cssmenu {
width: 881px;
}
#cssmenu > ul > li > a {
padding-right: 40px;
font-size: 25px;
font-weight: bold;
display: block;
background: #b0b0b0;
color: #ffffff;
border-bottom: 1px solid #7d7d7d;
}
#cssmenu > ul > li > a > span {
background: #c9c9c9;
padding: 10px;
display: block;
font-size: 15px;
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: #b0b0b0;
}
#cssmenu span.cnt {
position: absolute;
top: 8px;
right: 15px;
padding: 0;
margin: 0;
background: none;
}
/* Sub 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: #787878;
font-size: 13px;
}
#cssmenu ul ul a:hover {
color: #de8666;
text-indent: 0;
}
#cssmenu ul ul li.odd {
background: #f4f4f4;
}
#cssmenu ul ul li.even {
background: #f4f4f4;
}
#cssmenu > li > ul li > ul{ /* Third Level & beyond */
display:none;
background:#068;
}
#cssmenu > li > ul li:hover > ul{
display:block;
position:absolute;
left:100%;
border-left:solid 3px #fff;
top:0;
width:auto;
}
#cssmenu > li > ul > li ul > li{
display:block;
padding:3px 10px;
border-top:solid 3px #fff;
white-space:nowrap;
}
#cssmenu > li > ul > li ul > li:hover > span{
color:#fff;
}
My JSFiddle
Thanks
I have created what I believe you are looking for:
Here's a link to the JS Fiddle: http://jsfiddle.net/myJaM/41/
jQuery
function expand($elem) {
$('#cssmenu li.active').removeClass('active');
$elem.closest('li').addClass('active');
var checkElement = $elem.next();
if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
$elem.closest('li').removeClass('active');
checkElement.slideUp('normal');
}
if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
checkElement.slideDown('normal');
}
var $childList = $elem.find('li').find('ul');
if ($childList.children().length == 0) {
return true;
} else {
return false;
}
}
$('#cssmenu > ul > li ul').each(function (index, e) {
var count = $(e).find('li').length;
var content = '<span class="cnt">' + count + '</span>';
$(e).closest('li').children('a').append(content);
});
$('#cssmenu ul ul li:odd').addClass('odd');
$('#cssmenu ul ul li:even').addClass('even');
$('#cssmenu > ul li a').click(function () {
expand($(this));
});
$("#cssmenu > ul > li > a").click(function(){
var $thisList = $(this).parent().find("ul");
$("#cssmenu ul").not('#'+$thisList.attr('id')).not("#menu-root").slideUp("normal");
});
HTML
<body>
<div id='cssmenu'>
<ul id="menu-root">
<li class='has-sub'><a href='#'><span>Geeky Sites</span></a>
<ul id="list-geeky-sites">
<li class='has-sub'><a href='#'><span>Forums</span></a>
<ul>
<li><a href='http://tools.email-checker.com/' target='_blank'><span>SMTP Checker</span></a>
</li>
</ul>
</li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Music and Bands</span></a>
<ul id="list-music">
<li><a href='http://www.acdc.com/us/home' target='_blank'><span>AC/DC</span></a>
</li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>iOS Apps</span></a>
<ul id="list-ios">
<li><a href='https://itunes.apple.com/gb/app/reeder-2/id697846300' target='_blank'><span>Reeder 2</span></a>
</li>
</ul>
</li>
<li class='has-sub last'><a href='#'><span>Other Stuff</span></a>
<ul id="list-other">
<li><a href='http://www.flickr.com/' target='_blank'><span>Flickr - Great</span></a>
</li>
</ul>
</li>
</ul>
</div>
</body>
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");
...
});
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');
});
});