During last several years, CSS-based menus are becoming more and more popular. Almost any website have own navigation menu, and quite often the menu plays a major role in mapping the site. Just because this is great solution to display lot of links and keep clean layout. Today I will show you how to create your own multilevel CSS3 dropdown menu (without extra JS files – pure CSS). Since this menu is made using CSS3 – it renders perfect on Firefox, Chrome and Safari browsers. This menu work also in IE8+, but the rounded corners and shadow will not be rendered.
Here are final result (what we will creating):
Here are samples and downloadable package:
Live Demo
[sociallocker]
download in package
[/sociallocker]
Ok, download the example files and lets start coding !
Step 1. HTML
As usual, we start with the HTML.
Here are html with our menu. As you can see – this is multi-level menu. I hope that you can easy to understand it.
index.html
01 | <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"> |
02 | <div class="example"> |
03 | <ul id="nav"> |
04 | <li class="current"><a href="https://www.script-tutorials.com/">Home</a></li> |
05 | <li><a href="https://www.script-tutorials.com/">Tutorials</a> |
06 | <ul> |
07 | <li><a href="https://www.script-tutorials.com/category/html-css/">HTML / CSS</a></li> |
08 | <li><a href="https://www.script-tutorials.com/category/jquery/">JS / jQuery</a> |
09 | <ul> |
10 | <li><a href="https://www.script-tutorials.com/category/jquery/">jQuery</a></li> |
11 | <li><a href="https://www.script-tutorials.com/category/javascript/">JS</a></li> |
12 | </ul> |
13 | </li> |
14 | <li><a href="https://www.script-tutorials.com/category/php/">PHP</a></li> |
15 | <li><a href="https://www.script-tutorials.com/category/mysql/">MySQL</a></li> |
16 | <li><a href="https://www.script-tutorials.com/category/xslt/">XSLT</a></li> |
17 | <li><a href="https://www.script-tutorials.com/category/ajax/">Ajax</a></li> |
18 | </ul> |
19 | </li> |
20 | <li><a href="https://www.script-tutorials.com/category/resources/">Resources</a> |
21 | <ul> |
22 | <li><a href="https://www.script-tutorials.com/category/resources/">By category</a> |
23 | <ul> |
24 | <li><a href="https://www.script-tutorials.com/category/php/">PHP</a></li> |
25 | <li><a href="https://www.script-tutorials.com/category/mysql/">MySQL</a></li> |
26 | <li><a href="https://www.script-tutorials.com/category/xslt/">XSLT</a></li> |
27 | <li><a href="https://www.script-tutorials.com/category/ajax/">Ajax</a></li> |
28 | </ul> |
29 | </li> |
30 | <li><a href="https://www.script-tutorials.com/category/resources/">By tag name</a> |
31 | <ul> |
32 | <li><a href="https://www.script-tutorials.com/tag/captcha/">captcha</a></li> |
33 | <li><a href="https://www.script-tutorials.com/tag/gallery/">gallery</a></li> |
34 | <li><a href="https://www.script-tutorials.com/tag/animation/">animation</a></li> |
35 | </ul> |
36 | </li> |
37 | </ul> |
38 | </li> |
39 | <li><a href="https://www.script-tutorials.com/about/">About</a></li> |
40 | <li><a href="https://www.script-tutorials.com/creating-css3-dropdown-menu/">Go Back To The Tutorial</a></li> |
41 | </ul> |
42 | </div> |
Step 2. CSS
Here are used CSS styles. First two selectors (you can skip it) belong to our demo page. All rest – belong to menu.
css/style.css
001 | /* demo page styles */ |
002 | body { |
003 | background:#eee; |
004 | margin:0; |
005 | padding:0; |
006 | } |
007 | .example { |
008 | background:#fff url(../images/clouds-in-blue-sky.jpg); |
009 | width:770px; |
010 | height:570px; |
011 | border:1px #000 solid; |
012 | margin:20px auto; |
013 | padding:15px; |
014 | border-radius:3px; |
015 | -moz-border-radius:3px; |
016 | -webkit-border-radius:3px; |
017 | } |
018 | /* main menu styles */ |
019 | #nav { |
020 | display:inline-block; |
021 | width:100%; |
022 | margin:0px auto; |
023 | padding:0; |
024 | background:#335599 url(../images/bg.png) repeat-x 0 -110px; |
025 | border-radius:10px; /*some css3*/ |
026 | -moz-border-radius:10px; |
027 | -webkit-border-radius:10px; |
028 | box-shadow:0 2px 2px rgba(0,0,0, .5); |
029 | -moz-box-shadow:0 2px 2px rgba(0,0,0, .5); |
030 | -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5); |
031 | } |
032 | #nav li { |
033 | margin:10px; |
034 | float:left; |
035 | position:relative; |
036 | list-style:none; |
037 | } |
038 | #nav a { |
039 | font-weight:bold; |
040 | color:#e7e5e5; |
041 | text-decoration:none; |
042 | display:block; |
043 | padding:8px 20px; |
044 | border-radius:10px; /*some css3*/ |
045 | -moz-border-radius:10px; |
046 | -webkit-border-radius:10px; |
047 | text-shadow:0 2px 2px rgba(0,0,0, .7); |
048 | } |
049 | /* selected menu element */ |
050 | #nav .current a, #nav li:hover > a { |
051 | background:#7788aa url(../images/bg.png) repeat-x 0 -20px; |
052 | color:#000; |
053 | border-top:1px solid #f8f8f8; |
054 | box-shadow:0 2px 2px rgba(0,0,0, .7); /*some css3*/ |
055 | -moz-box-shadow:0 2px 2px rgba(0,0,0, .7); |
056 | -webkit-box-shadow:0 2px 2px rgba(0,0,0, .7); |
057 | text-shadow:0 2px 2px rgba(255,255,255, 0.7); |
058 | } |
059 | /* sublevels */ |
060 | #nav ul li:hover a, #nav li:hover li a { |
061 | background:none; |
062 | border:none; |
063 | color:#000; |
064 | } |
065 | #nav ul li a:hover { |
066 | background:#335599 url(../images/bg.png) repeat-x 0 -100px; |
067 | color:#fff; |
068 | border-radius:10px; /*some css3*/ |
069 | -moz-border-radius:10px; |
070 | -webkit-border-radius:10px; |
071 | text-shadow:0 2px 2px rgba(0,0,0, 0.7); |
072 | } |
073 | #nav ul li:first-child > a { |
074 | -moz-border-radius-topleft:10px; /*some css3*/ |
075 | -moz-border-radius-topright:10px; |
076 | -webkit-border-top-left-radius:10px; |
077 | -webkit-border-top-right-radius:10px; |
078 | } |
079 | #nav ul li:last-child > a { |
080 | -moz-border-radius-bottomleft:10px; /*some css3*/ |
081 | -moz-border-radius-bottomright:10px; |
082 | -webkit-border-bottom-left-radius:10px; |
083 | -webkit-border-bottom-right-radius:10px; |
084 | } |
085 | /* drop down */ |
086 | #nav li:hover > ul { |
087 | opacity:1; |
088 | visibility:visible; |
089 | } |
090 | #nav ul { |
091 | opacity:0; |
092 | visibility:hidden; |
093 | padding:0; |
094 | width:175px; |
095 | position:absolute; |
096 | background:#aabbcc url(../images/bg.png) repeat-x 0 0; |
097 | border:1px solid #7788aa; |
098 | border-radius:10px; /*some css3*/ |
099 | -moz-border-radius:10px; |
100 | -webkit-border-radius:10px; |
101 | box-shadow:0 2px 2px rgba(0,0,0, .5); |
102 | -moz-box-shadow:0 2px 2px rgba(0,0,0, .5); |
103 | -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5); |
104 | -moz-transition:opacity .25s linear, visibility .1s linear .1s; |
105 | -webkit-transition:opacity .25s linear, visibility .1s linear .1s; |
106 | -o-transition:opacity .25s linear, visibility .1s linear .1s; |
107 | transition:opacity .25s linear, visibility .1s linear .1s; |
108 | } |
109 | #nav ul li { |
110 | float:none; |
111 | margin:0; |
112 | } |
113 | #nav ul a { |
114 | font-weight:normal; |
115 | text-shadow:0 2px 2px rgba(255,255,255, 0.7); |
116 | } |
117 | #nav ul ul { |
118 | left:160px; |
119 | top:0px; |
120 | } |
Quite all css code is belong to css menu. I don`t including this into article. It always available in download package
Step 3. Images
Our menu using only single image to reach custom gradient effect. This will white-transparent image (PNG) which we will apply to different elements to make gradient. And, using background position we will able to adjust it (make more lighter or darker). Second image – just background (clouds) for our demo page.
Live Demo
Conclusion
Hope you enjoyed with this tutorial, don’t forget to tell thanks and leave a comment 🙂 Good luck!
