Everybody! This is important. In a few days, these forums will be moving over to using the totally sweet Discourse platform. To ensure this migration happens smoothly with no loss of content, these forums are currently in a read-only mode. I do apologize for the inconvenience.

There is never a good time to turn the forums off for an extended period of time, but I promise the new forums will be a billion times better. I'm pretty sure of it.

See you all on the other side in a few days, and if you have any (non-technical) questions, please e-mail me at kirupa@kirupa.com. For technical questions, try to find a tutorial that corresponds to what you are looking for and post in the comments section of that page.

Cheers,
Kirupa

Results 1 to 13 of 13

Thread: css dropdown menu like this one

  1. #1
    berkoWitZ's Avatar
    3,287
    posts
    Me cago en quien lee esto

    css dropdown menu like this one

    does anybody know where I can find a tut to make a menu like the one in www.download.com? when u click a button a dropdown menu appears with the subdivisions...? thanks!
    Attached Images Attached Images  

  2. #2
    to me it looks as if they just created new pages like that... doesn't seem as if there is any special functions goin on.
    Let us live so that when we come to die even the undertaker will be sorry. - Mark Twain
    Don't PM me your CSS, xHTML, JS or PHP questions. I will not reply to ANY IE6 questions.

  3. #3
    berkoWitZ's Avatar
    3,287
    posts
    Me cago en quien lee esto
    yes youre right I didnt notice and its an option do it that way...but still the idea is what Im looking for, if anyone has some clue that would be great

  4. #4
    You could use CSS and Javascript... here's a working sample.

    HTML 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" lang="en" xml:lang="en">
     <head>
      <title>Example</title>
      <style type="text/css">
    *{ margin: 0; padding: 0; font-family: Verdana, Helvetica, Arial, Sans-serif; }
    
    body{
      margin: 0 auto;
      text-align: center;
      background: #fff;
      color: #000;
      font-size: 62.5%;
    }
    
    #container{
      margin: 0 auto;
      text-align: left;
      width: 760px;
    }
    
    #menu{ width: 210px; }
    h1{ margin-top: 5px; font-size: 1em; color: #900; }
    h1 a{ color: #900; text-decoration: none; }
    ul{ list-style: none; }
    ul li{ margin: 0; padding: 0 0 0 10px; }
    ul li a{ display: block; background: #fff; margin: 0; width: 100%; border-bottom: 1px solid #eee; padding: 5px 2px; text-decoration: none; color: #00f; }
    
    .show{ display: block; }
    .hide{ display: none; }
      </style>
    
      <script type="text/javascript">
    function mClick(ID){
      if(document[ID] == 'show'){
        document[ID] = 'hide';
        hide(ID);
      }else{
        document[ID] = 'show';
        show(ID);
      }
    }
    
    function show(ID){
      if(document.getElementById){ var obj= document.getElementById(ID); }
      else if(document.all){ var obj = document.all.ID; }
      else if(document.layers){ var obj = document.ID; }
      obj.className = "show";
    }
    
    function hide(ID){
      if(document.getElementById){ var obj= document.getElementById(ID); }
      else if(document.all){ var obj = document.all.ID; }
      else if(document.layers){ var obj = document.ID; }
      obj.className = "hide";
    }
      </script>
    
     </head>
     <body><div id="container">
      <div id="menu">
    
       <h1><a href="javascript:void(0)" onclick="mClick('menu1')">Browsers</a></h1>
       <div id="menu1" class="hide">
        <ul>
         <li><a href="#">Firefox</a></li>
         <li><a href="#">IE</a></li>
         <li><a href="#">Netscape</a></li>
         <li><a href="#">Opera</a></li>
         <li><a href="#">Safari</a></li>
        </ul>
       </div>
    
       <h1><a href="javascript:void(0)" onclick="mClick('menu2')">Languages</a></h1>
       <div id="menu2" class="hide">
        <ul>
         <li><a href="#">.NET</a></li>
         <li><a href="#">ASP</a></li>
         <li><a href="#">C/C++</a></li>
         <li><a href="#">Java</a></li>
         <li><a href="#">Javascript</a></li>
         <li><a href="#">PHP</a></li>
        </ul>
       </div>
    
       <h1><a href="javascript:void(0)" onclick="mClick('menu3')">Search</a></h1>
       <div id="menu3" class="hide">
        <ul>
         <li><a href="#">Google</a></li>
         <li><a href="#">Yahoo</a></li>
        </ul>
       </div>
    
       <h1><a href="javascript:void(0)" onclick="mClick('menu4')">More...</a></h1>
       <div id="menu4" class="hide">
        <ul>
         <li><a href="#">Here</a></li>
         <li><a href="#">Are</a></li>
         <li><a href="#">More</a></li>
         <li><a href="#">Samples</a></li>
        </ul>
       </div>
    
      </div>
    
     </div></body>
    </html>
    Γνώθι Σεαυτόν

  5. #5
    Opps... I took this from one of my old scripts and I don't think I cleaned it as best as I could have.

    HTML Code:
    function mClick(ID){
      if(document[ID] == 'show'){
        document[ID] = 'hide';
        hide(ID);
      }else{
        document[ID] = 'show';
        show(ID);
      }
    }
    I don't think you need the lines:
    HTML Code:
        document[ID] = 'hide';
        document[ID] = 'show';
    Sorry about that.
    Γνώθι Σεαυτόν

  6. #6
    berkoWitZ's Avatar
    3,287
    posts
    Me cago en quien lee esto
    great thanks! Ill give it a try and report waht happened

  7. #7
    No prob. I should mention that I only checked the code in IE 6, 5.5, Firefox and Opera (all on Windows). But I did take the code from some old code I had laying around and I usually check to make sure it all works on as many browsers and OSes that I can. I'm fairly certain it'll work on a number of browser, but if not, let me know and I'll help the best I can.
    Γνώθι Σεαυτόν

  8. #8
    berkoWitZ's Avatar
    3,287
    posts
    Me cago en quien lee esto
    works beautiful one question...when I click a button all the button divisions appear..perfect...but when I click another one the options of the other button still show, how can I make them collapse?

  9. #9
    You mean you only want one "submenu" to show at any given time?

    Before you show the one currently being clicked, collapse all the menus and then open the one they user clicked on...

    Here's the change to the code. This is more like my original script I have on file. With this one clicking on an already expanded menu item will collapse the submenu. And it you click on a non-expanded menu item then only that submenu will expand (the rest will collapse if open) -- the way you want it I believe.

    For this one though you need to include the menu ids as variables in the javascript (var menu1 = 'hide'; etc.) as well as the total number of menu items you have (var numberOfMenus = 4; ). There are ways around that, I just didn't feel like recoding something from scratch right now. :p

    HTML 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" lang="en" xml:lang="en">
     <head>
      <title>Example</title>
      <style type="text/css">
    *{ margin: 0; padding: 0; font-family: Verdana, Helvetica, Arial, Sans-serif; }
    
    body{
      margin: 0 auto;
      text-align: center;
      background: #fff;
      color: #000;
      font-size: 62.5%;
    }
    
    #container{
      margin: 0 auto;
      text-align: left;
      width: 760px;
    }
    
    #menu{ width: 210px; }
    h1{ margin-top: 5px; font-size: 1em; color: #900; }
    h1 a{ color: #900; text-decoration: none; }
    ul{ list-style: none; }
    ul li{ margin: 0; padding: 0 0 0 10px; }
    ul li a{ display: block; background: #fff; margin: 0; width: 100%; border-bottom: 1px solid #eee; padding: 5px 2px; text-decoration: none; color: #00f; }
    
    .show{ display: block; }
    .hide{ display: none; }
      </style>
    
      <script type="text/javascript">
    var numberOfMenus = 4;
    
    var menu1 = 'hide';
    var menu2 = 'hide';
    var menu3 = 'hide';
    var menu4 = 'hide';
    var menu5 = 'hide';
    
    
    function mClick(ID){
      if(document[ID] == 'show'){
        hide(ID);
      }else{
        show(ID);
      }
    }
    
    function show(ID){
      for(i = 1; i <= numberOfMenus; i++){
        hideMenu = "menu" + i;
        hide(hideMenu);
      }
    
      if(document.getElementById){ var obj= document.getElementById(ID); }
      else if(document.all){ var obj = document.all.ID; }
      else if(document.layers){ var obj = document.ID; }
      obj.className = "show";
    
      document[ID] = 'show';
    }
    
    function hide(ID){
      if(document.getElementById){ var obj= document.getElementById(ID); }
      else if(document.all){ var obj = document.all.ID; }
      else if(document.layers){ var obj = document.ID; }
      obj.className = "hide";
    
      document[ID] = 'hide';
    }
      </script>
    
     </head>
     <body><div id="container">
      <div id="menu">
    
       <h1><a href="javascript:void(0)" onclick="mClick('menu1')">Browsers</a></h1>
       <div id="menu1" class="hide">
        <ul>
         <li><a href="#">Firefox</a></li>
         <li><a href="#">IE</a></li>
         <li><a href="#">Netscape</a></li>
         <li><a href="#">Opera</a></li>
         <li><a href="#">Safari</a></li>
        </ul>
       </div>
    
       <h1><a href="javascript:void(0)" onclick="mClick('menu2')">Languages</a></h1>
       <div id="menu2" class="hide">
        <ul>
         <li><a href="#">.NET</a></li>
         <li><a href="#">ASP</a></li>
         <li><a href="#">C/C++</a></li>
         <li><a href="#">Java</a></li>
         <li><a href="#">Javascript</a></li>
         <li><a href="#">PHP</a></li>
        </ul>
       </div>
    
       <h1><a href="javascript:void(0)" onclick="mClick('menu3')">Search</a></h1>
       <div id="menu3" class="hide">
        <ul>
         <li><a href="#">Google</a></li>
         <li><a href="#">Yahoo</a></li>
        </ul>
       </div>
    
       <h1><a href="javascript:void(0)" onclick="mClick('menu4')">More...</a></h1>
       <div id="menu4" class="hide">
        <ul>
         <li><a href="#">Here</a></li>
         <li><a href="#">Are</a></li>
         <li><a href="#">More</a></li>
         <li><a href="#">Samples</a></li>
        </ul>
       </div>
    
      </div>
    
     </div></body>
    </html>
    Γνώθι Σεαυτόν

  10. #10
    berkoWitZ's Avatar
    3,287
    posts
    Me cago en quien lee esto
    thats what I was looking for thanks! I know some stuff but Im learning with this code, Im going to give it a shot again adding more submenus and stuff...I have the feeling Ill ask something more later

  11. #11
    No problem. Actually if you're building your menus and new javascript for your site based on the code above, you might find better luck with nested lists. I only went with divs and lists because it worked for what I needed.

    Good luck, and if you have any questions I'll try my best to help.
    Γνώθι Σεαυτόν

  12. #12
    Hi people,

    How can i remove the blue lines between the submenus?

    Thank you in advance...

    Your great..

    DRMIR@ND@

  13. #13
    remove the border code
    Let us live so that when we come to die even the undertaker will be sorry. - Mark Twain
    Don't PM me your CSS, xHTML, JS or PHP questions. I will not reply to ANY IE6 questions.

Thread Information

Users Browsing this Thread

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

Posting Permissions

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

Home About kirupa.com Meet the Moderators Advertise

 Link to Us

 Credits

Copyright 1999 - 2012