Create a Slick Menu using CSS3

Tutorials, Works

Create a Slick Menu using CSS3

Feb 17, 2010 insic 175 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.

LIVE DEMO

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>

<li><a href="#">About</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>

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;
}

.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%);
}

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%);

}

LIVE DEMO

References:

You can view a tutorial here creating the same menu effect using CSS sprite and jQuery.

Tags: css3 slick menu

About the author: insic

Subscribe in my RSS Feed for more updates on Web Design and Development related articles. Follow me on twitter or drop a message to my inbox.

Zemanta

http://www.nouveller.com/ Benjamin Reid

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.
- http://blog.insicdesigns.com insic
  
  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.
Pingback: uberVU - social comments
http://www.stuttgardia.info retop

There seems to be a problem hovering the non-linked description text in the third and fourth example.
- http://blog.insicdesigns.com insic
  
  Thanks retop. I will fix it.
James B

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?
- http://blog.insicdesigns.com insic
  
  The page is working fine in my end James
  - James B
    
    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.
http://night-fairy-tales.com/ SM

Useful post. Thanks
http://www.mobileztotal.com “”" Saad Ahmed “”"

What A nice Work.
http://www.doublejdesign.co.uk/ Jack

Awesome! Thanks a lot. Gotta use this definitely.
Pingback: Rémi Garcia – Blog » Un menu animé uniquement CSS3
Pingback: Really Useful Tutorials You Should Have Read in February 2010 Ajax Help W3C Tag
Pingback: 15 CSS3 Navigation and Menu Tutorials and Techniques - Speckyboy Design Magazine
Pingback: 15 CSS3 Navigation and Menu Tutorials and Techniques · rogdykker
Pingback: Really Useful Tutorials You Should Have Read in February 2010 | Son Of Byte - Web Design & Development
Pingback: 15 CSS3 Navigation and Menu Tutorials and Techniques | Son Of Byte - Web Design & Development
Pingback: 15 CSS3 Navigation and Menu Tutorials and Techniques - Programming Blog
Pingback: 15 CSS3 Navigation and Menu Tutorials and Techniques | Yooxe
Pingback: 15 CSS3 Navigation and Menu Tutorials and Techniques | DesignerLinks | Home to Web design news, jQuery Tutorials, CSS tutorials, Web Designing tutorials, JavaScript tutorials and more!
Pingback: CSS Menu and Navigation – Tutorials, Techniques and Examples | Design | Web Risorsa | A Web Resource Abode
http://www.metacomdesign.com Ryan Cowles

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!
Pingback: 15 Menu Tutorials, Techniques, CSS3 Navigation
andres

maybe im doing this wrong but the -moz- transition properties dont work for me in firefox while the webkits do work in chrome.
- andres
  
  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. :]
Pingback: Slick Menu using CSS3 - Manmohanjit Singh
Pingback: CSS3 Navigation and Menu tutorials - Wsblogz.com – Web design magazine
Pingback: CSS3 Navigation and Menu tutorials
Pingback: 15 CSS3 Navigation and Menu Tutorials and Techniques - www.huedesigner.com
Pingback: 64 CSS3 Tutorials & Techniques | Digital Pizza
Pingback: Complete Toolbox: 55 CSS Menu And Button Coding Tutorials » abdie.web.id
Pingback: Complete Toolbox: 55 CSS Menu And Button Coding Tutorials – Design Today
Pingback: Complete Toolbox: 55 CSS Menu And Button Coding Tutorials | CG Stream
Pingback: Complete Toolbox: 55 CSS Menu And Button Coding Tutorials
Pingback: Complete Toolbox: 55 CSS Menu And Button Coding Tutorials | TechFleck
Pingback: 18 Menu CSS3 et (ou sans) Jquery – Le Colibri Libre
Pingback: Complete Toolbox: 55 CSS Menu And Button Coding Tutorials | Afif Fattouh - Web Specialist
moufeed

I’m really happy today
Tahnks
Tom

can i use this for my commercial website? should i refer it to you?
Pingback: 35+ Excellent CSS and jQuery-based Navigation Menu Tutorials and Techniques Collection | Blogger Bits
Pingback: Vectorbunker Blog » 15 CSS3 Menu Navigation Tutorials
http://ees.pirintex.com Alex

Its a nice menu.. but doesnt work on Opera Browser
- http://about.me/israelherrera Israelito
  
  Para Opera Browser puedes utilizar [-o-linear-gradient] tal como lo haces en Safari
Pingback: 30+ Pure CSS Menu Tutorials For Web Developers - Ntt.cc
iRvanFauziE

