www.webdeveloper.com
Results 1 to 1 of 1

Thread: jquery active menu not working

  1. #1
    Join Date
    Nov 2010
    Posts
    1

    jquery active menu not working

    Can someone help me with this issue:

    Here is my HTML for the menu:
    Code:
    	link rel="stylesheet" type="text/css" href="activemenu.css" />
    	<script src="jquery-activemenu.js" type="text/javascript"></script>
    	
    	<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="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>




    Here is the javascript:


    Code:
    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:
    Code:
    /* 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&#37;; /* 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;
    }
    Last edited by Fang; 11-14-2010 at 09:11 AM. Reason: added BB Code http://www.webdeveloper.com/forum/misc.php?do=bbcode

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center

"

"

X vBulletin 4.2.2 Debug Information

  • Page Generation 0.16270 seconds
  • Memory Usage 2,867KB
  • Queries Executed 13 (?)
More Information
Template Usage (32):
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (3)bbcode_code
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (1)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (1)postbit
  • (1)postbit_onlinestatus
  • (1)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (71):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates