Page 1 of 1

Pure CSS Dropdown menu Rate Topic: ***** 1 Votes

#1 Shadow 1.2  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 7
  • View blog
  • Posts: 70
  • Joined: 17-October 07

Posted 12 February 2008 - 08:52 AM

*
POPULAR

So you want to make those cool drop down menus without having to use javascript well heres how.

First open up Notepad or any other text editor(like Notepad++ or Scite). Type in
#holder {
color: white;
background:blue;
font-size: 20px;
font-family: Arial;
height:20px;
left:32px;
line-height:20px;
overflow:hidden;
position:absolute;
text-align:center;
top:50px;
width:100px;
z-index:100;
}

The above code is ,in short, the design of the button that will always be displayed
Explanation of the code Starts Here
#holder{} this sets the id attribute that will be used in the html. the code goes in between the { and the }
color: white sets the color of the text
background : blue sets the color of the background of the button
font-size Sets the size of the font
font-family : Arial sets the font of the text in and on the menu
left:32px sets the distance from the left side of the page
line-height: 20px the size of the of the line
overflow:hidden hides the menu
position: absolute allow the menu to go over any pictures or text in the page
text-align: center makes the text stay in the center
top: 50px how far the menu is from the top of the screen
width:100pxthe width of the menu
z-index: 100 makes the menu the priority
Code Explanation Ends Here
ok now that we have the menu button we can move onto what shows up under the menu button when we move the mouse over it
#holder:hover {
background:darkblue none repeat scroll 0%;
cursor:pointer;
height:40px;
}

this is the code to create the drop down part of our drop down menu but it will look messy without the next piece of code
Explanation Of the Code Starts Here
#holder: hover{} this sets the id attribute that will be used in the HTML code and is activated when the mouse goes over the element.The code goes inside the { and the }.
background: darkblue the background of the whole menu when the mouse is over it
cursor: pointer this makes the cursor stay as a cursor and not turn into a hand when the mouse is hovering over it.
height: 40px this is what makes the dropdown box the drop down box, essentially it makes the box drop down
Code Explanation Ends Here
Now to make it look better

#holder a:visited, #holder a {
color:white;
display:block;
line-height:18px;
text-decoration:none;
width:100%;
}

this code takes away the text decoration such as the underline on hyperlinks and is used to add buttons
Explanation Of Code Starts Here
#holder a:visited, #holder a{}this is the same as the rest except this is for the buttons that are in the menu and is to format them
Color: whitethis sets the color of the buttons text
display: block this moves the text down to the buttons
line-height: 18px sets the height for the buttons
text-decoration: nonethis gets rid of all text decor of the hyperlinks
width:100% Self Explanatory I Guess
End Of Explanation
so now it looks all pretty and is ready to use but what if you want the buttons to change color if you mouse over them
#holder a:hover {
background:blue;
color: white;
}

Code explanation changes the background and the text when you mouse over them

Now Save The file as "Dropdown.css"

How To Use(how to use in html)

Open a new document in your text editor and type in this code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="holder">
Menu
<a href="#"> Item 1 </a>
</div>
</body>
</html>

Then Save this in the same Folder that you saved your style sheet.
now double click the icon and view itPosted Image
now say you wanted two menus or three menus i havent quite figured out how to do it but i do have one method that might work but would take a bit of work. Just Copy The Code 5 times and then change the #holder to say #holder1 or #holder2 etc. And then just add div tags with those id's
It would look like this
Posted Image
The code
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="holder">
Menu
<a href="#"> Item 1 </a>
</div>
<div id="holder1">
Menu
<a href="#"> Item 1 </a>
</div>
</div>
<div id="holder2">
Menu
<a href="#"> Item 1 </a>
</div>
</body>
</html>