doesn’t work in IE6
- Scott Gale
  
  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.
- http://newwebsites.net david
  
  Nothing works in IE6, so that was a safe guess.
Pingback: 20 Useful CSS3 Menu and Navigation Tutorials | alexa Web Design
Pingback: Los mejores tutoriales y recursos para hacer tus barras de navegación | SummArg
Pingback: شرح عمل 20 قائمة باستخدام Css3 | نوافذ التقنية Windows Technology
Pingback: WordPress Portfolio and Photoblog Themes (New Design Inspiration) | FariDesign.net
Pingback: Menus dynamiques en CSS et Jquery | Kimly
Pingback: jQuery Tips, Tricks, Artikles & Techniques | jQuery Guru
Pingback: 15 Super Cool CSS3 Navigation Menus And Tutorials | Bloggermint
http://www.denizlitekstil.com Mustafa

excellent work ty.
Pingback: 20 Excellent CSS Menu And Button Tutorials | VaneGraphics
EizuaFnavRi

doesn’t work in Netscape
Pingback: Super4desigN.com -Лучшие CSS и jQuery учебники 2010-2011
Pingback: 20 tutoriales: menúes CSS3 | El Blog de Sol
Pingback: 150+ CSS3 tutorials and exercises for web developers « Design and Development tuts – TutorialShock
Pingback: 18 قائمة css3 jquery من اجلل تصاميم الواب الاحترافية
Pingback: Gem@ BLOG | Linkeando
Pingback: jQuery Tipps, Tricks, Artikel & Techniken | CSS3 Guru Blog
Pingback: Create a Slick Menu Using CSS3 | TutorialMatrix.com
Paul

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.
- Filly
  
  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
Pingback: 10 Most Useful CSS3 Navigation and Menu Tutorials for Every WebDesigner | Colors 7
Pingback: gradientからgradientへとtransitionしてくれないのはなぜなんだぜ？ | 下痢が止まらない夜に君と見る夢はトイレットペーパーという名の奇跡の花が咲く下痢が止まらない夜に君と見る夢はトイレ
araz

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
Pingback: jQuery Tipps, Tricks, Artikel & Techniken | CSS3 Toolbox
Pingback: 20 Great CSS jQuery Navigation Menu Tutorials | Web Development | iDesignow
Pingback: CSS3 tutorials, 150+ exercises for web developers
Pingback: 150+ CSS3 tutorials and exercises for web developers - DesignShock
Pingback: 10+ Excellent CSS and jQuery-based Navigation Menu Tutorials | Psdtuts
Pingback: 30 Highly Useful CSS and jQuery Menu Tutorials | stylishwebdesigner
Pingback: 分享50个 CSS3 最佳应用示例 | 宁静致远
Pingback: 100 Great CSS Menu Tutorials
Pingback: Sacima鲨鳍马工作室 » Blog Archive » 100 Great CSS Menu Tutorials
Pingback: 100 个强大的 CSS 制作菜单的教程 | 吉林SEO | 打造专业的吉林网站优化团队
Pingback: Уроки по созданию навигационных меню сайта | TechnoVzor.com
Pingback: 50 Best CSS Menu Tutorials with Jquery effect | Desua the world of Knowledge
Pingback: 20 HTML5 And CSS3 Tips,Tutorials, Demo & Download : DesignMock- Complete Design Sence
Pingback: 20 HTML5 And CSS3 Tips,Tutorials, Demo & Download : DesignMock- Complete Design Sence
Pingback: 30 CSS Menu Tutorials to Build Attractive Menus | Flash User
Pingback: 30 آموزش ساخت منو CSS جذاب
Pingback: CSS导航栏/菜单教程 – 紫萝卜 | 所有与设计有关
Pingback: +108 Free CSS Menu Designs {Mega Menu, Dropdown, Horizontal, Vertical} from Ginva | Lake of Web
Pingback: CSS导航栏/菜单教程 | logolomo
Pingback: 15 CSS3 Navigation Menu Tutorial and Techniques | Mystrious
http://www.cymiz.com ice

it’s nice menu , thanks for your presentation.
Pingback: 25 Best CSS3 Navigation and Button Tutorials : DesignMock- Complete Design Sence
http://bloggeranalytics.blogspot.com Majid H

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
Pingback: 100 Great CSS Menu Tutorials | Designer Malaysia
Pingback: Blogging Well » Blog Archive » 15 CSS3 Navigation and Menu Tutorials and Techniques
http://www.raycreationsindia.com Ray Creations

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.
Pingback: 100 Great CSS Menu Tutorials（创建css菜单的100种教程） | 别动设计
Pingback: 15 CSS3 Navigation and Menu Tutorials | ExceptionHandle.com
Pingback: Free CSS Menu Templates & Design Tutorials | Daily Syntax
javier

