Multi
Multi
Smexy CSS Only Drop Menu
Topic Started: Friday, 8. April 2011, 23:17 (713 Views)
Andrew
Member Avatar
ぼくたちがすべてはばか。
View It Here

This took me roughly 1 hour to code due to the sheer extensiveness and complexity of the menu.

Code: Source
 

<html>
<head>
<title>Underground CSS: Simple CSS Only Drop Menu</title>
<style>
#menu {
border: 1px solid #000;
background: #545454;
background: -moz-linear-gradient(top, #545454 0%, #353535 50%, #000000 51%, #686868 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#545454), color-stop(50%,#353535), color-stop(51%,#000000), color-stop(100%,#686868));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#545454', endColorstr='#686868',GradientType=0 );
padding: 15px;
padding-left: 0px;
border-radius: 5px;
position: relative;
z-index: 2;
box-shadow: 1px 1px 6px #000;
}

#menu a {
text-decoration: none;
color: #FFF;
font: Calibri;
font-size: 20px;
}

#menu li {
list-style-type: none;
}

#menu > ul > li {
position: relative;
float: left;
bottom: 20px;
}

#menu > ul > li > a {
margin: 0px;
padding-top: 11px;
padding-bottom: 12px;
padding-right: 45px;
padding-left: 45px;
border-right: 1px solid #6B6B6B;
}

#menu > ul > li:last-child > a {
border-right: none;
}

#menu > ul > li > a:hover {
background: #7A7A7A;
background: -moz-linear-gradient(top, #7A7A7A 0%, #5B5B5B 50%, #1C1C1C 51%, #919191 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7A7A7A), color-stop(50%, #5B5B5B), color-stop(51%, #1C1C1C), color-stop(100%, #919191));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7A7A7A', endColorstr='#919191', GradientType=0);
}

#menu > ul > li > a:focus, #menu > ul > li > a:active {
box-shadow: inset 0px 0px 10px #000;
}

#menu > ul > li ul {
background: rgba(0, 0, 0, 0.75);
opacity: 0.0;
filter:alpha(opacity = 0);
margin: 0px;
margin-top: 12px;
padding: 0px;
border-radius: 0px 0px 5px 5px;
position: relative;
z-index: 1;
box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.8);
-webkit-transition-property: all;
-webkit-transition-duration: 0.4s;
-moz-transition-property: all;
-moz-transition-duration: 0.4s;
-o-transition-property: all;
-o-transition-duration: 0.4s;
transition-property: all 0.4s;
}

#menu > ul > li > ul > li {
padding: 0px 15px;
}

#menu > ul > li > ul > li a {
font-size: 17px;
}

#menu > ul > li:hover ul {
padding: 7px 0px;
opacity: 1.0;
filter:alpha(opacity = 1.0);
}

#menu > ul > li > ul > li:hover {
background: rgba(107, 107, 107, 0.75);
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li>
<a href="#">Link 1</a>
<ul>
<li>
<a href="#">Sub-Link 1</a>
</li>
<li>
<a href="#">Sub-Link 2</a>
</li>
<li>
<a href="#">Sub-Link 3</a>
</li>
</ul>
</li>
<li>
<a href="#">Link 2</a>
<ul>
<li>
<a href="#">Sub-Link 1</a>
</li>
<li>
<a href="#">Sub-Link 2</a>
</li>
<li>
<a href="#">Sub-Link 3</a>
</li>
</ul>
</li>
<li>
<a href="#">Link 3</a>
<ul>
<li>
<a href="#">Sub-Link 1</a>
</li>
<li>
<a href="#">Sub-Link 2</a>
</li>
<li>
<a href="#">Sub-Link 3</a>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>


You will be learning how to make something like this in the last installment of Underground CSS.
Edited by Andrew, Saturday, 9. April 2011, 02:04.
Posted Image

Professional web design/development services.http://wildandrewlee.com/
Off
Profile
Quote
Top
 
Chesterfield
Member Avatar
Level 12
I don't like how it opens when you hover underneath the button, but still nice. Good job :) .
Off
Profile
Quote
Top
 
