Create a Slick Menu using CSS3
17. Feb, 2010
105 Comments
In this article I am trying to mimic the navigation menu in Dragon Interactive website using only CSS (no images, no JavaScript).
Note: This is an experimental example using the new features of CSS3. The effects can be seen in Latest Webkit Browser only. Gradients works in Firefox 3.6 but not the fade-in and fade-out transition.
Here is the demo of what we are about to create.
Lets create the html used.
<div class="wrapper"> <div class="container"><ul class="menu" rel="sam1"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li ><a href="#">Blog</a></li> <li><a href="#">Services</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contacts</a></li> <li><a href="#">Twitter @insic</a></li> </ul> </div> </div>
Now the CSS.
Lets add a gradients using CSS3 gradient property into our wrapper div.
.wrapper {
width: 100%;
height: 80px;
background : #464646;
background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
border-top: 2px solid #939393;
position: relative;
margin-bottom: 30px;
}
The CSS code for the menu item.
ul {
margin: 0;
padding: 0;
}
ul.menu {
height: 80px;
border-left: 1px solid rgba(0,0,0,0.3);
border-right: 1px solid rgba(255,255,255,0.3);
float:left;
}
ul.menu li {
list-style: none;
float:left;
height: 79px;
text-align: center;
background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
}
ul li a {
display: block;
padding: 0 20px;
border-left: 1px solid rgba(255,255,255,0.1);
border-right: 1px solid rgba(0,0,0,0.1);
text-align: center;
line-height: 79px;
background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
-webkit-transition-property: background;
-webkit-transition-duration: 700ms;
-moz-transition-property: background;
-moz-transition-duration: 700ms;
}
ul li a:hover {
background: transparent none;
}
ul li.active a{
background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
}
References:
You can view a tutorial here creating the same menu effect using CSS sprite and jQuery.
Pearl necklaces are just timeless classic!
Related Post
Wordpress Themes
I’m a Web Developer and Designer from Cebu City, Philippines. I am good at Wordpress, CodeIgniter, PHP, mySQL, jQuery and a standard compliant XHTML and CSS.
It’s nice to see this being done with only CSS, CSS3 can’t come soon enough.
I didn’t know you could do radial gradients either, they look better quality than images as they’re not compressed by the ‘Save for web’ process.
It’d be nice to see some explanation of the new gradient properties in this article but hey, great none-the-less.
Thanks Benjamin! The gradient property details can be read in the reference links I have provided. I opt not to include it in this post.
There seems to be a problem hovering the non-linked description text in the third and fourth example.
Thanks retop. I will fix it.
This is great, thanx.
One thing, the link to the tutorial (http://www.shopdev.co.uk/blog/animated-menus-using-jquery/) using css sprite and jquerey comes up with gibberish, the link is good but the page it refers to show what appears to be compiled code?
The page is working fine in my end James
Working now, I really don’t know what was happening.
It’s a shame that css3 (and html5) is taking so long to come through as a standard.
Thanks again for you article.
Useful post. Thanks
What A nice Work.
Awesome! Thanks a lot. Gotta use this definitely.
This is a great menu! I also hadn’t seen the radial gradients before, but what a nice surprise. Very nice work, and thanks for the tutorial!
maybe im doing this wrong but the -moz- transition properties dont work for me in firefox while the webkits do work in chrome.
okay i figured it out. turns out firefox does’t support its own transition properties yet but that changes in v3.7 due out later this year anyways thnx 4 the tut. :]
I’m really happy today
Tahnks
can i use this for my commercial website? should i refer it to you?
Its a nice menu.. but doesnt work on Opera Browser
Para Opera Browser puedes utilizar [-o-linear-gradient] tal como lo haces en Safari
doesn’t work in IE6
Me thinks its time to visit http://www.microsoft.com and download some IE updates
I don’t think IE was CSS3/HTML5 ready until the newest release of version 9.
Thanks for the tutorial! Awesome work.
excellent work ty.
doesn’t work in Netscape
Love this! As does my friend Im building a site for. He was well impressed. One thing Im struggling with, Im using the vertical menu and having problems getting the “current page” lit with that cool blue. The verion that uses the fade in of the blue oolour (/* Css for vertical sample */).
I thought from the CSS, that the following additional style would do the trick, so that the class “active” could be applied to the element to specify which one I wish list when entering a certain page.
ul.vertical li.active a{
background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
}
However no joy! Can u help with this pls cause Ive no idea how to modify the code (ive tried lots of permutations!).
Thanks a bunch for any help you can give me and awesome site.. and tutorials.
All you have to do is relocate the class=’active’ in your HTML for each of your pages… using the above example for instance
Home
About
Blog
Services
Portfolio
Contacts
Twitter @insic
As you can see class=’active’ for ‘Home’
Now if you are wanting the About page to be the current Active page it is just a matter of moving that class so it would be;
Home
About
Blog
Services
Portfolio
Contacts
Twitter @insic
I hope this helps
hi,
please help me.
how rename or add (dropdown menu) to style file.
Difference : “.sf-menu AND #cat-nav- ”
(using wordpress theme)
default file:
.sf-menu li:hover ul, .sf-menu li.sfHover ul { top: 2.5em; z-index: 400; }
ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul { top: -999em; z-index: 400; }
ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul { top: 0; }
ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul { top: -999em; }
ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul { top: 0; }
.sf-menu { position: relative; margin: 0; padding: 0; list-style: none;clear:both; float: left; margin-top: 12px; padding-left: 9px; margin-bottom: 1em; background: url(‘images/menu_bg.png’) no-repeat; height: 58px; width: 957px; z-index: 400; }
.sf-menu ul { position: absolute; top: -999em; margin-top: 20px; width: 212px; right: 7px; -moz-box-shadow: 3px 6px 8px 1px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 3px 6px 8px 1px rgba(0, 0, 0, 0.3); background-image: url(‘images/dropdown_top.png’); background-repeat: no-repeat; background-position: top; padding-top: 8px; z-index: 400; }
.sf-menu a { display: block; position: relative; text-decoration:none; color: #fff; padding: 23px 20px 0px 20px; height: 30px; text-decoration: none; text-shadow: 1px 1px 1px #000; font-weight: normal; float :right; }
.sf-menu li { float: right; position: relative; font-family: Tahoma; background: url(‘images/menu_line.png’) no-repeat; background-position: left 5px; }
.sf-menu li ul li ul { right: 212px; margin-top: 0px;}
.sf-menu li li { background: #ebebeb url(‘images/submenu_li.gif’) no-repeat; background-position: 24px 15px; height: 36px ; margin: 0px; float: right; width: 212px; z-index: 10; }
.sf-menu li a:hover { color: #00b4ff; }
.sf-menu li:hover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active { background: #121212; outline: 0; }
.sf-menu > li.sfHover.sf-ul { background: transparent url(‘images/parent_link_left.png’) no-repeat; background-position: 7px 11px; z-index: 200; }
.sf-menu li.sfHover li a:hover, .sf-menu li ul li.sfHover a, .sf-menu li ul li ul li.sfHover a { background: #f7f7f7 url(‘images/submenu_li_hover.gif’) no-repeat; background-position: 11px 0px; }
.sf-menu li.sfHover li a, .sf-menu li.sfHover li ul li a, .sf-menu li.sfHover li ul li ul li a { background: url(‘images/submenu_li_hover.gif’) no-repeat ; background-position: -100px -100px; width: 172px; color: #404040; margin: 0px; padding: 14px 0px 0px 40px; text-shadow: 0px 1px 0px #cccccc; }
.sf-menu > li.sfHover.sf-ul > a { color: #000; text-shadow: 1px 1px 1px #fff; background: transparent url(‘images/parent_link_right.png’) no-repeat; background-position: right 11px; z-index: 301; }
ul.sf-menu li.backLava { position: absolute; z-index: 3; background: url(‘images/lavalamp.png’) no-repeat; background-position: center 0px; padding: 0; height: 16px; margin-top: 42px; }
——————–
new code (DROPDOWN MENU):
—————-
#cat-nav { bottom:-14px; left:0; position:absolute; width:980px; z-index:100; }
#cat-nav-left {background: url(images/n-2/cat-nav-left.png) no-repeat; width: 10px; height: 64px; float: left;}
#cat-nav-content { background: url(images/n-2/cat-nav-content.png) repeat-x; float: left; height: 64px; width: 941px; }
.nav li ul {box-shadow: 3px 6px 7px 1px rgba(0, 0, 0, 0.5); -moz-box-shadow:3px 6px 7px 1px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 3px 6px 7px 1px rgba(0, 0, 0, 0.5); background: url(images/n-2/cat_menu_bg.png) repeat-y; border: 1px solid #111010; -moz-border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius-topright: 0px; -webkit-border-top-left-radius: 0px; border-top: none; padding-bottom: 15px; }
#cat-nav-content ul.nav { float: right; margin-top: 10px; margin-left:18px; }
#cat-nav-content ul.nav li { padding:0 17px 0 0; }
#cat-nav-content ul.nav li a { padding: 8px 4px 21px; }
#cat-nav-content ul.nav li.sf-ul a { padding: 8px 6px 21px 15px; }
#cat-nav-content ul.nav > li.sf-ul { background: url(images/n-2/li-hover.png) no-repeat 55px right; }
#cat-nav-content ul.nav > li.sf-ul > a { background: url(images/n-2/a-hover.png) no-repeat 55px left; }
#cat-nav-content ul.nav > li.sf-ul.sfHover { background: url(images/n-2/li-hover.png) no-repeat top right; }
#cat-nav-content ul.nav > li.sf-ul.sfHover > a { background: url(images/n-2/a-hover.png) no-repeat top left; display: block; }
#cat-nav-content ul.nav li li { padding: 0px; }
#cat-nav-content ul.nav ul ul { border-top: 1px solid #111010; -moz-border-radius-topleft: 8px; -webkit-border-top-left-radius: 8px; }
#cat-nav-content ul.nav li li a:hover { color: #00b7f3; }
#cat-nav-content ul.nav li a {color: #fefefe; font-weight: bold; text-decoration: none; text-shadow: -1px -1px 1px #0a0a0a; text-align:right; }
#cat-nav-content ul.nav ul li a { text-shadow: 1px 1px 1px #0a0a0a; }
#cat-nav-content ul.nav > li > a:hover { }
#cat-nav-content ul.nav li li {background: url(images/n-2/bullet.png) no-repeat 16px 21px; float:right; }
#page-menu ul.nav li li { background:url(“images/n-2/page-menu-bullet.png”) no-repeat scroll 16px 16px transparent; }
#page-menu ul.nav li a { padding: 8px 9px 16px; }
#page-menu ul.nav > li > a.sf-with-ul:hover, #page-menu ul.nav > li.sfHover > a { background-color: #232323; }
#page-menu ul.nav li li a { text-shadow: none; }
#page-menu .nav li:hover ul, #page-menu ul.nav li.sfHover ul { left:0px; top:45px; }
#page-menu .nav ul li:hover ul, #page-menu ul.nav ul li.sfHover ul { left:191px; top:-2px; }
#cat-nav-content ul.nav li li a, #page-menu ul.nav li li a {background: url(images/n-2/n-2/divider.png) no-repeat bottom left; display: block; width: 156px; padding: 9px 5px 11px 28px !important; }
#page-menu ul.nav li li a { background: none; padding: 0px 5px 0px 28px !important; }
#cat-nav-right { background: url(images/n-2/n-2/cat-nav-right.png) no-repeat; width: 19px; height: 64px; float: left;}
#cat-nav #search-form { float: left; width: 131px; background: url(images/n-2/n-2/search.png) no-repeat; height: 27px; margin-top: 15px;}
#cat-nav #searchinput { background: none; border: none; font-style: none; color: #646464; padding-left: 12px; display: block; margin-top: 3px; float: left; width: 95px; }
#cat-nav #searchsubmit { float:left; margin-top:7px; }
#cat-nav #search-form img {float: right; margin-top: -24px; padding-right:10px;}
#page-menu ul.nav ul { z-index: 10000; padding-bottom: 9px; background: #232323; border: 0px; padding-top: 2px; }
#page-menu ul.nav ul ul { -moz-border-radius-topleft: 8px; -webkit-border-top-left-radius: 8px; }
————
Tanks
it’s nice menu , thanks for your presentation.
I believe in using CSS rather then images in navigation ans CSS3 just took the designing to the next level. This is awesome tut.
Thanks
Yes, it is truly awesome that the gradient effects can be achieved with CSS. However, for practical purposes, for the time being I would stick to the small image required rather than using all that css styling code which would make the css too heavy.
hey man, how too changes color , help me please