hey man, how too changes color , help me please
Pingback: Bangladesh Web Lab | Bangladeshi Web Designer and Developer Blogs – For Local SEO,Make a Lot of Noise to Rank
Pingback: 30 Amazingly Great CSS Menu Tutorials | CS5 Design
Pingback: Create a Slick Menu using CSS3 | INSIC DESIGNS » Web Design
Pingback: 003 Css3 Menu | Free Css3 Menus | Dropdown Css3 Menus
Pingback: 003 Css3 Menu | Free Css3 Menus | Dropdown Css3 Menus
Pingback: 25 CSS3 Navigation and Menu Tutorials | 1step web design: Best for developer and designer
Pingback: Inspiration 30 Amazingly Great CSS Menu Tutorials
Pingback: 20 Best Tutorial to create Beautiful CSS menu | easytechtips.net
Pingback: 35 Amazingly Great CSS Menu Tutorials | Web Design Core
Pingback: My Blog - CSS3 Navigations and Menu Tutorials
Pingback: Backlink Center » 30 Amazingly Great CSS Menu Tutorials
http://www.raytemplates.com Blogger Templates

CSS is good and menu using css3 is even better. Thanks for sharing.
http://www.nunghot.com nan

Thanks a bunch for any help you can give me and awesome site.. and tutorials
Pingback: 30 آموزش ساخت منو CSS جذاب - مجله فناوری اطلاعات
Pingback: Stunning Collection Of CSS Menu Tutorials | The Wondrous Design Magazine
Prodyot

Very cute.
Thanks.
Pingback: 100 Great CSS Menu Tutorials |
Pingback: 40+ Excellent CSS3 Menu Tutorials | CS5 Design
Rajnish Shukla

its sooooo amaising to see…thanx..
Pingback: Download Free CSS Menu Designs | THE TOP INFORMATION
Pingback: Best drop down Menus Collection using jQuery and CSS | Web Designer Blog
Ali

Thank you so much dear:), This was very helpful:). Thanks for the tutorial.
Pingback: 100 Great CSS Menu TutorialsCreatives Magnet
Pingback: CSS3 Menu and Navigation Tutorials
Pingback: Wordpress Leaks » CSS3 Menu and Navigation Tutorials
Pingback: CSS3 Menu and Navigation Tutorials | auto
Pingback: CSS3 Menu and Navigation Tutorials
Pingback: 15 CSS3 Menu Navigation Tutorials | codeManiac - Snippets, Templates, API and the best developer content
Ado

hmm, not sure what I am doing wrong, but I inserted your code in my dreamweaver CS5 (for now with internal stylesheet for a quick check, and tested in diff browsers…even in live view of Dreamweaver I do not get the design you wrote here….the blue gradient shows in browser and liveview on each block blue alltogether instead on hover. It is not centered like your demo. Also fonts are still with text decoration etc (not a biggie, such I can adjust, but it is for me totally not as in your demo). Any advice what I am doing wrong or is the example just that?
Butttt it looks cool what you show in your demo;-)
chris

its awesome, but it seems not working in IE9
Pingback: 100 Great CSS Menu Tutorials | Creatives Magnet [tuts]
http://distributormalang.com proyektor

Nice menu. it’s hover like neon. I like it. thanks
Pingback: 50 Great CSS Menu Tutorials For Website | Free Web Designer Tool
Pingback: 100 Tutoriais de Menus com CSS | Lanchando
Pingback: [Help Me] Building A Menu Bar In Blogger - Blog Forum - Bloggeries
Pingback: CSS Menu tutorials | codingquery.com
Pingback: Free CSS Menu Designs {Mega Menu, Dropdown, Horizontal, Vertical}
ragnvaldr

I really like the work on this, so thanks, but I’m having a problem getting the gradient button to fade.

