Jump to content
xisto Community
Sign in to follow this  
Followers 0
DjLuki

How Do You Make A Dropdown Menu? with css

By DjLuki, in Programming

Recommended Posts

DjLuki    0

DjLuki
Posted

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

Share this post

Link to post
Share on other sites

sylenzednuke    0

sylenzednuke
Posted

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

http://forums.xisto.com/no_longer_exists/

Share this post

Link to post
Share on other sites

jlhaslip    4

jlhaslip
Posted

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.

Share this post

Link to post
Share on other sites

DjLuki    0

DjLuki
Posted

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

CSS CODE#menua.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;}

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>

Share this post

Link to post
Share on other sites

jlhaslip    4

jlhaslip
Posted

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:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://forums.xisto.com/no_longer_exists/ 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)htmlis available at [url="http://www.cssplay.co.uk/menus/basic_dd.html"]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...

Share this post

Link to post
Share on other sites

farsiscript    0

farsiscript
Posted

Dear Djluki You can use CSS menu or you can use openclub software for design drop down menu openclub software is Javascript software and allow to make dynamic menu for your websitebut its not free , search at google for trial version...thanks

Share this post

Link to post
Share on other sites

jlhaslip    4

jlhaslip
Posted

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.

Share this post

Link to post
Share on other sites

DjLuki    0

DjLuki
Posted

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!

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  
Followers 0
Go To Topic Listing
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.

  I accept