Script Tutorials

Whirling CSS3 dropdown menu

—

by

admin
in

CSS3 menu. Various dropdown menus can be easily created with CSS3 with the help of selectors. Just connect your imagination – and you will create a truly new and unique design. In today’s lesson, we will create a new CSS3 drop-down menu with new effect: when you hover on the upper menu items, the submenu items appear whirling. Just follow this tutorial to see the step by step process of building this menu.

Live Demo

Step 1. HTML

First of all we will need to create the HTML structure for our CSS menu. Like most of other dropdown menus, this is UL-LI drop-down menu. Here is the HTML markup of this menu:

index.html

01 <ul class="menu">
02     <li><a href="#">Home</a></li>
03     <li><a href="#s1">Menu 1</a>
04         <ul class="submenu">
05             <li><a href="#">Submenu a</a></li>
06             <li><a href="#">Submenu b</a></li>
07             <li><a href="#">Submenu c</a></li>
08             <li><a href="#">Submenu d</a></li>
09             <li><a href="#">Submenu e</a></li>
10             <li><a href="#">Submenu f</a></li>
11             <li><a href="#">Submenu g</a></li>
12             <li><a href="#">Submenu h</a></li>
13         </ul>
14     </li>
15     <li class="active"><a href="#s2">Menu 2</a>
16         <ul class="submenu">
17             <li><a href="#">Submenu a</a></li>
18             <li><a href="#">Submenu b</a></li>
19             <li><a href="#">Submenu c</a></li>
20             <li><a href="#">Submenu d</a></li>
21             <li><a href="#">Submenu e</a></li>
22             <li><a href="#">Submenu f</a></li>
23             <li><a href="#">Submenu g</a></li>
24             <li><a href="#">Submenu h</a></li>
25         </ul>
26     </li>
27     <li><a href="#">Menu 3</a>
28         <ul class="submenu">
29             <li><a href="#">Submenu a</a></li>
30             <li><a href="#">Submenu b</a></li>
31             <li><a href="#">Submenu c</a></li>
32             <li><a href="#">Submenu d</a></li>
33             <li><a href="#">Submenu e</a></li>
34             <li><a href="#">Submenu f</a></li>
35             <li><a href="#">Submenu g</a></li>
36             <li><a href="#">Submenu h</a></li>
37         </ul>
38     </li>
39     <li><a href="#">Menu 4</a></li>
40     <li><a href="https://www.script-tutorials.com/whirling-dropdown-menu/">Back to tutorial</a></li>
41 </ul>

Step 2. CSS

Let’s start the CSS by preparing the basic rules:

css/main.css

