SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Dec 2008
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    I need help making a drop down menu from a sub menu

    I have a drop line menu but I want to add a drop down menu from the submenu. can any one help?

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    body{
    font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    border:0; margin:0; padding:0;
    }
    ul, li{border:0; padding:0; margin:0; list-style:none;}

    /* NAV */
    #top-navigation{
    background:url(img/topnav-bg.gif) repeat-x;
    width:auto;
    height:48px;
    margin:0 auto;
    }
    #navigation{
    background:url(img/nav-bg.gif) repeat-x;
    height:32px;
    margin:0 auto;
    width:auto;
    }
    #navigation ul{
    height:32px;
    line-height:32px;
    }
    #navigation ul li{
    display:inline;
    }
    #navigation ul li a,
    #navigation ul li a:visited {
    background:url(img/line-a.gif) right no-repeat;
    padding:0 20px;
    display:block;
    text-decoration:none;
    float:left;
    color:#4261df;
    font-weight:bold;
    text-shadow: #ffffff 2px 2px 2px;
    }
    #navigation ul li a:hover{
    color:#1532a5;
    }
    /* SUBLINKS */
    #sublinks{
    width:auto;
    margin:0 auto;
    background:#888888 url(img/sublink.gif);
    height:30px;
    font-size:11px;
    }
    #sublinks ul{
    height:32px;
    line-height:31px;
    }
    #sublinks ul li{
    display:inline;
    }
    #sublinks ul li a,
    #sublinks ul li a:visited {
    padding:0 20px;
    display:block;
    text-decoration:none;
    float:left;
    color:#FFFFFF;
    }
    #sublinks ul li a:hover{
    text-decoration:underline;
    }
    /* SUBMENU */
    #s2, #s3{display:none;}

    </style>
    <script type="text/javascript">
    function showsubmenu(id){
    submenu=document.getElementById('s'+id);
    for(i=1;i<=3;i++){
    if(i==id){
    submenu.style.display="block";
    } else{
    document.getElementById('s'+i).style.display="none";
    }
    }
    }
    </script>
    </head>

    <body>
    <div id="top-navigation">
    </div>
    <div id="navigation">
    <ul id="mymenu">
    <li><a href="#" onmouseover="javascript:showsubmenu(1)">Home</a></li>
    <li><a href="#" onmouseover="javascript:showsubmenu(2)">tab2</a></li>
    <li><a href="#" onmouseover="javascript:showsubmenu(3)">tab3</a></li>
    <li><a href="#" onmouseover="javascript:showsubmenu(4)">tab4</a></li>
    <li><a href="contact.html">Contact</a></li>
    </ul>
    </div>
    <div id="sublinks">
    <ul id="s1">
    <li><a href="#">General</a></li>
    <li><a href="#">Information</a></li>
    <li><a href="#">News</a></li>
    </ul>
    <ul id="s2">
    <li><a href="#">Drama</a></li>
    <li><a href="#">Thriller</a></li>
    <li><a href="#">Action</a></li>
    <li><a href="#">Horror</a></li>
    <li><a href="#">Colossal</a></li>

    </ul>
    <ul id="s3">
    <li><a href="#">Rock</a></li>
    <li><a href="#">Pop</a></li>
    <li><a href="#">Classical</a></li>
    </ul>
    <ul id="s4">
    <li><a href="#">blah</a></li>
    <li><a href="#">blah</a></li>
    <li><a href="#">blah</a></li>
    </ul>
    </div>
    </body>
    </html>

  2. #2
    SitePoint Addict
    Join Date
    Jul 2005
    Location
    USA
    Posts
    291
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    check out the suckerfish menus.

    http://htmldog.com/articles/suckerfish/dropdowns/

    i think you might be able to integrate suckerfish into the s1/s2/s3/s4 menu items.

  3. #3
    SitePoint Member
    Join Date
    Dec 2008
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok i have it working BUT the 3rd and 4th drop downs dont seem to be working... any ideas? Im guessing im missing something.


    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    body{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    border:0; margin:0; padding:0;
    }
    ul, li{border:0; padding:0; margin:0; list-style:none;}

    /* NAV */
    #top-navigation{
    background:url(img/topnav-bg.gif) repeat-x;
    width:auto;
    height:48px;
    margin:0 auto;
    }
    #navigation{
    background:url(img/nav-bg.gif) repeat-x;
    height:32px;
    margin:0 auto;
    width:auto;
    }
    #navigation ul{
    height:32px;
    line-height:32px;
    }
    #navigation ul li{
    display:inline;
    }
    #navigation ul li a,
    #navigation ul li a:visited {
    background:url(img/line-a.gif) right no-repeat;
    padding:0 20px;
    display:block;
    text-decoration:none;
    float:left;
    color:#666666;
    font-weight:bold;

    }
    #navigation ul li a:hover{
    color:#fff;
    }



    /* my edit */
    #seconddropnav, #seconddropnav ul {
    width:auto;
    margin:0 auto;
    background:url(img/sublink.gif);
    font-size:11px;
    padding: 0;
    margin: 0;
    list-style: none;
    list-style-type:none;
    height:31px;
    line-height:31px;

    }

    #seconddropnav a {
    display: block;
    width: 122px;
    padding-left:5px;
    background-image:url(img/dropbg.png);
    color:#fff;
    text-decoration:none;

    }
    #seconddropnav a:hover {
    text-decoration:underline;
    background:#FF9900;

    }

    #seconddropnav li {
    float: left;
    width: 127px;
    color:#FFFFFF;



    }
    #seconddropnav li ul {

    line-height:31px;
    position: absolute;
    width: 127px;
    left: -999em;
    color:#FFF;
    }

    #seconddropnav li:hover ul {
    left: auto;
    }
    #seconddropnav li:hover ul, #nav li.sfhover ul {
    left: auto;

    }
    /* end */


    /* SUBMENU */
    #s2, #s3, #s4{display:none;}


    </style>

    <script type="text/javascript">
    function showsubmenu(id){
    submenu=document.getElementById('s'+id);
    for(i=1;i<=3;i++){
    if(i==id){
    submenu.style.display="block";
    } else{
    document.getElementById('s'+i).style.display="none";
    }
    }
    }
    </script>

    <!-- my edit -->
    <script type="text/javascript" language="javascript">
    sfHover = function() {
    var sfEls = document.getElementById("seconddropnav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
    sfEls[i].onmouseover=function() {
    this.className+=" sfhover";
    }
    sfEls[i].onmouseout=function() {
    this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    }
    }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);

    </script>

    <!--end-->



    </head>



    <body>
    <div id="top-navigation">
    </div>
    <div id="navigation">
    <ul id="mymenu">
    <li><a href="#" onmouseover="javascript:showsubmenu(1)">Home</a></li>
    <li><a href="#" onmouseover="javascript:showsubmenu(2)">Purely Apple</a></li>
    <li><a href="#" onmouseover="javascript:showsubmenu(3)">Purely GPS</a></li>
    <li><a href="#" onmouseover="javascript:showsubmenu(4)">Purely Software</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
    </div>
    <div id="seconddropnav">
    <ul id="s1">
    <li><a href="#">dropnav</a>
    <ul>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    </ul>
    </li>
    </ul>
    <!-- set2-->
    <ul id="s2">
    <li><a href="#">Macs</a>
    <ul>
    <li><a href="#">iMacs</a></li>
    <li><a href="#">Macbook Pro</a></li>
    <li><a href="#">mac mini</a></li>
    <li><a href="#">Air</a></li>
    <li><a href="#">Macs</a></li>

    </ul>
    </li>
    <li><a href="#">iPods</a>
    <ul>
    <li><a href="#">Touch</a></li>
    <li><a href="#">Classic</a></li>
    <li><a href="#">nano</a></li>
    <li><a href="#">shuffle</a></li>
    <li><a href="#">accessories</a></li>

    </ul>
    </li>
    <li><a href="#">Accessories</a>
    <ul>
    <li><a href="#">Headphones</a></li>
    <li><a href="#">Speakers</a></li>
    <li><a href="#">Chargers</a></li>
    <li><a href="#">cases</a></li>
    <li><a href="#">itunes vouchers</a></li>

    </ul>
    </li>
    <!-- end set 2-->
    <ul id="s3">
    <li><a href="#">Macs</a>
    <ul>
    <li><a href="#">iMacs</a></li>
    <li><a href="#">Macbook Pro</a></li>
    <li><a href="#">mac mini</a></li>
    <li><a href="#">Air</a></li>
    <li><a href="#">Macs</a></li>

    </ul>
    </li>
    <li><a href="#">iPods</a>
    <ul>
    <li><a href="#">Touch</a></li>
    <li><a href="#">Classic</a></li>
    <li><a href="#">nano</a></li>
    <li><a href="#">shuffle</a></li>
    <li><a href="#">accessories</a></li>

    </ul>
    </li>
    <li><a href="#">Accessories</a>
    <ul>
    <li><a href="#">Headphones</a></li>
    <li><a href="#">Speakers</a></li>
    <li><a href="#">Chargers</a></li>
    <li><a href="#">cases</a></li>
    <li><a href="#">itunes vouchers</a></li>

    </ul>
    </li>
    </div>

    </body>
    </html>

  4. #4
    SitePoint Addict
    Join Date
    Jul 2005
    Location
    USA
    Posts
    291
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    couple things
    1. there are some missing opening/closing UL tags
    2. anything beyond the third drop down won't appear because the showsubmenu function is set to stop at 3

    once those were changed it worked for me

  5. #5
    SitePoint Member
    Join Date
    Dec 2008
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok i have changed the funtion to 4 but i cant seem to work out where i need to put the ul tags, please point me in the right direction...

  6. #6
    SitePoint Member
    Join Date
    Dec 2008
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have it working in FF now but the drop downs wont appear in IE. using the script above can you advise me on where i need to put the UL tags please...


Tags for this Thread

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
  •