Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    jquery active menu help

    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&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);
    }
    &nbsp;

    });

    //assign hover events to submenu
    $("div [id$=_submenu]").hover(
    function (event) {
    submenu_over(event.target);
    },
    function (event) {
    submenu_out(event.target);
    }
    &nbsp;


    }


    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;
    }

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,081
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    So what is the problem? We are not clairvoyant. Please say what you want to happen.


    BTW, when posting here please help us to help you by following the posting guidelines and wrapping your code in CODE tags. This means use the octothorpe or # button on the toolbar which will insert the tags. You can (and should) edit your previous post.
    Example:-
    Code:
    alert ("This is some JavaScript code!");
    It should be obvious why this is necessary.


  •  

    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
    •