Welcome Guest ( Log In | Register)



2 Pages V   1 2 >  
 Reply to this topicStart new topic
> How Do You Make A Dropdown Menu?, with css
DjLuki
post Feb 2 2007, 03:14 AM
Post #1


Super Member
*********

Group: Members
Posts: 447
Joined: 2-March 05
Member No.: 4,094
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

(list)

Go to the top of the page
 
+Quote Post
sylenzednuke
post Feb 2 2007, 03:37 AM
Post #2


Privileged Member
*********

Group: [HOSTED]
Posts: 503
Joined: 18-August 06
From: My Computer, Mumbai, Maharashtra, India.
Member No.: 28,463
T17 GFX Crew
Though not a big help, maybe this site will solve your problem.

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

(list)

Go to the top of the page
 
+Quote Post
DjLuki
post Feb 2 2007, 03:58 AM
Post #3


Super Member
*********

Group: Members
Posts: 447
Joined: 2-March 05
Member No.: 4,094
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.

(list)

Go to the top of the page
 
+Quote Post
jlhaslip
post Feb 2 2007, 05:12 AM
Post #4


A computer once beat me at chess, but it was no match for me at kick boxing.
Group Icon

Group: [MODERATOR]
Posts: 4,083
Joined: 24-July 05
From: Linix, DOS and Windows…the good, the bad and the ugly
Member No.: 9,787
Spam Patrol
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.

(list)

Go to the top of the page
 
+Quote Post
matak
post Feb 2 2007, 06:43 AM
Post #5


Super Member
*********

Group: Members
Posts: 413
Joined: 4-October 06
From: Psychedelic Realms
Member No.: 31,079
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

This post has been edited by matak: Feb 2 2007, 06:54 AM

(list)

Go to the top of the page
 
+Quote Post
jlhaslip
post Feb 5 2007, 11:00 PM
Post #6


A computer once beat me at chess, but it was no match for me at kick boxing.
Group Icon

Group: [MODERATOR]
Posts: 4,083
Joined: 24-July 05
From: Linix, DOS and Windows…the good, the bad and the ugly
Member No.: 9,787
Spam Patrol
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.

(list)

Go to the top of the page
 
+Quote Post
Autumn
post Feb 5 2007, 11:08 PM
Post #7


Member [Level 1]
****

Group: Members
Posts: 50
Joined: 5-February 07
Member No.: 38,291
You may also want to check out:

www.apycom.com

They have a few decent horizontal and vertical menus.

(list)

Go to the top of the page
 
+Quote Post
DjLuki
post Feb 5 2007, 11:08 PM
Post #8


Super Member
*********

Group: Members
Posts: 447
Joined: 2-March 05
Member No.: 4,094
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>

(list)

Go to the top of the page
 
+Quote Post
jlhaslip
post Feb 5 2007, 11:22 PM
Post #9


A computer once beat me at chess, but it was no match for me at kick boxing.
Group Icon

Group: [MODERATOR]
Posts: 4,083
Joined: 24-July 05
From: Linix, DOS and Windows…the good, the bad and the ugly
Member No.: 9,787
Spam Patrol
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]><!--&