Creating a CSS3 Dropdown Menu #2

Creating CSS3 dropdown menu #2

Creating CSS3 Dropdown Menu #2

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):

css3 menu2

Here are samples and downloadable package:

Live Demo
download in package

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
    <title>CSS3 drop down menu #2</title>
</head>
<body>
    <div class="example">
        <ul id="nav">
            <li><a href="http://www.script-tutorials.com/">Home</a></li>
            <li><a href="http://www.script-tutorials.com/">Tutorials</a>
                <div>
                    <ul>
                        <li><a href="http://www.script-tutorials.com/category/html-css/">HTML / CSS</a></li>
                        <li><a href="http://www.script-tutorials.com/category/jquery/">JS / jQuery</a></li>
                        <li><a href="http://www.script-tutorials.com/category/php/">PHP</a></li>
                        <li><a href="http://www.script-tutorials.com/category/mysql/">MySQL</a></li>
                        <li><a href="http://www.script-tutorials.com/category/xslt/">XSLT</a></li>
                        <li><a href="http://www.script-tutorials.com/category/ajax/">Ajax</a></li>
                    </ul>
                </div>
            </li>
            <li><a href="http://www.script-tutorials.com/category/resources/">Resources</a>
                <div>
                    <ul>
                        <li><a href="http://www.script-tutorials.com/category/php/">PHP</a></li>
                        <li><a href="http://www.script-tutorials.com/category/mysql/">MySQL</a></li>
                        <li><a href="http://www.script-tutorials.com/category/xslt/">XSLT</a></li>
                        <li><a href="http://www.script-tutorials.com/category/ajax/">Ajax</a></li>
                    </ul>
                </div>
            </li>
            <li><a href="http://www.script-tutorials.com/category/resources/">Other pages</a>
                <div>
                    <ul>
                        <li><a href="#">Page 1</a></li>
                        <li><a href="#">Page 2</a></li>
                        <li><a href="#">Page 3</a></li>
                        <li><a href="#">Page 4</a></li>
                        <li><a href="#">Page 5</a></li>
                    </ul>
                </div>
            </li>
            <li><a href="http://www.script-tutorials.com/about/">About</a></li>
            <li><a href="http://www.script-tutorials.com/xxxxxxxxxxx/">Go Back To The Tutorial</a></li>
            <li class="pad"></li>
        </ul>
    </div>
</body>
</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

/* demo page styles */
body {
    background:#eee;
    margin:0;
    padding:0;
}
.example {
    position:relative;
    background:#fff url(../images/background.jpg);
    width:670px;
    height:470px;
    border:1px #000 solid;
    margin:20px auto;
    padding:15px;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}

/* main menu styles */
#nav,#nav ul {
	font-family:verdana;
	list-style:none;
	margin:0;
	padding:0;
	position:relative;
}
#nav {
	height:50px;
	left:0;
	overflow:hidden;
	top:0;
}
#nav li {
	float:left;
	position:relative;
	z-index:10;
}
#nav li a {
	background:url(../images/bg-menu.png) no-repeat center top;
	color:#fff;
	display:block;
	float:left;
	font-size:14px;
	height:51px;
	line-height:40px;
	padding:0 10px;
	position:relative;
	text-decoration:none;
	z-index:20;
}
#nav li:first-child a {
	background:url(../images/bg-menu.png) no-repeat left top;
	padding-left:35px;
}
#nav li ul li:first-child a {
	background-image:none;
	padding-left:10px;
}
#nav li.pad {
	background:url(../images/bg-menu.png) no-repeat right top;
	display:block;
	height:51px;
	width:35px;
}
#nav ul {
	background:#009900;
	height:auto;
	padding:10px 0;
	position:absolute;
	top:-115px;
	width:180px;
	z-index:1;

	border-radius:8px; /*some css3*/
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	transition:0.8s ease-in-out;
	box-shadow:2px 2px 3px rgba(0, 0, 0, 0.5);
	-moz-box-shadow:2px 2px 3px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow:2px 2px 3px rgba(0, 0, 0, 0.5);
	-moz-transition:0.8s ease-in-out;
	-o-transition:0.8s ease-in-out;
	-webkit-transition:all 0.8s ease-in-out;
}
#nav ul li {
	width:180px;
}
#nav ul li a {
	background:transparent;
	height:20px;
	line-height:20px;
	width:160px;
}
#nav:hover {
	height:200px;
}
#nav li:hover ul {
	-moz-transform:translate(0,161px); /*some css3*/
	-o-transform:translate(0,161px);
	-webkit-transform:translate(0,161px);
	transform: translate(0,161px);
}
#nav a:hover,#nav li:hover > a {
	color:#99ff33;
}

Step 3. Images

Our menu using only single image to reach custom backgroundwith and fading effect. Second image – just some green background for our demo.

    background menu
    page background

Live Demo
download in package

Conclusion

Hope you enjoyed with this tutorial, don’t forget to tell thanks and leave a comment :) Good luck!

Initial idea has been taken from here. Thank Stu Nicholls for his good website.

Enjoyed this Post?

If you enjoy our articles, feel free to share our tutorials with your friends.

10 thoughts on “Creating a CSS3 Dropdown Menu #2

  1. Very good example but I have a question to the browser explorer 9 does not work you would have to add the code to make it work

    • Hi Samir,
      It works in IE10, but yes, unfortunately we forgot to include
      transform: translate(0,161px);
      property for the ‘#nav li:hover ul’ selector, please add it

  2. Hi,
    is very nice, i put the code, simply “-transform: translate(0,161px);” in ‘#nav li:hover ul’ but dont work in IE
    some help?
    Thank you.

    • Hi Mihai,
      You should use
      transform: translate(0,161px);
      instead of
      - transform: translate(0,161px);
      (it works for IE10)

Leave a Reply

Your email address will not be published. Required fields are marked *

*

     

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>