So with
ul[rel="sam1] li a:hover { #fafafa }
it’ll transition from white to the blue gradient, but I can’t get it to transition from the grey gradient of the background bar to the blue (over time, that is. It’ll go instantly, but not at the 700ms)
Habib

Great work.! However, tried it myself…does work in Firefox, not working in IE9 or Chrome. Any ideas as to how to get it working on all platforms?
Pingback: 20 Best Tutorial to Create Beautiful CSS menu | SEO Approved
Pingback: beautiful Css Navigation menus | Free Designing and Development Resources
Pingback: 50 CSS3 Navigation & Menus Tutorials
Pingback: 100 Great CSS Menu Tutorials | IT Teck, IT Tech, DOS, What is DOS, how to dos, dos command, new technology, technology
Pingback: 100 Great CSS Menu Tutorials « Web Development informations
Chris

When i add an image to it i can only get it on the right side of the bar close to the text but i need it on the left side to be close to the text i have every thing else just right on the bar but the image. Am i doing something wrong because i have tried just about everything i can think of.
- Chris
  
  never mind i just figured it out with the very last think i just used float: left; in the css.
Pingback: 40+ Excellent CSS3 Menu Tutorials 2012
Pingback: 20+ Tutoriales para Crear Menús de Navegación con CSS | Blog Diseño Web
Pingback: 45 BONITO CSS3 MENU DE NAVEGAÇÃO | Unconnectable
Pingback: CSS3 Type Of Menu and Navigation Tutorials
Pingback: 100 Great CSS Menu Tutorials « in CSS
http://www.indiagsm.in mobile phones

this is really gonna be rocking man good one float bottom right side
Pingback: 30 New Significant HTML5 And CSS3 Tips/Techniques/Tutorials | Tutsgeek.com
Pingback: 25 Useful CSS3 Menu Tutorials
http://www.system-support.us System Support

Its rocking but not working in IE9. Can any one give any suggestion for IE9?
martijn

Not working on IE

Added this to the CSS wrapper/buttons class for IE:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cccccc’, endColorstr=’#464646′); /* for IE */

you have to change color codes accordingly
Pingback: Nash's blog » CSS менюшки
Chris

Can someone help me with this? I’m trying to use an image as a element and I can’t seem to get it to center in the box and not have the blue gradient showing. http://www.ambismusic.com/test/index.php#
- Chris
  
  Actually, I have the button centered, but now I still have a problem where there is a small box around the image without the gradient (which is what I want) and a larger section around it that is stuck on blue. Can someone help me with this?!
  - insic
    
    I see that in your link the image button is now in center. Glad you sorted it out. Sorry for a late response.
  - Chris
    
    Thanks, but now I’m having a new problem. I can’t seem to get this bar to function properly in IE. Has anyone come up with any code that will fix this? I tried using the code posted down a bit but either I didn’t post it in the correct spot or it isn’t working properly. Any help is MUCH appreciated.
  - insic
    
    I see you put a “.” inside a.
    
    1. remove the “.”
    2. remove the block starting line 58 in your css.
    3. remove block on line number 107.
    
    4. give your wrapping “a” element 40px height.
    5. giive you image a padding-top or margin-top of approx 8px.
    
    Hope this one solves.
Pingback: 分享50个 CSS3 最佳应用示例 « 爱酷的空间-IT
Pingback: New CSS3 Menu and Navigation Tutorials | Web Revisions
Pingback: Slick CSS3 Menu |
Pingback: 45 Beautiful CSS3 Menu Navigation
Pingback: 108 Free CSS Menu Designs {Mega Menu, Dropdown, Horizontal, Vertical} – DESIGNTOOLEXPERT
Pingback: Of 15 CSS3 technology menu design appreciation and tutorial Web Page Design | Web Page Design Templates | Html5 Template
Pingback: 10 Great CSS Menu Tutorials | PSD Free
Pingback: Amazing Unique Horizontal CSS Menu Tutorials | web tuts
ab

not working trying to use it in master page:(:(
Oren Bala

The buttons are not centered across the toolbar like in the demo. They are aligned to the left. Could someone help me with this?
- Arotheus
  
  I managed to center it by wrapping it in a div to which I gave the following properties in CSS: “display: table; margin:0 auto;”
Pingback: 43 fatastic CSS Menu Tutorials | Web Designer Blog – Webdesigner Place
Pingback: 20 Fresh HTML5 and CSS3 Menu Tutorials
webdeveloper

awsum its working great tutorial!!!……………………..

Create a Slick Menu using CSS3

About the author: insic

Related Post

Postcard Design Tutorials and Inspirations

List of Responsive Grid System Frameworks

High Quality Responsive Image Gallery Plugins and Tutorials

A Quick Look Inside the New MySpace

EpicEditor – An Embeddable JavaScript Markdown Editor

Friends

About

Create a Slick Menu using CSS3

About the author: insic

Related Post

Share

Postcard Design Tutorials and Inspirations

List of Responsive Grid System Frameworks

High Quality Responsive Image Gallery Plugins and Tutorials

A Quick Look Inside the New MySpace

EpicEditor – An Embeddable JavaScript Markdown Editor

Popular Posts

Friends

About