Home » Tutorials

Creating CSS3 Drop sliding list Menu #6

Tutorials
Author Reading 15 min Views 215 Published by Modified by

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

css3 menu6

Here are samples and downloadable package:

Contents
  1. Step 1. HTML
  2. index.html
  3. Step 2. CSS
  4. css/style.css
  5. Step 3. Images
  6. Conclusion
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

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 sliding list menu #6</title>
06 </head>
07 <body>
08 <div class="example">
09         <ul class="menu">
10         <!-- defining top elements -->
11                 <li class="main"><a href="https://www.script-tutorials.com/">Home</a></li>
12                 <li class="main" id="has-sub1"><a href="https://www.script-tutorials.com/">Tutorials</a></li>
13                 <li class="main" id="has-sub2"><a href="https://www.script-tutorials.com/category/resources/">Resources</a></li>
14                 <li class="main" id="has-sub3"><a href="#">Menus #4</a></li>
15                 <li class="main" id="has-sub4"><a href="#">Menus #5</a></li>
16                 <li class="main"><a href="https://www.script-tutorials.com/about/">About</a></li>
17                 <li class="main"><a href="https://www.script-tutorials.com/creating-css3-drop-sliding-list-menu-6/">Back</a></li>
18         <!-- defining sub elements -->
19         <li class="sub" id="sub1">
20             <table><tr>
21                 <td>
22                                 <dl>
23                                         <dt>Links #1</dt>
24                         <dd><a href="https://www.script-tutorials.com/category/html-css/">HTML / CSS</a></dd>
25                         <dd><a href="https://www.script-tutorials.com/category/jquery/">JS / jQuery</a></dd>
26                         <dd><a href="https://www.script-tutorials.com/category/php/">PHP</a></dd>
27                         <dd><a href="https://www.script-tutorials.com/category/mysql/">MySQL</a></dd>
28                                         <dt>Links #2</dt>
29                         <dd><a href="https://www.script-tutorials.com/category/xslt/">XSLT</a></dd>
30                         <dd><a href="https://www.script-tutorials.com/category/ajax/">Ajax</a></dd>
31                         <dd><a href="https://www.script-tutorials.com/category/html-css/">HTML / CSS</a></dd>
32                                 </dl>
33                 </td>
34                 <td>
35                                 <dl>
36                                         <dt>Links #3</dt>
37                                         <dd><a href="#">link 31</a></dd>
38                                         <dd><a href="#">link 32</a></dd>
39                                         <dd><a href="#">link 33</a></dd>
40                                         <dd><a href="#">link 34</a></dd>
41                                         <dd><a href="#">link 35</a></dd>
42                                         <dd><a href="#">link 36</a></dd>
43                                         <dd><a href="#">link 37</a></dd>
44                                         <dd><a href="#">link 38</a></dd>
45                                 </dl>
46                 </td>
47                 <td>
48                                 <dl>
49                                         <!-- repeated sublinks -->
50                                 </dl>
51                 </td>
52             </tr></table>
53         </li>
54         <!-- and other repeated subs with similar structure -->
55         </ul>
56     <div style="clear:both"></div>
57 </div>
58 </body>
59 </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

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:765px;
011     height:560px;
012     border:1px #000 solid;
013     margin:20px auto;
014     padding:20px;
015     border-radius:3px;
016     -moz-border-radius:3px;
017     -webkit-border-radius:3px;
018 }
019 /* main menu styles */
020 .menu {
021     font-family:Verdana, sans-serif;
022     list-style:none;
023     margin:0;
024     min-height:35px;
025     padding:0;
026     position:relative;
027     width:100%
028 }
029 .menu li.main {
030     float:left;
031     padding-right:1px
032 }
033 .menu li.main a {
034     background-color:#000;
035     color:#fff;
036     display:block;
037     font-size:13px;
038     font-weight:700;
039     height:35px;
040     line-height:35px;
041     padding:0 25px;
042     text-decoration:none
043 }
044 .menu li.sub {
045     background-color:#444;
046     border:0;
047     clear:both;
048     float:left;
049     height:0;
050     overflow:hidden;
051     position:relative;
052     width:100%;
053     -moz-transform-origin: left top;
054     -ms-transform-origin: left top;
055     -o-transform-origin: left top;
056     -webkit-transform-origin: left top;
057     transform-origin: left top;
058     -moz-transition: height 0.5s ease-in-out;
059     -ms-transition: height 0.5s ease-in-out;
060     -o-transition: height 0.5s ease-in-out;
061     -webkit-transition: height 0.5s ease-in-out;
062     transition: height 0.5s ease-in-out;
063     -moz-border-radius: 0 0 10px 10px;
064     border-radius: 0 0 10px 10px;
065 }
066 .menu li.sub table {
067     width:100%
068 }
069 .menu li.sub dl {
070     background-color:#fff;
071     height:195px;
072     margin:5px 5px 0 0;
073     padding:10px;
074     -moz-border-radius:8px;
075     border-radius:8px
076 }
077 .menu li.sub dt {
078     border:1px solid #000;
079     color:#000;
080     font-size:14px;
081     font-weight:700;
082     line-height:18px;
083     margin:1px 0;
084     padding:0 10px;
085     border-radius:5px;
086     -moz-border-radius:5px
087 }
088 .menu li.sub dt:hover {
089     background-color:#ccc
090 }
091 .menu li.sub dd {
092     margin:0;
093     padding:0
094 }
095 .menu li.sub dd a {
096     color:#666;
097     display:block;
098     font-size:12px;
099     line-height:20px;
100     padding-left:30px;
101     text-decoration:none;
102     -moz-border-radius:5px;
103     border-radius:5px
104 }
105 .menu li.sub dd a:hover {
106     background-color:#ccc;
107     color:#444
108 }
109 .menu li#has-sub1:hover ~ li#sub1,
110 .menu li#has-sub2:hover ~ li#sub2,
111 .menu li#has-sub3:hover ~ li#sub3,
112 .menu li#has-sub4:hover ~ li#sub4 {
113     height:240px;
114     -moz-transition: height 0.5s ease-in-out 0.2s
115     -ms-transition: height 0.5s ease-in-out 0.2s
116     -o-transition: height 0.5s ease-in-out 0.2s
117     -webkit-transition: height 0.5s ease-in-out 0.2s
118     transition: height 0.5s ease-in-out 0.2s
119 }
120 li#sub1:hover,
121 li#sub2:hover,
122 li#sub3:hover,
123 li#sub4:hover {
124     height:240px;
125     -moz-transition: height 0.5s ease-in-out 0.2s
126     -ms-transition: height 0.5s ease-in-out 0.2s
127     -o-transition: height 0.5s ease-in-out 0.25
128     -webkit-transition: height 0.5s ease-in-out 0.2s
129     transition: height 0.5s ease-in-out 0.2s
130 }

Step 3. Images

Here are only one image for background:

    page 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.
Rate article
© 2025 Script Tutorials