Andrew
Member Avatar
ぼくたちがすべてはばか。
Update: Text shadow for smoother text.

http://z3.ifrm.com/28092/186/0/f644848/dropmenu.html
Posted Image

Professional web design/development services.http://wildandrewlee.com/
Off
Profile
Quote
Top
 
Joe
Member Avatar
Hi.
Looks good Pro! :D
Joe
Off
Profile
Quote
Top
 
Andrew
Member Avatar
ぼくたちがすべてはばか。
Thanks Joe. Feel free to look at the source and use this navigation elsewhere guys. Just give me a little something something (like credit).

Update 3: http://z3.ifrm.com/28092/186/0/f644850/dropmenu.html added content to highlight the subtle effects.

Update 4: http://z3.ifrm.com/28092/186/0/f644852/dropmenu.html changed font.
Edited by Andrew, Saturday, 9. April 2011, 02:03.
Posted Image

Professional web design/development services.http://wildandrewlee.com/
Off
Profile
Quote
Top
 
Tajio
Member Avatar
Professional Procrastinator
Excellent! :D love this.

Posted Image
P O R T F O L I O
Last.fmTwitter Instagram
Off
Profile
Quote
Top
 
BetaRick
Member Avatar
Level 4
How I can't wait till the day CSS3 is completely cross browser supported :) Excellent work
Off
Profile
Quote
Top
 
Aidan
Member Avatar
Level 12
BetaRick
Wednesday, 13. April 2011, 22:21
How I can't wait till the day CSS3 is completely cross browser supported :) Excellent work
I second this. The fact that people still bother to use something like IE is ridiculous. Nonetheless, this is really nice. Good work, Pro. :D
Off
Profile
Quote
Top
 
Tajio
Member Avatar
Professional Procrastinator
DaPizzaMan
Wednesday, 13. April 2011, 22:24
BetaRick
Wednesday, 13. April 2011, 22:21
How I can't wait till the day CSS3 is completely cross browser supported :) Excellent work
I second this. The fact that people still bother to use something like IE is ridiculous. Nonetheless, this is really nice. Good work, Pro. :D
How true. :(

Posted Image
P O R T F O L I O
Last.fmTwitter Instagram
Off
Profile
Quote
Top
 
Ancient Blonde
Member Avatar
The Sexiest of the Sexy
Nice, I wish I could code like that.


Posted Image
We are hiring! Two Staff positions are currently open, and one Administrator. If you are interested in any of these, PM me or e-mail me at ancientblonde@live.ca


Spoiler: click to toggle



Off
Profile
Quote
Top
 
Hostix
Member Avatar
Level 4
Nice code. I wish I could code that, but my coding skills are rusty.
Off
Profile
Quote
Top
 
Alam
Member Avatar
Level 6
DaPizzaMan
Wednesday, 13. April 2011, 22:24
I second this. The fact that people still bother to use something like IE is ridiculous. Nonetheless, this is really nice. Good work, Pro. :D
IE 9, surprisingly, isn't that bad.

On topic: Awesome stuff, Pro (like always). :)
Posted Image
Credit to Sarah for the signature. <3

Spoiler: click to toggle
Off
Profile
Quote
Top
 
Andrew
Member Avatar
ぼくたちがすべてはばか。
Thanks guys, I'm currently working on a 3rd level menu which means when you hover over a link inside the drop menu drop down, another one comes up :P
Posted Image

Professional web design/development services.http://wildandrewlee.com/
Off
Profile
Quote
Top
 
Geoffrey
Member Avatar
It's a love story, baby just say yes
Ah nice. Good work Pro!
Consider this statement my permission to convert my themes to other platforms. Please link back to http://geoffreykoester.com. Be sure to rehost all theme images on the new platform as we do not know how long they will redirect. Also some boards hosting theme/skin images may not survive the move.

Posted Image

Other Sigs
Awards & Memories
Off
Profile
Quote
Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
ZetaBoards - Free Forum Hosting
Free Forums. Reliable service with over 8 years of experience.
Learn More · Register for Free
« Previous Topic · Theme & Layout Display · Next Topic »

Welcome Guest [Log In] [Register]
Outline Live
Loading..
Loading..