Css dropdown menu like this one

berkoWitZ · March 21, 2006, 7:45pm

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…? :cantlook: thanks!

simplistik · March 21, 2006, 9:09pm

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.

berkoWitZ · March 21, 2006, 10:32pm

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

Ankou · March 21, 2006, 10:47pm

You could use CSS and Javascript… here’s a working sample.


<!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>

Ankou · March 21, 2006, 10:51pm

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

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:


    document[ID] = 'hide';
    document[ID] = 'show';

Sorry about that.

berkoWitZ · March 22, 2006, 12:54am

great thanks! Ill give it a try and report waht happened

Ankou · March 22, 2006, 1:01am

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.

berkoWitZ · March 22, 2006, 4:32pm

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?

Ankou · March 22, 2006, 8:10pm

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.

<!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>

berkoWitZ · March 23, 2006, 11:24pm

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

Ankou · March 24, 2006, 1:06am

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.

DRMir_nd · April 4, 2006, 2:25pm

Hi people,

How can i remove the blue lines between the submenus?

Thank you in advance…

Your great…

DRMIR@ND@

simplistik · April 4, 2006, 3:37pm

remove the border code

Topic		Replies	Views
Dropdown menus like on this forum	0	93	April 29, 2004
Dropdown menus like on this forum	0	68	April 29, 2004
Stylizing a Dropdown Menu web dev	0	75	September 8, 2007
Help needed with CSS drop down menu web dev	0	213	November 20, 2012
Css help needed	3	63	August 4, 2004

Css dropdown menu like this one

Follow:

Popular

Loose Ends

Css dropdown menu like this one

Related topics

Follow:

Popular

Loose Ends