#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2006
    Posts
    176
    Rep Power
    0

    Drop Down Menu help....


    I have made a menu which I love because it is the layout that I want.
    However, I am having problems with the menu when I try to add a "Drop Down" feature to it.

    The menu I currently have and use is:
    http://www.gc40.com/menu2.html



    I would like to turn some of the tabs like services into a drop down menu. I found a script that was a drop down menu and I tried to customize it to match my original menu but failed.
    The script that I found is: http://www.gc40.com/menu1.html

    Is there anyone that can customize http://www.gc40.com/menu2.html for me using http://www.gc40.com/menu1.html so that I can have drop down capabilities?

    I would really appreciate the help. Thanks guys.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2006
    Posts
    176
    Rep Power
    0
    Oh, by the way, I do not want to limit anyone to that drop down menu...Use any drop down menu you want, I just want to get it customized to the looks of menu2.html...Thanks guys...
  4. #3
  5. Super Moderator
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jul 2003
    Location
    London, UK
    Posts
    4,005
    Rep Power
    2795
    I don't have time to make it much better than that, the rest is up to you.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>MENU 1</title>
    <style type="text/css">
    
    /*Credits: Dynamic Drive CSS Library */
    /*URL: http://www.dynamicdrive.com/style/ */
    
    .suckertreemenu {
      margin-top: 15px;
      width: 798px;
      text-align: center;
      background-image: url('menuback.gif');
      background-repeat: repeat-x;
      background-position: 0% 100%;
      border-top: 1px solid #c7cbe2;
      border-bottom: 1px solid #c7cbe2
    }
    
    .suckertreemenu ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    }
    
    
    /*Top level list items*/
    .suckertreemenu ul li{
    position: relative;
    display: inline;
    float: left;
    }
    
    /*Top level menu link items style*/
    .suckertreemenu ul li a{
    display: block;
    width: 90px; /*Width of top level menu link items*/
    text-decoration: none;
    font-weight: bold;
    color: #1450a0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    line-height: 23px;
    font-size: 0.7em
    }
    	
    /*1st sub level menu*/
    .suckertreemenu ul li ul{
    left: 0;
    position: absolute;
    top: 1em; /* no need to change, as true value set by script */
    display: block;
    visibility: hidden;
    }
    
    /*Sub level menu list items (undo style from Top level List Items)*/
    .suckertreemenu ul li ul li{
    display: list-item;
    float: 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;
    }
    
    /* Sub level menu links style */
    .suckertreemenu ul li ul li a{
    display: block;
    width: 160px; /*width of sub menu levels*/
    color: navy;
    text-decoration: none;
    padding: 1px 5px;
    
    }
    
    .suckertreemenu ul li a:hover{
    color: #a79753;
    }
    
    /*Background image for top level menu list links */
    .suckertreemenu .mainfoldericon{
    background: url(arrow-down.gif) no-repeat center right;
    }
    
    /*Background image for subsequent level menu list links */
    .suckertreemenu .subfoldericon{
    background: url(arrow-right.gif) no-repeat center right;
    }
    
    * html p#iepara{ /*For a paragraph (if any) that immediately follows suckertree menu, add 1em top spacing between the two in IE*/
    padding-top: 1em;
    }
    	
    /* Holly Hack for IE \*/
    * html .suckertreemenu ul li { float: left; height: 1%; }
    * html .suckertreemenu ul li a { height: 1%; }
    /* End */
    
    </style>
    
    <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>
    
    </head>
    
    <body>
    
    <div class="suckertreemenu">
    <ul id="treemenu1">
    
    <li><a href="#" style="margin-right:5px;">Home</a></li>
    <li><a href="#" style="margin-right:15px;">Store</a></li>
    <li><a href="#" style="margin-right:45px;">Services</a>
      <ul>
      <li><a href="#">Sub Item 1.1</a></li>
      <li><a href="#">Sub Item 1.2</a></li>
      <li><a href="#">Sub Item 1.3</a></li>
    
      <li><a href="#">Sub Item 1.4</a></li>
      </ul>
    </li>
    <li><a href="#" style="margin-right:20px;">Portfolio</a></li>
    <li><a href="#" style="margin-right:25px;">About Us</a>
      <ul>
      <li><a href="#">Sub Item 2.1</a></li>
      <li><a href="#">Folder 2.1</a>
    
        <ul>
        <li><a href="#">Sub Item 2.1.1</a></li>
        <li><a href="#">Sub Item 2.1.2</a></li>
        <li><a href="#">Sub Item 2.1.3</a></li>
        <li><a href="#">Sub Item 2.1.4</a></li>
        </ul>
      </li>
    
    </ul>
    </a>
    </li>
    <li><a href="#" style="margin-right:15px;">Contact Us</a></li>
    <li><a href="#">Support</a></li>
    </ul>
    <br style="clear: left;" />
    </div>
    
    <p id="iepara">Rest of content here</p>
    
    </body>
    </html>
    [PHP] | [Perl] | [Python] | [Java] != [JavaScript] | [XML] | [C] | [C++] | [LUA] | [MySQL] | [FirebirdSQL] | [PostgreSQL] | [HTML] | [XHTML] | [CSS]
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2006
    Posts
    176
    Rep Power
    0
    Hey dude, thanks for taking your time. Appreciate it. There is a problem though. I just read the author of the script. It does NOT work in IE 5+....Therefore I am going to need another drop down menu. Anyone?
  8. #5
  9. Super Moderator
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jul 2003
    Location
    London, UK
    Posts
    4,005
    Rep Power
    2795
    Now it works in IE.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>MENU 1</title>
    <style type="text/css">
    
    /*Credits: Dynamic Drive CSS Library */
    /*URL: http://www.dynamicdrive.com/style/ */
    
    div.menucontainer {
      width: 100%;
      indent: 50%;
    }
    
    .suckertreemenu {
      margin-top: 15px;
      width: 798px;
      text-align: center;
      background-image: url('menuback.gif');
      background-repeat: repeat-x;
      background-position: 0% 100%;
      border-top: 1px solid #c7cbe2;
      border-bottom: 1px solid #c7cbe2
    }
    
    .suckertreemenu ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    }
    
    
    /*Top level list items*/
    .suckertreemenu ul li{
    position: relative;
    display: inline;
    float: left;
    }
    
    /*Top level menu link items style*/
    .suckertreemenu ul li a{
    display: block;
    width: 90px; /*Width of top level menu link items*/
    text-decoration: none;
    font-weight: bold;
    color: #1450a0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    line-height: 23px;
    font-size: 0.7em
    }
    	
    /*1st sub level menu*/
    .suckertreemenu ul li ul{
    left: 0;
    position: absolute;
    top: 0px; /* no need to change, as true value set by script */
    display: block;
    visibility: hidden;
    }
    
    /*Sub level menu list items (undo style from Top level List Items)*/
    .suckertreemenu ul li ul li{
    display: list-item;
    float: 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;
    }
    
    /* Sub level menu links style */
    .suckertreemenu ul li ul li a{
    background-color: #fff;
    display: block;
    width: 160px; /*width of sub menu levels*/
    color: navy;
    text-decoration: none;
    padding: 1px 5px;
    }
    
    .suckertreemenu ul li ul{
      border-top: 1px solid #c7cbe2;
    }
    
    .suckertreemenu ul li a:hover{
    color: #a79753;
    }
    
    /*Background image for top level menu list links */
    .suckertreemenu .mainfoldericon{
    background: url(arrow-down.gif) no-repeat center right;
    }
    
    /*Background image for subsequent level menu list links */
    .suckertreemenu .subfoldericon{
    background: url(arrow-right.gif) no-repeat center right;
    }
    
    * html p#iepara{ /*For a paragraph (if any) that immediately follows suckertree menu, add 1em top spacing between the two in IE*/
    padding-top: 1em;
    }
    	
    /* Holly Hack for IE \*/
    * html .suckertreemenu ul li { float: left; height: 1%; }
    * html .suckertreemenu ul li a { height: 1%; }
    /* End */
    
    </style>
    
    <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>
    
    </head>
    
    <body>
    <div id="menucontainter">
    <div class="suckertreemenu">
    <ul id="treemenu1">
    
    <li><a href="#" style="margin-right:5px;">Home</a></li>
    <li><a href="#" style="margin-right:15px;">Store</a></li>
    <li><a href="#" style="margin-right:45px;">Services</a>
      <ul>
      <li><a href="#">Sub Item 1.1</a></li>
      <li><a href="#">Sub Item 1.2</a></li>
      <li><a href="#">Sub Item 1.3</a></li>
    
      <li><a href="#">Sub Item 1.4</a></li>
      </ul>
    </li>
    <li><a href="#" style="margin-right:20px;">Portfolio</a></li>
    <li><a href="#" style="margin-right:25px;">About Us</a>
      <ul>
      <li><a href="#">Sub Item 2.1</a></li>
      <li><a href="#">Folder 2.1</a>
    
        <ul>
        <li><a href="#">Sub Item 2.1.1</a></li>
        <li><a href="#">Sub Item 2.1.2</a></li>
        <li><a href="#">Sub Item 2.1.3</a></li>
        <li><a href="#">Sub Item 2.1.4</a></li>
        </ul>
      </li>
    
    </ul>
    </a>
    </li>
    <li><a href="#" style="margin-right:15px;">Contact Us</a></li>
    <li><a href="#">Support</a></li>
    </ul>
    <br style="clear: left;" />
    </div>
    </div>
    
    <p id="iepara">Rest of content here</p>
    
    </body>
    </html>
    [PHP] | [Perl] | [Python] | [Java] != [JavaScript] | [XML] | [C] | [C++] | [LUA] | [MySQL] | [FirebirdSQL] | [PostgreSQL] | [HTML] | [XHTML] | [CSS]

IMN logo majestic logo threadwatch logo seochat tools logo