CSS3 Dropdown Menu #2 tutorial. This is our second drop down menu. Today it is in the green palette. The menu will include a submenus that will slide when we hovering the parent elements. That menu will good for green palette templates. And of course – no any JS – only pure CSS. Since this menu is made using CSS3 – it renders perfect on Firefox, Chrome and Safari browsers (possible last Opera will support it too). And, as I read, transitions have been billed to be included in IE10.
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.
index.html
01 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
02 |
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> |
03 |
<head> |
04 |
<link rel="stylesheet" href="css/style.css" type="text/css" media="all"> |
05 |
<title>CSS3 drop down menu #2</title> |
06 |
</head> |
07 |
<body> |
08 |
<div class="example"> |
09 |
<ul id="nav"> |
10 |
<li><a href="https://www.script-tutorials.com/">Home</a></li> |
11 |
<li><a href="https://www.script-tutorials.com/">Tutorials</a> |
12 |
<div> |
13 |
<ul> |
14 |
<li><a href="https://www.script-tutorials.com/category/html-css/">HTML / CSS</a></li> |
15 |
<li><a href="https://www.script-tutorials.com/category/jquery/">JS / jQuery</a></li> |
16 |
<li><a href="https://www.script-tutorials.com/category/php/">PHP</a></li> |
17 |
<li><a href="https://www.script-tutorials.com/category/mysql/">MySQL</a></li> |
18 |
<li><a href="https://www.script-tutorials.com/category/xslt/">XSLT</a></li> |
19 |
<li><a href="https://www.script-tutorials.com/category/ajax/">Ajax</a></li> |
20 |
</ul> |
21 |
</div> |
22 |
</li> |
23 |
<li><a href="https://www.script-tutorials.com/category/resources/">Resources</a> |
24 |
<div> |
25 |
<ul> |
26 |
<li><a href="https://www.script-tutorials.com/category/php/">PHP</a></li> |
27 |
<li><a href="https://www.script-tutorials.com/category/mysql/">MySQL</a></li> |
28 |
<li><a href="https://www.script-tutorials.com/category/xslt/">XSLT</a></li> |
29 |
<li><a href="https://www.script-tutorials.com/category/ajax/">Ajax</a></li> |
30 |
</ul> |
31 |
</div> |
32 |
</li> |
33 |
<li><a href="https://www.script-tutorials.com/category/resources/">Other pages</a> |
34 |
<div> |
35 |
<ul> |
36 |
<li><a href="#">Page 1</a></li> |
37 |
<li><a href="#">Page 2</a></li> |
38 |
<li><a href="#">Page 3</a></li> |
39 |
<li><a href="#">Page 4</a></li> |
40 |
<li><a href="#">Page 5</a></li> |
41 |
</ul> |
42 |
</div> |
43 |
</li> |
44 |
<li><a href="https://www.script-tutorials.com/about/">About</a></li> |
45 |
<li><a href="https://www.script-tutorials.com/xxxxxxxxxxx/">Go Back To The Tutorial</a></li> |
46 |
<li class="pad"></li> |
47 |
</ul> |
48 |
</div> |
49 |
</body> |
50 |
</html> |
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 |
position:relative; |
009 |
background:#fff url(../images/background.jpg); |
010 |
width:670px; |
011 |
height:470px; |
012 |
border:1px #000 solid; |
013 |
margin:20px auto; |
014 |
padding:15px; |
015 |
border-radius:3px; |
016 |
-moz-border-radius:3px; |
017 |
-webkit-border-radius:3px; |
018 |
} |
019 |
/* main menu styles */ |
020 |
#nav,#nav ul { |
021 |
font-family:verdana; |
022 |
list-style:none; |
023 |
margin:0; |
024 |
padding:0; |
025 |
position:relative; |
026 |
} |
027 |
#nav { |
028 |
height:50px; |
029 |
left:0; |
030 |
overflow:hidden; |
031 |
top:0; |
032 |
} |
033 |
#nav li { |
034 |
float:left; |
035 |
position:relative; |
036 |
z-index:10; |
037 |
} |
038 |
#nav li a { |
039 |
background:url(../images/bg-menu.png) no-repeat center top; |
040 |
color:#fff; |
041 |
display:block; |
042 |
float:left; |
043 |
font-size:14px; |
044 |
height:51px; |
045 |
line-height:40px; |
046 |
padding:0 10px; |
047 |
position:relative; |
048 |
text-decoration:none; |
049 |
z-index:20; |
050 |
} |
051 |
#nav li:first-child a { |
052 |
background:url(../images/bg-menu.png) no-repeat left top; |
053 |
padding-left:35px; |
054 |
} |
055 |
#nav li ul li:first-child a { |
056 |
background-image:none; |
057 |
padding-left:10px; |
058 |
} |
059 |
#nav li.pad { |
060 |
background:url(../images/bg-menu.png) no-repeat right top; |
061 |
display:block; |
062 |
height:51px; |
063 |
width:35px; |
064 |
} |
065 |
#nav ul { |
066 |
background:#009900; |
067 |
height:auto; |
068 |
padding:10px 0; |
069 |
position:absolute; |
070 |
top:-115px; |
071 |
width:180px; |
072 |
z-index:1; |
073 |
border-radius:8px; /*some css3*/ |
074 |
-moz-border-radius:8px; |
075 |
-webkit-border-radius:8px; |
076 |
transition:0.8s ease-in-out; |
077 |
box-shadow:2px 2px 3px rgba(0, 0, 0, 0.5); |
078 |
-moz-box-shadow:2px 2px 3px rgba(0, 0, 0, 0.5); |
079 |
-webkit-box-shadow:2px 2px 3px rgba(0, 0, 0, 0.5); |
080 |
-moz-transition:0.8s ease-in-out; |
081 |
-o-transition:0.8s ease-in-out; |
082 |
-webkit-transition:all 0.8s ease-in-out; |
083 |
} |
084 |
#nav ul li { |
085 |
width:180px; |
086 |
} |
087 |
#nav ul li a { |
088 |
background:transparent; |
089 |
height:20px; |
090 |
line-height:20px; |
091 |
width:160px; |
092 |
} |
093 |
#nav:hover { |
094 |
height:200px; |
095 |
} |
096 |
#nav li:hover ul { |
097 |
-moz-transform:translate(0,161px); /*some css3*/ |
098 |
-o-transform:translate(0,161px); |
099 |
-webkit-transform:translate(0,161px); |
100 |
transform: translate(0,161px); |
101 |
} |
102 |
#nav a:hover,#nav li:hover > a { |
103 |
color:#99ff33; |
104 |
} |
Step 3. Images
Our menu using only single image to reach custom background with and fading effect. Second image – just some green background for our demo.
Live Demo
Conclusion
Hope you enjoyed with this tutorial, don’t forget to tell thanks and leave a comment 🙂 Good luck!