How Do You Make A Dropdown Menu?

DjLuki

Feb 2 2007, 03:14 AM

Hi, i want to know how to make a horizontal drop down menu with css? i am not talking about the ones that have like an arrow where you click for options.. but when you hover over the buttons, other buttons drop down below..i have seen some tutorials but i couldn't understand how they did it.. so if anybody knows how to make one and if you can put it here or if you have a link where i can find some.. that would be great..
Thanks

sylenzednuke

Feb 2 2007, 03:37 AM

Though not a big help, maybe this site will solve your problem.

http://tutorials.alsacreations.com/deroulant/

DjLuki

Feb 2 2007, 03:58 AM

ok thanks, that looks like it will help me.. it has what im looking for but i will try tomorrow see what i can do.. i have to do some homework now. thanks for the reply.

jlhaslip

Feb 2 2007, 05:12 AM

Check also at http://www.cssplay.co.uk.

They have a whole variety of drop-down and fly-out menus available. Entirely css and no javascript.

matak

Feb 2 2007, 06:43 AM

you can check this menu to

http://www.sperling.com/examples/menuh/

it uses something called csshover.htc to cover errors in internet explorer...

EDIT: here's one tut on popular "sliding doors technique

http://www.alistapart.com/articles/horizdropdowns

jlhaslip

Feb 5 2007, 11:00 PM

DjLuki,

Topic re-opened for you to post your code into.

Let us know when you want it closed as resolved... by self-reporting it.
Thanks.

Autumn

Feb 5 2007, 11:08 PM

You may also want to check out:

www.apycom.com

They have a few decent horizontal and vertical menus.

DjLuki

Feb 5 2007, 11:08 PM

ok, first thanks for re-opening my topic,, now if somebody can help me with what i want to chieve witht his menu bar, i would appreciate it..

CODE

CSS CODE

#menu
a.nav, a.nav:link, a.nav:visited {display:block; width:100px; height:25px; background:transparent; border:1px solid #000; margin-top:2px; margin-right:2px; text-align:center; text-decoration:none; font-family:verdana, arial, sans-serif; font-size:12px; color:#000; line-height:25px; overflow:hidden; float:left;}
a.nav:hover {color:#fff; background:#000066;}

CODE

HTML CODE

<DIV ID="menu">
<a class="nav" href="page2.html" title="page 2">Home</a>
<a class="nav" href="page3.html" title="page 3">LINK</a>
<a class="nav" href="page4.html" title="page 4">LINK</a>
<a class="nav" href="page5.html" title="page 5">LINK</a>

</DIV>

jlhaslip

Feb 5 2007, 11:22 PM

This link is from the cssplay site and is a standards compliant, css-only, zero javascript dropdown menu. Have a look and see if it will work for you and then post the code for a page which uses it and we can assist with the modifications as you need.

*edit*

I had some time, so did a view source and picked out the juicy parts from that page. Here is the code that matters:

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Stu Nicholls | CSSplay | Validating drop down cross-browser menu</title>
<meta name="Author" content="Stu Nicholls" />
<style type="text/css">
/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/basic_dd.html
Copyright © 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
/* remove the bullets, padding and margins from the lists */
.menu ul{
list-style-type:none;
padding:0;
margin:0;
}
/* make the top level links horizontal and position relative so that we can position the sub level */
.menu li{
float:left;
position:relative;
z-index:100;
}

/* use the table to position the dropdown list */
.menu table{
position:absolute;
border-collapse:collapse;
z-index:80;
left:-1px;
top:25px;
}

/* style all the links */
.menu a, .menu :visited {
display:block;
font-size:10px;
width:149px;
padding:7px 0;
color:#000;
background:#949e7c;
text-decoration:none;
margin-right:1px;
text-align:center;
}
/* style the links hover */
.menu :hover{
color:#444;
background:#d4d8bd;
}

/* hide the sub level links */
.menu ul ul {
visibility:hidden;
position:absolute;
width:149px;
height:0;
}
/* make the sub level visible on hover list or link */
.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible;
}


</style>


</head>

<body >
	<h2>The basic cross-browser drop-down validating menu</h2>

<h3>as per cssplay.co.uk</h3>

<h3>Updated 30th July 2006</h3>

<div class="menu">

<ul>
<li><a href="../menu/index.html">DEMOS<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>

	<li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li>

	<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
	<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
	<li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
	<li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li>
	<li><a href="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li>

	<li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>

	<li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a href="index.html">MENUS<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>

	<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
	<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>

	<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
	<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
	<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
	<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>

	<li><a href="circles.html" title="circular links">circular links</a></li>
	</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a href="../layouts/index.html">LAYOUTS<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li>

	<li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li>
	<li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li>

	<li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li>
	<li><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a href="../boxes/index.html">BOXES<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>

	<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
	<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
	<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>

	<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
	<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
	<li><a href="circles.html" title="circular links">circular links</a></li>

	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a  href="../mozilla/index.html">MOZILLA<!--[if IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li>
	<li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>
	<li><a href="../mozilla/content.html" title="Using content:">content:</a></li>

	<li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li>
	<li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li>

	<li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li>
	<li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li>
	<li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li>
	<li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li>

	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

</ul>


</div>



</body>
</html>

Notice that their are two sets of IE conditional statements there, one for IE6 and another for IE7? and the basic structure of the drop-down depends on an un-ordered list which contains nested <ul>'s inside the <li>'s? Neat coding there, with the display being invisible until the on-hover state is acheived.

Well, simply exchange your main menu and sub-menu contents while maintaining the css for the menu class and you should be all set... Good luck with it. Hope you learn something from this...

Autumn

Feb 6 2007, 02:23 AM

Awesome!

Thanks man. That's great. I'm sure you've just pleased quite a few people with that post, lol.

So there you have it. How to make a dropdown menu.

Latest Entries

DjLuki

Feb 13 2007, 12:45 AM

i don't like using the softwares because they usualy save your buttons as images and to cahnge them you have to go back to the program and do it so its to much work. and yea jhlaslip, that is made of lists which i hate but im thinkin it is the only way for now.. thanks to all of you for the support. appreciate it!

jlhaslip

Feb 12 2007, 09:32 PM

I have uploaded a sample html file for a live working demo here.

And sorry to disappoint you, but this menu IS a list, just made Horizontal for the Upper level links and Vertical for the sub-level drop_downs.

street

Feb 12 2007, 09:20 PM

thanx for the list on how to make a dropdown menu i have been looking for places on how to do this i am tired of the old way of using lists.

ADD REPLY / Got an Opinion!	a humble request :-)	RAPID SEARCH!	Free Hosting	[X]
Express your Opinions, Thoughts or Contribute more info. to help others. Ask your Doubts & Queries to get answers, So that "Together We can help others!"	Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.		500MB Space No Ads, CPanel, FTP, PHP, MySQL, EMails - 100% FREE

How Do You Make A Dropdown Menu? - with css

How Do You Make A Dropdown Menu? - with css

Latest Entries