CSS3 drop sliding list menu tutorial. This is our sixth CSS3 menu. Today we will make drop sliding list menu. We will using transition effects for sliding submenus. Of course, make attention that this animation will work only in most fresh browsers like FF, Chrome, Safary, ID9, Opera10. Older browsers will supported too, but without animation.
This is our final result (how menu will looks):
Here are samples and downloadable package:
Live Demo
[sociallocker]
download in package
[/sociallocker]
Ok, download our example files (package) and lets start making this menu!
Step 1. HTML
Here are html code of our menu. I will hide repeating elements to make code smaller here. Anyway – you will able to see whole code in our package.
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 sliding list menu #6</title>
</head>
<body>
<div class="example">
<ul class="menu">
<!-- defining top elements -->
<li class="main"><a href="https://www.script-tutorials.com/">Home</a></li>
<li class="main" id="has-sub1"><a href="https://www.script-tutorials.com/">Tutorials</a></li>
<li class="main" id="has-sub2"><a href="https://www.script-tutorials.com/category/resources/">Resources</a></li>
<li class="main" id="has-sub3"><a href="#">Menus #4</a></li>
<li class="main" id="has-sub4"><a href="#">Menus #5</a></li>
<li class="main"><a href="https://www.script-tutorials.com/about/">About</a></li>
<li class="main"><a href="https://www.script-tutorials.com/creating-css3-drop-sliding-list-menu-6/">Back</a></li>
<!-- defining sub elements -->
<li class="sub" id="sub1">
<table><tr>
<td>
<dl>
<dt>Links #1</dt>
<dd><a href="https://www.script-tutorials.com/category/html-css/">HTML / CSS</a></dd>
<dd><a href="https://www.script-tutorials.com/category/jquery/">JS / jQuery</a></dd>
<dd><a href="https://www.script-tutorials.com/category/php/">PHP</a></dd>
<dd><a href="https://www.script-tutorials.com/category/mysql/">MySQL</a></dd>
<dt>Links #2</dt>
<dd><a href="https://www.script-tutorials.com/category/xslt/">XSLT</a></dd>
<dd><a href="https://www.script-tutorials.com/category/ajax/">Ajax</a></dd>
<dd><a href="https://www.script-tutorials.com/category/html-css/">HTML / CSS</a></dd>
</dl>
</td>
<td>
<dl>
<dt>Links #3</dt>
<dd><a href="#">link 31</a></dd>
<dd><a href="#">link 32</a></dd>
<dd><a href="#">link 33</a></dd>
<dd><a href="#">link 34</a></dd>
<dd><a href="#">link 35</a></dd>
<dd><a href="#">link 36</a></dd>
<dd><a href="#">link 37</a></dd>
<dd><a href="#">link 38</a></dd>
</dl>
</td>
<td>
<dl>
<!-- repeated sublinks -->
</dl>
</td>
</tr></table>
</li>
<!-- and other repeated subs with similar structure -->
</ul>
<div style="clear:both"></div>
</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 – menu #6 styles.
css/style.css
/* demo page styles */
body {
background:#eee;
margin:0;
padding:0;
}
.example {
position:relative;
background:#fff url(../images/background.jpg);
width:765px;
height:560px;
border:1px #000 solid;
margin:20px auto;
padding:20px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
/* main menu styles */
.menu {
font-family:Verdana, sans-serif;
list-style:none;
margin:0;
min-height:35px;
padding:0;
position:relative;
width:100%
}
.menu li.main {
float:left;
padding-right:1px
}
.menu li.main a {
background-color:#000;
color:#fff;
display:block;
font-size:13px;
font-weight:700;
height:35px;
line-height:35px;
padding:0 25px;
text-decoration:none
}
.menu li.sub {
background-color:#444;
border:0;
clear:both;
float:left;
height:0;
overflow:hidden;
position:relative;
width:100%;
-moz-transform-origin: left top;
-ms-transform-origin: left top;
-o-transform-origin: left top;
-webkit-transform-origin: left top;
transform-origin: left top;
-moz-transition: height 0.5s ease-in-out;
-ms-transition: height 0.5s ease-in-out;
-o-transition: height 0.5s ease-in-out;
-webkit-transition: height 0.5s ease-in-out;
transition: height 0.5s ease-in-out;
-moz-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
}
.menu li.sub table {
width:100%
}
.menu li.sub dl {
background-color:#fff;
height:195px;
margin:5px 5px 0 0;
padding:10px;
-moz-border-radius:8px;
border-radius:8px
}
.menu li.sub dt {
border:1px solid #000;
color:#000;
font-size:14px;
font-weight:700;
line-height:18px;
margin:1px 0;
padding:0 10px;
border-radius:5px;
-moz-border-radius:5px
}
.menu li.sub dt:hover {
background-color:#ccc
}
.menu li.sub dd {
margin:0;
padding:0
}
.menu li.sub dd a {
color:#666;
display:block;
font-size:12px;
line-height:20px;
padding-left:30px;
text-decoration:none;
-moz-border-radius:5px;
border-radius:5px
}
.menu li.sub dd a:hover {
background-color:#ccc;
color:#444
}
.menu li#has-sub1:hover ~ li#sub1,
.menu li#has-sub2:hover ~ li#sub2,
.menu li#has-sub3:hover ~ li#sub3,
.menu li#has-sub4:hover ~ li#sub4 {
height:240px;
-moz-transition: height 0.5s ease-in-out 0.2s
-ms-transition: height 0.5s ease-in-out 0.2s
-o-transition: height 0.5s ease-in-out 0.2s
-webkit-transition: height 0.5s ease-in-out 0.2s
transition: height 0.5s ease-in-out 0.2s
}
li#sub1:hover,
li#sub2:hover,
li#sub3:hover,
li#sub4:hover {
height:240px;
-moz-transition: height 0.5s ease-in-out 0.2s
-ms-transition: height 0.5s ease-in-out 0.2s
-o-transition: height 0.5s ease-in-out 0.25
-webkit-transition: height 0.5s ease-in-out 0.2s
transition: height 0.5s ease-in-out 0.2s
}
Step 3. Images
Here are only one image for background:
Live Demo
Conclusion
Today we made new nice menu (sixth), your comments and thanks are very welcomed. Good luck!
Initial idea has been taken from here.
