Results 1 to 2 of 2

Thread: SuckerTree Horizontal Menu Issue

  1. #1
    Join Date
    Aug 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default SuckerTree Horizontal Menu Issue

    1) Script Title: SuckerTree Horizontal Menu

    2) Script URL (on DD): http://www.dynamicdrive.com/style/cs...nu-horizontal/

    3) Describe problem: I need to remove the gap space between the drop down categories, but I cannot figure it out. My menu is located at www.e4deal.com. Thanks for your help.
    Here is the code:

    <!-- drop down menu code -->

    <style type="text/css">

    /*Credits: Dynamic Drive CSS Library */
    /*URL: http://www.dynamicdrive.com/style/ */

    .suckertreemenu ul{
    margin: 0;
    padding: 0 0 0 0;
    list-style-type: none;
    background-color: black; /*overall menu background color*/
    }

    .home {
    background-image: url("<?=DIR_WS_TEMPLATE_IMAGES;?>menu_tab_ora.gif") !important;
    }

    .home a{
    background-image: url("<?=DIR_WS_TEMPLATE_IMAGES;?>menu_tab_ora.gif") !important;
    text-decoration:none;
    background-color:#FFFFFF;
    }

    /*Top level list items*/
    .suckertreemenu ul li{
    position: relative;
    display: inline;
    float: left;
    background-image: url("<?=DIR_WS_TEMPLATE_IMAGES;?>menu_tab_blk.gif");
    background-repeat:no-repeat;
    width: 80px;
    height: 30px;
    margin-top: 0px;
    }

    /*Top level menu link items style*/
    .suckertreemenu ul li a{
    display: block;
    width: auto; /*Width of top level menu link items*/
    height: 15px;
    padding: 2px 1px;
    border: 0px solid black;
    border-left-width: 0;
    text-decoration: none;
    color: white;
    background-image: url("<?=DIR_WS_TEMPLATE_IMAGES;?>menu_tab_blk.gif");
    }

    /*1st sub level menu*/
    .suckertreemenu ul li ul{
    left: 0;
    position: absolute;
    text-align: left;
    padding-left: 5px;
    width: 130px;
    top: 1em; /* no need to change, as true value set by script */
    display: block;
    visibility: hidden;
    background-color: black; /*overall menu background color*/
    }

    /*Sub level menu list items (undo style from Top level List Items)*/
    .suckertreemenu ul li ul li{
    display: list-item;
    float: none;
    background:none;
    }

    /*All subsequent sub menu levels offset after 1st level sub menu */
    .suckertreemenu ul li ul li ul{
    left: 159px; /* no need to change, as true value set by script */
    top: 0;
    background:none;
    height:auto;
    }

    /* Sub level menu links style */
    .suckertreemenu ul li ul li a{
    display: block;
    width: 120px; /*width of sub menu levels*/
    color: white;
    text-decoration: none;
    border: 0px solid #ccc;
    background:none;
    background-color:black;
    }

    .suckertreemenu ul li a:hover{
    background-color:#5b5b5b;
    color: white;
    height:15px;
    }

    * html p#iepara{ /*For a paragraph (if any) that immediately follows suckertree menu, add 1em top spacing between the two in IE*/


    /* Holly Hack for IE \*/
    * html .suckertreemenu ul li { float: left; height: 1&#37;; }
    * html .suckertreemenu ul li a { height: 1%; }
    /* End */

    ul #treemenu1 li{
    height:20px;
    }
    </style>

    <!-- BOF ==================================== DHTML ==================================== -->
    <link rel="stylesheet" href=" az_popup.css" media="print,screen" type="text/css" />
    <script type="text/javascript">

    //SuckerTree Horizontal Menu (Sept 14th, 06)
    //By Dynamic Drive: http://www.dynamicdrive.com/style/

    var menuids=["treemenu1"] //Enter id(s) of SuckerTree UL menus, separated by commas

    function buildsubmenus_horizontal(){
    for (var i=0; i<menuids.length; i++){
    var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
    if (ultags[t].parentNode.parentNode.id==menuids[i]){ //if this is a first level submenu
    ultags[t].style.top=ultags[t].parentNode.offsetHeight+"px"//dynamically position first level submenus to be height of main menu item
    ultags[t].parentNode.getElementsByTagName("a")[0].className="mainfoldericon"
    }
    else{ //else if this is a sub level menu (ul)
    ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
    ultags[t].parentNode.getElementsByTagName("a")[0].className="subfoldericon"
    }
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.visibility="visible"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.visibility="hidden"
    }
    }
    }
    }

    if (window.addEventListener)
    window.addEventListener("load", buildsubmenus_horizontal, false)
    else if (window.attachEvent)
    window.attachEvent("onload", buildsubmenus_horizontal)

    </script>

    <!-- end of drop down menu code -->
    Last edited by mark90196; 08-13-2007 at 11:56 PM.

  2. #2
    Join Date
    Aug 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Update; I have solved this issue now, thanks anyway.

Bookmarks

Posting Permissions

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