CSS
#holder {
color: white;
background:blue;
font-size: 20px;
font-family: Arial;
height:20px;
left:32px;
line-height:18px;
overflow:hidden;
position:absolute;
text-align:center;
top:50px;
width:100px;
z-index:100;
}
#holder:hover {
background:darkblue
cursor:pointer;
height:40px;
}
#holder a:visited, #holder a {
color:white;
display:block;
line-height:18px;
text-decoration:none;
width:100%
}
#holder a:hover {
background:white
color: blue;
}
#holder1 {
color: white;
background:blue
font-size: 20px;
font-family: Arial;
height:20px;
left:132px;
line-height:18px;
overflow:hidden;
position:absolute;
text-align:center;
top:50px;
width:100px;
z-index:100;
}
#holder1:hover {
background:darkblue
cursor:pointer;
height:40px;
}
#holder1 a:visited, #holder1 a {
color:white;
display:block;
line-height:18px;
text-decoration:none;
width:100%;
}
#holder1 a:hover {
background:white
color: blue;
}




#holder2 {
color: white;
background:blue
font-size: 20px;
font-family: Arial;
height:20px;
left:232px;
line-height:18px;
overflow:hidden;
position:absolute;
text-align:center;
top:50px;
width:100px;
z-index:100;
}
#holder2:hover {
background:darkblue
cursor:pointer;
height:40px;
}
#holder2 a:visited, #holder2 a {
color:white;
display:block;
line-height:18px;
text-decoration:none;
width:100%;
}
#holder2 a:hover {
background:white
color: blue;
}



if you want to add more buttons to the menu just increase the Height property by 20 or whatever the line-height property is for each extra button.

Try editing the code and add images to the background of the buttons if you want
if you want to email me. send it to josh@amazingafrica.co.za

I Hope This Taught Some Beginners Of Css some things and everyone else something aswell B)

Attached File(s)



Is This A Good Question/Topic? 5
  • +

Replies To: Pure CSS Dropdown menu

#2 hervens  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 17
  • Joined: 14-June 06

Posted 18 February 2008 - 10:55 AM

Wow, interesting
Was This Post Helpful? 0
  • +
  • -

#3 Shadow 1.2  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 7
  • View blog
  • Posts: 70
  • Joined: 17-October 07

Posted 20 February 2008 - 07:43 AM

I Forgot To Add That this wont work in IE because it doesnt support :hover as far as i know. One more reason for everyone to have firefox
Was This Post Helpful? 1
  • +
  • -

#4 Sarge_137  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 64
  • Joined: 16-December 08

Posted 20 December 2008 - 12:52 AM

Hey, this tutorial is sick, thanks :^:
Was This Post Helpful? 0
  • +
  • -

#5 heyoman1  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 64
  • View blog
  • Posts: 735
  • Joined: 30-November 09

Posted 18 March 2010 - 09:13 AM

didnt work in IE
Was This Post Helpful? 0
  • +
  • -

#6 Shadow 1.2  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 7
  • View blog
  • Posts: 70
  • Joined: 17-October 07

Posted 18 March 2010 - 10:01 AM

View Postheyoman1, on 18 March 2010 - 08:13 AM, said:

didnt work in IE

read 2 comments up.
Was This Post Helpful? 0
  • +
  • -

#7 Harlen  Icon User is offline

  • New D.I.C Head

Reputation: 4
  • View blog
  • Posts: 40
  • Joined: 08-February 10

Posted 22 March 2010 - 03:09 PM

Nice tutorial! I am inspired by this!
Was This Post Helpful? 0
  • +
  • -

#8 rightyouareguv  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 1
  • Joined: 26-September 09

Posted 14 April 2010 - 08:56 AM

Dear Shadow 1.2

You're right - the code as presented doesn't work in IE.

But add the normal DOCTYPE statement:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">

or

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">

and it runs fine. At least it does in IE8. (My OS is Vista 32-bit.)

Regards,
rightyouareguv
Was This Post Helpful? 1
  • +
  • -

#9 Eetu  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 15
  • Joined: 09-September 10

Posted 16 September 2010 - 10:17 AM

Wow, Thx alot !
Im beginner coder, and started with HTML basics, now I wanna learn stylin'

!

Just sayin' THX ALOOOT ;)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1