01 .menu, .menu ul {
02     list-style: none;
03     padding: 0;
04     margin: 0;
05 }
06 .menu {
07     height: 58px;
08 }
09 .menu li {
10     background: -moz-linear-gradient(#292929, #252525);
11     background: -ms-linear-gradient(#292929, #252525);
12     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #252525));
13     background: -webkit-linear-gradient(#292929, #252525);
14     background: -o-linear-gradient(#292929, #252525);
15     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525');
16     -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525')";
17     background: linear-gradient(#292929, #252525);
18     border-bottom: 2px solid #181818;
19     border-top: 2px solid #303030;
20     min-width: 160px;
21 }
22 .menu > li {
23     display: block;
24     float: left;
25     position: relative;
26 }
27 .menu > li:first-child {
28     border-radius: 5px 0 0;
29 }
30 .menu a {
31     border-left: 3px solid rgba(0, 0, 0, 0);
32     color: #808080;
33     display: block;
34     font-family: 'Lucida Console';
35     font-size: 18px;
36     line-height: 54px;
37     padding: 0 25px;
38     text-decoration: none;
39     text-transform: uppercase;
40 }

When we hover on individual menu items, we will highlight them:

01 .menu li:hover {
02     background-color: #1c1c1c;
03     background: -moz-linear-gradient(#1c1c1c, #1b1b1b);
04     background: -ms-linear-gradient(#1c1c1c, #1b1b1b);
05     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1c1c1c), color-stop(100%, #1b1b1b));
06     background: -webkit-linear-gradient(#1c1c1c, #1b1b1b);
07     background: -o-linear-gradient(#1c1c1c, #1b1b1b);
08     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b');
09     -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b')";
10     background: linear-gradient(#1c1c1c, #1b1b1b);
11     border-bottom: 2px solid #222222;
12     border-top: 2px solid #1B1B1B;
13 }
14 .menu li:hover > a {
15     border-radius: 5px 0 0 0;
16     border-left: 3px solid #C4302B;
17     color: #C4302B;
18 }

The submenu is hidden by default, and it’s elements are rotated by 90 degrees. When we hover on the top-level menu items, the submenu appears with its children.

01 /* submenu styles */
02 .submenu {
03     left: 0;
04     max-height: 0;
05     position: absolute;
06     top: 100%;
07     z-index: 0;
08     -webkit-perspective: 400px;
09     -moz-perspective: 400px;
10     -ms-perspective: 400px;
11     -o-perspective: 400px;
12     perspective: 400px;
13 }
14 .submenu li {
15     opacity: 0;
16     -webkit-transform: rotateY(90deg);
17     -moz-transform: rotateY(90deg);
18     -ms-transform: rotateY(90deg);
19     -o-transform: rotateY(90deg);
20     transform: rotateY(90deg);
21     -webkit-transition: opacity .4s, -webkit-transform .5s;
22     -moz-transition: opacity .4s, -moz-transform .5s;
23     -ms-transition: opacity .4s, -ms-transform .5s;
24     -o-transition: opacity .4s, -o-transform .5s;
25     transition: opacity .4s, transform .5s;
26 }
27 .menu .submenu li:hover a {
28     border-left: 3px solid #454545;
29     border-radius: 0;
30     color: #ffffff;
31 }
32 .menu > li:hover .submenu, .menu > li:focus .submenu {
33     max-height: 2000px;
34     z-index: 10;
35 }
36 .menu > li:hover .submenu li, .menu > li:focus .submenu li {
37     opacity: 1;
38     -webkit-transform: none;
39     -moz-transform: none;
40     -ms-transform: none;
41     -o-transform: none;
42     transform: none;
43 }

Finally, to add uniqueness – let’s add a delay for each sub-menu item, thus they will appear at different times:

001 /* CSS3 delays for transition effects */
002 .menu li:hover .submenu li:nth-child(1) {
003     -webkit-transition-delay: 0s;
004     -moz-transition-delay: 0s;
005     -ms-transition-delay: 0s;
006     -o-transition-delay: 0s;
007     transition-delay: 0s;
008 }
009 .menu li:hover .submenu li:nth-child(2) {
010     -webkit-transition-delay: 50ms;
011     -moz-transition-delay: 50ms;
012     -ms-transition-delay: 50ms;
013     -o-transition-delay: 50ms;
014     transition-delay: 50ms;
015 }
016 .menu li:hover .submenu li:nth-child(3) {
017     -webkit-transition-delay: 100ms;
018     -moz-transition-delay: 100ms;
019     -ms-transition-delay: 100ms;
020     -o-transition-delay: 100ms;
021     transition-delay: 100ms;
022 }
023 .menu li:hover .submenu li:nth-child(4) {
024     -webkit-transition-delay: 150ms;
025     -moz-transition-delay: 150ms;
026     -ms-transition-delay: 150ms;
027     -o-transition-delay: 150ms;
028     transition-delay: 150ms;
029 }
030 .menu li:hover .submenu li:nth-child(5) {
031     -webkit-transition-delay: 200ms;
032     -moz-transition-delay: 200ms;
033     -ms-transition-delay: 200ms;
034     -o-transition-delay: 200ms;
035     transition-delay: 200ms;
036 }
037 .menu li:hover .submenu li:nth-child(6) {
038     -webkit-transition-delay: 250ms;
039     -moz-transition-delay: 250ms;
040     -ms-transition-delay: 250ms;
041     -o-transition-delay: 250ms;
042     transition-delay: 250ms;
043 }
044 .menu li:hover .submenu li:nth-child(7) {
045     -webkit-transition-delay: 300ms;
046     -moz-transition-delay: 300ms;
047     -ms-transition-delay: 300ms;
048     -o-transition-delay: 300ms;
049     transition-delay: 300ms;
050 }
051 .menu li:hover .submenu li:nth-child(8) {
052     -webkit-transition-delay: 350ms;
053     -moz-transition-delay: 350ms;
054     -ms-transition-delay: 350ms;
055     -o-transition-delay: 350ms;
056     transition-delay: 350ms;
057 }
058 .submenu li:nth-child(1) {
059     -webkit-transition-delay: 350ms;
060     -moz-transition-delay: 350ms;
061     -ms-transition-delay: 350ms;
062     -o-transition-delay: 350ms;
063     transition-delay: 350ms;
064 }
065 .submenu li:nth-child(2) {
066     -webkit-transition-delay: 300ms;
067     -moz-transition-delay: 300ms;
068     -ms-transition-delay: 300ms;
069     -o-transition-delay: 300ms;
070     transition-delay: 300ms;
071 }
072 .submenu li:nth-child(3) {
073     -webkit-transition-delay: 250ms;
074     -moz-transition-delay: 250ms;
075     -ms-transition-delay: 250ms;
076     -o-transition-delay: 250ms;
077     transition-delay: 250ms;
078 }
079 .submenu li:nth-child(4) {
080     -webkit-transition-delay: 200ms;
081     -moz-transition-delay: 200ms;
082     -ms-transition-delay: 200ms;
083     -o-transition-delay: 200ms;
084     transition-delay: 200ms;
085 }
086 .submenu li:nth-child(5) {
087     -webkit-transition-delay: 150ms;
088     -moz-transition-delay: 150ms;
089     -ms-transition-delay: 150ms;
090     -o-transition-delay: 150ms;
091     transition-delay: 150ms;
092 }
093 .submenu li:nth-child(6) {
094     -webkit-transition-delay: 100ms;
095     -moz-transition-delay: 100ms;
096     -ms-transition-delay: 100ms;
097     -o-transition-delay: 100ms;
098     transition-delay: 100ms;
099 }
100 .submenu li:nth-child(7) {
101     -webkit-transition-delay: 50ms;
102     -moz-transition-delay: 50ms;
103     -ms-transition-delay: 50ms;
104     -o-transition-delay: 50ms;
105     transition-delay: 50ms;
106 }
107 .submenu li:nth-child(8) {
108     -webkit-transition-delay: 0s;
109     -moz-transition-delay: 0s;
110     -ms-transition-delay: 0s;
111     -o-transition-delay: 0s;
112     transition-delay: 0s;
113 }
Live Demo

[sociallocker]

download in package

[/sociallocker]

Conclusion

We have just made another one CSS3 dropdown menu from scratch. Thanks for your patient attention, and if you really like what we done today – share it with all your friends in your social networks using the form below.