|
JavaScript - Cut & Paste Jquery Mega Menu
http://www.javascriptkit.com/script/...megamenu.shtml
this drop down menu works great however, if you hit control F5 in firefox, sometimes (alot) will display incorrectly). i have included two images in here just to show what i'm talking about. if you know how to fix this. please let me know. thank you and really appreciate it. Similar TutorialsI am incorporating this menu into a site and for desktop users I need the mouseover. However, after referencing the link below for mobile devices (most management has Blackberrys). I am concerned the mouseover will not work on their phones. How do I add an option that will work on phones - like mouseover OR click option? http://www.quirksmode.org/m/table.html Thanks! Friends, i have a problem... I hope all pf you can solve my problem... It's all about Mega Menu JQuery. I already download the script in this javascriptkit.com And the problem is... I can't set the alignment of mega menu drop down because in this script to set the left alignment is using var menu left where this script is using calculation of windows width and mega menu size. in the example on javacriptkit.com using only one menu, how if in this case there is more than one menu? for example i already upload the picture to describe the problem. Picture 1 is i have put mega menu script and it's look good and fine. And then in the second menu where is the porblem begin. Picture 2 mega menu sliding on the left If i put the script in the third and more menu, the mega menu drop down sliding more left. It should be center. I' already found the problem script in .js but i'm still find the solutions... Pleas help me... my project is www.restomart.com ( already online ) and i want make a mega menu like www.surlatable.com ( online ) Pleas once again.HELP me .... Thanks so much... I am having an issue using the Cut & Paste jQuery Mega Menu. I am using it on the main page of my future forum (test forum is here - http://illini-nation.deepermethod.co...nity/index.php It's the button labeled 'Forum Categories'). The mega menu works fine on the main page of the forum, but once I drill down into the forums, the mega menu no longer works. The mega menu ONLY works on the index of the forum. Any and all help is greatly appreciated. IlliniCrusader See below:
I am working on getting this script to work on my page but can't get the hovered anchor to maintain it's state when moving to the mega menu. I'm hoping to have a tabbed look to the drop down much like at Target.com. http://www.javascriptkit.com/script/...megamenu.shtml However, being new to jQuery this looks a bit daunting the way this script was written. I've seen examples coded much more simply than this one. This one seems like the author was trying to obfuscate the intent behind the code. Is there an easy way to modify this code to allow for the anchor that triggers the event to maintain it's hover state even when moving to the drop-down? Thanks in advance for your help and I apologize if this is an incredibly easy problem to resolve. Hi all, I am having problems with a script 'Cut & Paste CSS Horizontal List Menu' from http://www.javascriptkit.com/script/...stopmenu.shtml It works on my site with Firefox but not IE 8. My site url is http://www.bridgepoint-llp.co.uk/ I would be grateful for any help anyone could supply Hi... I did the Cut & Paste CSS Vertical List Menu, but I have an issue with submenus... Appear behind other divs. I attach a print screen. I include inside a div. Any idea? Code: <div id="sidebar1">
<ul id="verticalmenu" class="glossymenu">
<li><a href="http://www.javascriptkit.com/">JavaScript Kit</a></li>
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml" >Free JavaScripts</a></li>
<li><a href="http://www.javascriptkit.com/">JavaScript Tutorials</a></li>
<li><a href="#">References</a>
<ul>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
<li><a href="http://www.javascriptkit.com/dhtmltutors/cssreference.shtml">CSS Reference</a></li>
</ul>
</li>
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml" >DHTML/ CSS Tutorials</a></li>
<li><a href="http://www.javascriptkit.com/howto/">web Design Tutorials</a></li>
<li><a href="#" >Helpful Resources</a>
<ul>
<li><a href="http://www.dynamicdrive.com">Dynamic HTML</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.dynamicdrive.com/style/">CSS Library</a></li>
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a></li>
<li><a href="http://tools.dynamicdrive.com/favicon/">Favicon Generator</a></li>
</ul>
</li>
</ul>
</div>
hi how can i make somethin like the menus A,b, bla bla one this site? http://www.kanzenanimes.net/animes I am completely lost here. My page is http://myresearchfinder.com/dev/newchecktest.html The first checkbox should spawn a menu and then the "breast" option could spawn another. It works flawless in IE9. But in FF 3.6 the first checkbox simply does nothing. In Chrome, it spawns the menu, but strangely the checkboxes in the next menu are not clickable. soooo weird. any ideas? this should be standard css/jquery. Hey guys, I'd like to think this is fairly simple but unfortunately my knowldege of jquery is limited to using prebuilt scripts and changing a few variables to get what i need. I created a drop down menu with a slide down/up animation for submenus, which worked out just as I wanted. I ran into troubles though when trying to add a nested menu to the drop down, but with a slide animation going from left to right. I'm sure my explanation isn't very clear, so please take a look http://www.palousehillscomputing.com...rop/index.html The nested submenu I am speaking of should only open when hovering occurs on the 'Item 01' link, but as you can see it also opens when hovering over the buyers link. Secondly, my attempt to slide from left to right on this ul is not working. It seems to be sliding down even though this was not defined in the code. I've tried playing around with it for a while now and can't seem to figure this out so I'd appreciate if someone pointed me in the right direction. Thanks I'm new to javascript. Can someone help me with this menu? Here is my html code: <head> <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> <link rel="icon" type="image/x-icon" href="favicon.ico" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Alaska Fur Gallery</title> <link rel="stylesheet" type="text/css" href="style.css" /> <script language="JavaScript" src="js.js"></script> <link rel="stylesheet" type="text/css" href="activemenu.css" /> <script src="jquery-activemenu.js" type="text/javascript"></script> <script type="text/javascript" src="fancybox/jquery.fancybox-1.3.1.js"></script> <link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.1.css" media="screen" /> <script type="text/javascript"> $(document).ready(function() { $("a#fancybox").fancybox({ 'titleShow' : false, type:'image' }); //show the footer $("#footer").css("visibility","visible"); //initialize activeMenu initMenu(); }); </script> </head> <body> <div id="container"> <div id="header"> <a href="index.html"><div id="logolink">Alaska Fur Gallery</div></a> <div id="answer">We're Here to Answer Your Questions. Call Us Today at 334-277-7610</div> <div id="underlinemenu" class="ulmhead"> <ul> <li><a href="index.html" style="border:0;">Home</a></li> <li><a href="content2e96.html?id=431503">About</a></li> <li><a href="content9bf1.html?id=431504">Services</a></li> <li><a href="find_location.html">Locations</a></li> <li><a href="ct.html">Contact Us</a></li> </ul> </div> <div class="clear"></div> <div id="topmenu"> <ul id="activeMenu"> <li style="top: 0; left:0px"><a href="shopa146.html?action=cat&catID=20529" id="furs">Furs</a></li> <li style="top: 0; left:66px"><a href="shop52df.html?action=cat&catID=20541" id="leather">Leather & Fur</a></li> <li style="top: 0; left:210px"><a href="shop9e9f.html?action=cat&catID=20575" id="cashmere">Cashmere & Fur</a></li> <li style="top: 0; left:374px"><a href="shop80c4.html?action=cat&catID=21239" id="outerwear">Outerwear</a></li> <li style="top: 0; left:493px"><a href="shop0376.html?action=cat&catID=20544" id="plus">Plus Sizes</a></li> <li style="top: 0; left:604px"><a href="shop2060.html?action=cat&catID=20580" id="accessories">Accessories</a></li> </ul> </div><!-- topmenu --> </div><!-- header --> <!--submenu divs--> <div id="furs_submenu"> <ul class="dropdown" style="width:130px; float:left; margin:0 30px 0 0;"> <span>Women's Furs</span> <li><a href="shopde5e.html?action=cat&catID=20572">Mink</a></li> <li><a href="shop2705.html?action=cat&catID=20574">Sable</a></li> <li><a href="shop5c0d.html?action=cat&catID=20570">Chinchilla</a></li> <li><a href="shopdfa7.html?action=cat&catID=20568">Beaver</a></li> <li><a href="shop04fa.html?action=cat&catID=20571">Lynx</a></li> <li><a href="shop65dc.html?action=cat&catID=20569">Bobcat</a></li> <li><a href="shopc9fc.html?action=cat&catID=20622">Coyote</a></li> <li><a href="shop65f8.html?action=cat&catID=20539">Fox</a></li> <li><a href="shop3276.html?action=cat&catID=20573">Rabbit</a></li> </ul> <ul class="dropdown" style="width:140px; float:left;"> <span>Men's Furs</span> <li><a href="shop2ef6.html?action=cat&catID=20531">Mink</a></li> <li><a href="errorfe10.html?action=cat&catID=20532">Sable</a></li> <li><a href="errorfe10.html?action=cat&catID=20533">Chinchilla</a></li> <li><a href="errorfe10.html?action=cat&catID=20534">Beaver</a></li> <li><a href="errorfe10.html?action=cat&catID=20535">Lynx</a></li> <li><a href="errorfe10.html?action=cat&catID=20536">Bobcat</a></li> <li><a href="shopfc5b.html?action=cat&catID=20618">Coyote</a></li> <li><a href="shop88e4.html?action=cat&catID=20537">Fox</a></li> <li><a href="errorfe10.html?action=cat&catID=20540">Rabbit</a></li> </ul> </div> <div id="leather_submenu"> <ul class="dropdown"> <li><a href="shop973d.html?action=cat&catID=20542">Women's Leather & Fur</a></li> <li><a href="shop4cc6.html?action=cat&catID=20543" style="border:0;">Men's Leather & Fur</a></li> </ul> </div> <div id="cashmere_submenu"> <ul class="dropdown"> <li><a href="shop3f01.html?action=cat&catID=20576">Coats</a></li> <li><a href="shopd4d8.html?action=cat&catID=20577">Strollers</a></li> <li><a href="shop7899.html?action=cat&catID=20578">Jackets</a></li> <li><a href="shopcba4.html?action=cat&catID=20579" style="border:0;">Capes</a></li> </ul> </div> <div id="plus_submenu"> <ul class="dropdown" style="width:130px; float:left; margin:0 30px 16px 0;"> <span>Women's Furs</span> <li><a href="shop2530.html?action=cat&catID=20564">Mink</a></li> <li><a href="shop807e.html?action=cat&catID=20566">Sable</a></li> <li><a href="shopbc8f.html?action=cat&catID=20557">Chinchilla</a></li> <li><a href="shopcb16.html?action=cat&catID=20553">Beaver</a></li> <li><a href="shop3cb8.html?action=cat&catID=20561">Lynx</a></li> <li><a href="shopb6e3.html?action=cat&catID=20555">Bobcat</a></li> <li><a href="shop1e6c.html?action=cat&catID=20621">Coyote</a></li> <li><a href="shopc08b.html?action=cat&catID=20559">Fox</a></li> <li><a href="shop0495.html?action=cat&catID=20562">Rabbit</a></li> </ul> <ul class="dropdown" style="width:140px; float:left;"> <span>Men's Furs</span> <li><a href="shop9b23.html?action=cat&catID=20565">Mink</a></li> <li><a href="shop10dc.html?action=cat&catID=20567">Sable</a></li> <li><a href="shop8154.html?action=cat&catID=20556">Chinchilla</a></li> <li><a href="shop0b63.html?action=cat&catID=20551">Beaver</a></li> <li><a href="shopa40f.html?action=cat&catID=20560">Lynx</a></li> <li><a href="shopd843.html?action=cat&catID=20554">Bobcat</a></li> <li><a href="shopa2c0.html?action=cat&catID=20620">Coyote</a></li> <li><a href="shopb0b2.html?action=cat&catID=20558">Fox</a></li> <li><a href="shopd3b0.html?action=cat&catID=20563">Rabbit</a></li> </ul> <div class="clear"></div> <ul class="dropdown" style="width:130px; float:left; margin:0 30px 10px 0;"> <span>Leather & Fur</span> <li><a href="shop91d6.html?action=cat&catID=20549">Women's Leather & Fur</a></li> <li><a href="shop8605.html?action=cat&catID=20548">Men's Leather & Fur</a></li> </ul> <ul class="dropdown" style="width:140px; float:left; margin:-6px 0 0 0;"> <li><a href="shope478.html?action=cat&catID=20550" style="border:0;"><strong>Cashmere & Fur</strong></a></li> </ul> </div> <div id="accessories_submenu"> <ul class="dropdown"> <li><a href="shop2f26.html?action=cat&catID=20581">Fur Hats</a></li> <li><a href="shop9989.html?action=cat&catID=20582">Fur Headbands</a></li> <li><a href="shop935f.html?action=cat&catID=20583">Fur Earmuffs</a></li> <li><a href="shopd2bf.html?action=cat&catID=20584">Gloves with Fur</a></li> <li><a href="shop2c08.html?action=cat&catID=20585">Fur Boot Toppers</a></li> <li><a href="shop9f4f.html?action=cat&catID=20586">Fur Scarves & Flings</a></li> <li><a href="shop3d06.html?action=cat&catID=20587">Fur Blankets</a></li> <li><a href="shop4bf4.html?action=cat&catID=20588">Fur Handbags</a></li> <li><a href="shop611a.html?action=cat&catID=20589" style="border:0;">Mink Teddy Bears</a></li> </ul> </div> Here is the javascript: /* jQuery ActiveMenu v1.0 Author: Miguel Sanchez 12/2009 */ var timeouts = []; //for hiding the menu purposes function initMenu(){ var offclass; var menuAnchor; $("#activeMenu").find("li").each(function() { //get a reference to the anchor inside the li menuAnchor = $(this).children(":first"); //get the name of the offclass offclass = $(menuAnchor).attr("id")+"_off"; //assign off class to item $(menuAnchor).addClass(offclass); //assign hover event handler to main menu $(menuAnchor).hover( function (event) { submenu_show(event.target); }, function (event) { submenu_hide(event.target); } }); //assign hover events to submenu $("div [id$=_submenu]").hover( function (event) { submenu_over(event.target); }, function (event) { submenu_out(event.target); } } function submenu_show(caller){ //hide all the submenus $("div [id$=_submenu]").hide(); //get the id of the main menu item var mainMenuItemId = $(caller).attr("id") //get the "on" class name var onclass = mainMenuItemId+"_on"; //get the "off" class name var offclass = mainMenuItemId+"_off"; //remove off class to item $(caller).removeClass(offclass); //assign on class to item $(caller).addClass(onclass); // get the id of the submenu var targetSubMenuId = mainMenuItemId+"_submenu"; //show the submenu $("#"+targetSubMenuId).slideDown("fast"); } function submenu_hide(caller){ //get the id of the main menu item var mainMenuItemId = $(caller).attr("id"); //get the "on" class name var onclass = mainMenuItemId+"_on"; //get the "off" class name var offclass = mainMenuItemId+"_off"; //remove on class to item $(caller).removeClass(onclass); //assign off class to item $(caller).addClass(offclass); timeouts[mainMenuItemId] = setTimeout(function() { $("#"+mainMenuItemId+"_submenu").slideUp("fast"); }, 200); } function submenu_over(caller){ //get a reference to the containing div var subMenuDiv = $(caller).closest("div"); //show the div $(subMenuDiv).show(); //get the id of the main menu var mainMenuItemId = $(subMenuDiv).attr("id"); mainMenuItemId = mainMenuItemId.replace("_submenu",""); clearTimeout(timeouts[mainMenuItemId]); //remove the "off" class $("#"+mainMenuItemId).removeClass(mainMenuItemId+"_off"); //add the "on" class $("#"+mainMenuItemId).addClass(mainMenuItemId+"_on"); } function submenu_out(caller){ //get a reference to the containing div var subMenuDiv = $(caller).closest("div"); $(subMenuDiv).hide(); //get the id of the main menu var menuAnchorId = $(subMenuDiv).attr("id"); menuAnchorId = menuAnchorId.replace("_submenu",""); //remove the "on" class $("#"+menuAnchorId).removeClass(menuAnchorId+"_on"); //add the "off class $("#"+menuAnchorId).addClass(menuAnchorId+"_off"); } Here is the CSS styling: /* graphical menu codes */ #topmenu ul { list-style: none; width: 738px; height:52px; padding:0; margin: 0px; position: absolute; top:94px; right:0; overflow: hidden; } #topmenu li { display: inline; position: absolute; } #topmenu li a{ float: left; font-size:11px; line-height: 14px; white-space: nowrap; text-transform: uppercase; text-align:center; padding: 0 0 0 0; text-indent:777px; overflow:hidden; height:52px; } #topmenu li a:hover { color: #bceffa; } a.on { color: #bceffa; } #topmenu a { color: #ffffff; text-decoration: none; } #topmenu a:hover { color: #bceffa; text-decoration: none; } .furs_off { background: url("graphics/topmenu2.gif") 0 0 no-repeat; width:66px; } .furs_on { background: url("graphics/topmenu2.gif") 0 -52px no-repeat; } .leather_off { background: url("graphics/topmenu2.gif") -66px 0 no-repeat; width:144px; } .leather_on{ background: url("graphics/topmenu2.gif") -66px -52px no-repeat; } .cashmere_off { background: url("graphics/topmenu2.gif") -210px 0 no-repeat; width:165px; } .cashmere_on{ background: url("graphics/topmenu2.gif") -210px -52px no-repeat; } .outerwear_off { background: url("graphics/topmenu2.gif") -374px 0 no-repeat; width:119px; } .outerwear_on{ background: url("graphics/topmenu2.gif") -374px -52px no-repeat; } .plus_off { background: url("graphics/topmenu2.gif") -493px 0 no-repeat; width:111px; } .plus_on{ background: url("graphics/topmenu2.gif") -493px -52px no-repeat; } .accessories_off { background: url("graphics/topmenu2.gif") -604px 0 no-repeat; width:133px; } .accessories_on{ background: url("graphics/topmenu2.gif") -604px -52px no-repeat; } ul.dropdown { list-style: none; margin: 0; padding: 0; border: none; z-index:10000; position:relative; } ul.dropdown li span { display: block; _display:inline-block; text-decoration: none; } ul.dropdown li a { display: block; position: relative; _display:inline-block; /* so IE doesn't add space between elements */ _width: 83%; /* makes block fill width in IE */ padding: 6px 10px 6px 10px; font-size: 13px; color: #ffffff; text-decoration: none; border-bottom:1px solid #b78833; } ul.dropdown li a:hover{ color: #ffffff; background: #e3a73a; text-decoration: none; } .dropdown span{ font-weight:bold; color:#64450f; margin:0 0 0 10px; } #furs_submenu { width:300px; padding: 5px 0; background: #c8912f; position: absolute; top: 146px; left: 260px; display: none; z-index:1000; } #leather_submenu { width:166px; padding: 5px 0; background: #c8912f; position: absolute; top: 146px; left: 325px; display: none; z-index:1000; } #cashmere_submenu { width:192px; padding: 5px 0; background: #c8912f; position: absolute; top: 146px; left: 470px; display: none; z-index:1000; } #plus_submenu { width:300px; padding: 5px 0; background: #c8912f; position: absolute; top: 146px; left: 698px; display: none; z-index:1000; } #accessories_submenu { width:158px; padding: 5px 0; background: #c8912f; position: absolute; top: 146px; left: 840px; display: none; z-index:1000; } Code:
$(document).ready(function(){
$("#logo,#menu").hover(
function () {
$("#menu").stop().slideDown('fast');
},
function () {
$("#menu").stop().slideUp('slow');
}
);
});
This menu slides down on hover and slides up on un hover. If I mouse back on either object while slideUp() is happening, the animation stops. Then if i un hover / re-hover , the menu slides down to where i interrupted the initial slideUp(). I'd like for the menu to drop back down if I interrupt slideUp() or some type of solution. How can I do this? need help adding a one second delay to a drop down menu. don't want people triggering it by accident: http://www.corneliodesign.com/menu/ i used hoverIntent to delay it: http://cherne.net/brian/resources/jq...verIntent.html i got the script in the http://www.corneliodesign.com/menu/s...hoverIntent.js but it's not actually working for me. please see if could look at code, tell what's wrong or gimme another options, would be extremely appreciative, thanks, julio Hi guys Im try to create a menu (http://valkesh.000space.com/) that will have 2 or 3 images loaded when hovering the item. As it currently is, I would like the first 20px to show green, and the rest to show Red. For now I am only using colors because eventually I would like to use images and have the Left and Right pics set at a fixed width and the center image growing appropriately. Below is the script I am using for the entire menu. Code: <html>
<head>
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
//Append a div with hover class to all the LI
$('#navMenu li').append('<div class="left"><div class="right"></div></div>');
$('#navMenu li').hover(
//Mouseover, fadeIn the hidden hover class
function() {
$(this).children('div').fadeIn('1000');
},
//Mouseout, fadeOut the hover class
function() {
$(this).children('div').fadeOut('1000');
}).click (function () {
//Add selected class if user clicked on it
$(this).addClass('selected');
});
});
//]]>
</script>
<style type="text/css">
#navMenu {
margin:0;
padding:0;
list-style:none;
font-family:arial;
text-align:center;
line-height:60px;
}
#navMenu li
{
background-color:Gray;
float:left;
width:120px;
height:40px;
line-height:40px;
border:solid 1px black;
position:relative;
}
#navMenu li a {
z-index:20;
display:block;
height:40px;
position:relative;
color:Black;
}
#navMenu li .left {
background-color:Green;
position:absolute;
width:20px;
height:40px;
top:0px;
z-index:0;
display:none;
}
#navMenu li .right {
background-color:Red;
position:absolute;
width:100px;
height:70px;
top:0px;
z-index:0;
display:none;
}
#navMenu li.selected {
background-color:Blue;
}
</style>
</head>
<body>
<ul id="navMenu">
<li><a href="#">Test 1</a></li>
<li><a href="#">Test 2</a></li>
<li><a href="#">Test 3</a></li>
</ul>
</body>
</html>
I would appreciate any help given! Thanks hi, I am fairly new to jquery and would like som direction on how to complete this menu. I have a list which has 6 bg images which have on and active state images. these are are currenly changing when you hover using the a:hover css. my question is i have a fairly large page and as you scroll down the menu follows the top of the screen but what i would like to happen is when the menu reaches a certain point on the page the menu item that it corrosponds to becomes active (changes to the on state bg image). i have an idea that as you scroll down the page and you get to a certain position on the page you would remove the classes for all of them. use the selecter to select my id and add a special class with that specific bg image on it. the only part i am struggling with is how would i determin how far down the page i am i know theres a function called .position() and you can use position.top. but not sure how i can use that to help me. if you could point me in the direction or just a hint that would be really helpful. thanks in advance Hello everyone, For some reason this jQuery/JavaScript code will not show my sub menus in my navigation bar. Here is the JavaScript: Code: $(function(){
var config = {
sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)
interval: 200, // number = milliseconds for onMouseOver polling interval
over: doOpen, // function = onMouseOver callback (REQUIRED)
timeout: 200, // number = milliseconds delay before onMouseOut
out: doClose // function = onMouseOut callback (REQUIRED)
};
function doOpen() {
$(this).addClass("hover");
$('ul:first',this).css('visibility', 'visible');
}
function doClose() {
$(this).removeClass("hover");
$('ul:first',this).css('visibility', 'hidden');
}
$("ul.pMenu li").hoverIntent(config);
$("ul.pMenu li ul li:has(ul)").find("a:first").append(" » ");
});
My css that corresponds to this is: Code: .pMenu{
margin:0;
padding:0;
}
#health{
width:10%;
padding-left:14%;
padding-right:2%;
}
#insurance{
width:13%;
padding-right:2%;
}
#shopping{
width:12%;
padding-right:2%;
}
#dating{
width:10%;
padding-right:2%;
}
#education{
width:13%;
}
ul.pMenu li{
float:left;
list-style:none;
}
ul.pMenu li a{
display:block;
color:#FFF;
background:#900;
border:3px ridge #C00;
text-decoration:none;
text-shadow:1px 1px 1px #000;
white-space:nowrap;
padding-left:2%;
padding-right:2%;
padding-top:10px;
padding-bottom:10px;
}
ul.pMenu li a:hover{
background:#FF0;
border:3px ridge #FF6;
color:#FF0;
}
ul.pMenu li ul{
margin:0;
padding:0;
position:absolute;
visibility:hidden;
}
ul.pMenu li ul li{
float:none;
display:inline;
}
ul.pMenu li ul li a{
width:auto;
background:#CCC;
border:1% outset #999;
font-size:95%;
padding:2%;
padding-left:4%;
padding-right:10%;
text-shadow:1px 1px 1px #000;
color:#000;
}
ul.pMenu li ul li a:hover{
background:#999;
border:1% inset #666;
text-decoration:blink;
}
ul.pMenu li ul li ul{
margin:0;
padding:0;
position:absolute;
visibility:hidden;
}
/*IE 6 & 7 need inline block feature*/
ul.pMenu ul li a{
border-right:none;
width:100%;
display:inline-block;
}
ul.pMenu li ul li ul li{
float:none;
display:inline;
}
ul.pMenu li ul li ul li a{
width:auto;
background:#999;
border:1% outset #666;
text-shadow:1px 1px 1px #000;
color:#FFF;
}
ul.pMenu li ul li ul li a:hover{
background:#999;
border:1% inset #666;
text-decoration:blink;
}
ul.pMenu li ul li ul li ul{
margin:0;
padding:0;
position:absolute;
visibility:hidden;
}
ul.pMenu li ul li ul li{
float:none;
display:inline;
}
ul.pMenu li ul li ul li a{
width:auto;
background:#999;
border:1% outset #666;
text-shadow:1px 1px 1px #000;
color:#FFF;
}
ul.pMenu li ul li ul li a:hover{
background:#999;
border:1% inset #666;
text-decoration:blink;
}
Hi I'm trying to add a jquery dropdown menu to my navigation bar. My navigation bar is coded properly But I can't figure out how to add a dropown menu to one of my navigation bar's menu items. I have the navigation bar set up as <div> <ul id="navbar"> <li id="home"><a href="home.html"><span>HOME</span></a></li> <li id="about"><a href="#"><span>ABOUT</span></a></li> <li id="gallery"><a href="#"><span>GALLERY</span></a></li> <li id="sources"><a href="#"><span>SOURCES</span></a></li> </ul> <!-- end navbar --> </div> and I want to add a two item dropdown menu to the Gallery item. Thanks in advance. I am trying to use the cut and paste OnMouseover Slideshow that is featured at the JavascriptKit.com. I'm getting a line error code which reads "Line:81 Error: Expected ';' I have tried everything I can think of to eliminate this error...seems I know just enough to be dangerous, not enough to debug. Can someone please help me? Or at least tell me if there's someplace specific in between the script tags or elsewhere that I need to look? Killing me in Kentucky, Pam For some reason after I modified the events.js script for my events, the events.js is not being read. I have reloaded the page, cleared the cache, and reinstalled the .js file. What is wrong? |
|||||||