Javascript Jquery

Menu not showing up javascript/jquery

Page 1 of 1

0 Replies - 631 Views - Last Post: 13 November 2010 - 12:03 PM

#1 mlhamp  Icon User is offline

  • New D.I.C Head

Reputation: -1
  • View blog
  • Posts: 1
  • Joined: 13-November 10

Javascript Jquery

Posted 13 November 2010 - 12:03 PM

I'm trying to get the menu to show up and it won't.

Here is the 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&amp;catID=20529" id="furs">Furs</a></li>
				<li style="top: 0; left:66px"><a href="shop52df.html?action=cat&amp;catID=20541" id="leather">Leather & Fur</a></li>
				<li style="top: 0; left:210px"><a href="shop9e9f.html?action=cat&amp;catID=20575" id="cashmere">Cashmere & Fur</a></li>
				<li style="top: 0; left:374px"><a href="shop80c4.html?action=cat&amp;catID=21239" id="outerwear">Outerwear</a></li>
				<li style="top: 0; left:493px"><a href="shop0376.html?action=cat&amp;catID=20544" id="plus">Plus Sizes</a></li>
				<li style="top: 0; left:604px"><a href="shop2060.html?action=cat&amp;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&amp;catID=20572">Mink</a></li>
				<li><a href="shop2705.html?action=cat&amp;catID=20574">Sable</a></li>
				<li><a href="shop5c0d.html?action=cat&amp;catID=20570">Chinchilla</a></li>
				<li><a href="shopdfa7.html?action=cat&amp;catID=20568">Beaver</a></li>
				<li><a href="shop04fa.html?action=cat&amp;catID=20571">Lynx</a></li>
				<li><a href="shop65dc.html?action=cat&amp;catID=20569">Bobcat</a></li>
				<li><a href="shopc9fc.html?action=cat&amp;catID=20622">Coyote</a></li>
				<li><a href="shop65f8.html?action=cat&amp;catID=20539">Fox</a></li>
				<li><a href="shop3276.html?action=cat&amp;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&amp;catID=20531">Mink</a></li>
				<li><a href="errorfe10.html?action=cat&amp;catID=20532">Sable</a></li>
				<li><a href="errorfe10.html?action=cat&amp;catID=20533">Chinchilla</a></li>
				<li><a href="errorfe10.html?action=cat&amp;catID=20534">Beaver</a></li>
				<li><a href="errorfe10.html?action=cat&amp;catID=20535">Lynx</a></li>
				<li><a href="errorfe10.html?action=cat&amp;catID=20536">Bobcat</a></li>
				<li><a href="shopfc5b.html?action=cat&amp;catID=20618">Coyote</a></li>
				<li><a href="shop88e4.html?action=cat&amp;catID=20537">Fox</a></li>
				<li><a href="errorfe10.html?action=cat&amp;catID=20540">Rabbit</a></li>
   			 </ul>
   		</div>
   		
   		<div id="leather_submenu">
			<ul class="dropdown">
				<li><a href="shop973d.html?action=cat&amp;catID=20542">Women's Leather & Fur</a></li>
				<li><a href="shop4cc6.html?action=cat&amp;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&amp;catID=20576">Coats</a></li>
				<li><a href="shopd4d8.html?action=cat&amp;catID=20577">Strollers</a></li>
				<li><a href="shop7899.html?action=cat&amp;catID=20578">Jackets</a></li>
				<li><a href="shopcba4.html?action=cat&amp;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&amp;catID=20564">Mink</a></li>
				<li><a href="shop807e.html?action=cat&amp;catID=20566">Sable</a></li>
				<li><a href="shopbc8f.html?action=cat&amp;catID=20557">Chinchilla</a></li>
				<li><a href="shopcb16.html?action=cat&amp;catID=20553">Beaver</a></li>
				<li><a href="shop3cb8.html?action=cat&amp;catID=20561">Lynx</a></li>
				<li><a href="shopb6e3.html?action=cat&amp;catID=20555">Bobcat</a></li>
				<li><a href="shop1e6c.html?action=cat&amp;catID=20621">Coyote</a></li>
				<li><a href="shopc08b.html?action=cat&amp;catID=20559">Fox</a></li>
				<li><a href="shop0495.html?action=cat&amp;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&amp;catID=20565">Mink</a></li>
				<li><a href="shop10dc.html?action=cat&amp;catID=20567">Sable</a></li>
				<li><a href="shop8154.html?action=cat&amp;catID=20556">Chinchilla</a></li>
				<li><a href="shop0b63.html?action=cat&amp;catID=20551">Beaver</a></li>
				<li><a href="shopa40f.html?action=cat&amp;catID=20560">Lynx</a></li>
				<li><a href="shopd843.html?action=cat&amp;catID=20554">Bobcat</a></li>
				<li><a href="shopa2c0.html?action=cat&amp;catID=20620">Coyote</a></li>
				<li><a href="shopb0b2.html?action=cat&amp;catID=20558">Fox</a></li>
				<li><a href="shopd3b0.html?action=cat&amp;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&amp;catID=20549">Women's Leather & Fur</a></li>
				<li><a href="shop8605.html?action=cat&amp;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&amp;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&amp;catID=20581">Fur Hats</a></li>
				<li><a href="shop9989.html?action=cat&amp;catID=20582">Fur Headbands</a></li>
				<li><a href="shop935f.html?action=cat&amp;catID=20583">Fur Earmuffs</a></li>
				<li><a href="shopd2bf.html?action=cat&amp;catID=20584">Gloves with Fur</a></li>
				<li><a href="shop2c08.html?action=cat&amp;catID=20585">Fur Boot Toppers</a></li>
				<li><a href="shop9f4f.html?action=cat&amp;catID=20586">Fur Scarves & Flings</a></li>
				<li><a href="shop3d06.html?action=cat&amp;catID=20587">Fur Blankets</a></li>
				<li><a href="shop4bf4.html?action=cat&amp;catID=20588">Fur Handbags</a></li>
				<li><a href="shop611a.html?action=cat&amp;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;
}


Is This A Good Question/Topic? -1
  • +

Page 1 of 1