Home » Tutorials

CSS3 vertical multicolor 3D menu

Tutorials
Author Reading 12 min Views 1.1k. Published by Modified by

In our new tutorial we’ll create new stylish vertical multicolor and crossbrowser CSS3 menu with 3D animation (I use css3 transition, perspective and transform properties) and pure css3 color switcher. This is UL-LI-based menu.

 

Here are samples and downloadable package:

Contents
  1. Step 1. HTML
  2. index.html
  3. Step 2. CSS
  4. css/menu.css
  5. Conclusion
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 is the html code of our menu. As usual – this is again UL-LI based navigation menu. The most interesting thing will be CSS styles of course.

index.html

01 <div class="container">
02     <span id="clr1"></span>
03     <span id="clr2"></span>
04     <span id="clr3"></span>
05     <span id="clr4"></span>
06     <span id="clr5"></span>
07     <span id="clr6"></span>
08     <div class="colorScheme">
09         <a href="#clr1" class="clr1"></a>
10         <a href="#clr2" class="clr2"></a>
11         <a href="#clr3" class="clr3"></a>
12         <a href="#clr4" class="clr4"></a>
13         <a href="#clr5" class="clr5"></a>
14         <a href="#clr6" class="clr6"></a>
15     </div>
16     <ul id="nav">
17         <li><a href="https://www.script-tutorials.com/">Home</a></li>
18         <li><a href="#">Menu 1</a>
19             <ul class="subs">
20                 <li><a href="#">Submenu 1</a></li>
21                 <li><a href="#">Submenu 2</a></li>
22                 <li><a href="#">Submenu 3</a></li>
23                 <li><a href="#">Submenu 4</a></li>
24                 <li><a href="#">Submenu 5</a></li>
25             </ul>
26         </li>
27         <li><a href="#">Menu 2</a>
28             <ul class="subs">
29                 <li><a href="#">Submenu 2-1</a></li>
30                 <li><a href="#">Submenu 2-2</a></li>
31                 <li><a href="#">Submenu 2-3</a></li>
32                 <li><a href="#">Submenu 2-4</a></li>
33                 <li><a href="#">Submenu 2-5</a></li>
34                 <li><a href="#">Submenu 2-6</a></li>
35                 <li><a href="#">Submenu 2-7</a></li>
36                 <li><a href="#">Submenu 2-8</a></li>
37             </ul>
38         </li>
39         <li><a href="#">Menu 3</a>
40             <ul class="subs">
41                 <li><a href="#">Submenu 3-1</a></li>
42                 <li><a href="#">Submenu 3-2</a></li>
43                 <li><a href="#">Submenu 3-3</a></li>
44                 <li><a href="#">Submenu 3-4</a></li>
45                 <li><a href="#">Submenu 3-5</a></li>
46             </ul>
47         </li>
48         <li><a href="#">Menu 4</a></li>
49         <li><a href="#">Menu 5</a></li>
50         <li><a href="#">Menu 6</a></li>
51         <li><a href="https://www.script-tutorials.com/css3-vertical-multicolor-3d-menu/">Back</a></li>
52     </ul>
53 </div>

Step 2. CSS

Here are the CSS styles of our vertical menu. Maybe you’ve noticed – that in our html we have two CSS files: layout.css and menu.css. The first one (layout.css) contains the styles of our demo page. We don’t publish these styles in the article, but if you need – you can find these styles in our package.

css/menu.css

001 #nav,#nav ul {
002     background-color: #8899AA;
003     list-style: none outside none;
004     margin: 0;
005     padding: 0;
006 }
007 #nav {
008     display: block;
009     padding: 5px;
010     position: relative;
011     width: 112px;
012     -moz-perspective: 200px;
013     -ms-perspective: 200px;
014     -webkit-perspective: 200px;
015     -o-perspective: 200px;
016     perspective: 200px;
017 }
018 #nav ul {
019     left: -9999px;
020     opacity:0;
021     overflow: hidden;
022     padding: 5px;
023     position: absolute;
024     top: -9999px;
025     -moz-transform: rotateY(70deg);
026     -ms-transform: rotateY(70deg);
027     -o-transform: rotateY(70deg);
028     -webkit-transform: rotateY(70deg);
029     transform: rotateY(70deg);
030     -moz-transform-origin: 0 0;
031     -ms-transform-origin: 0 0;
032     -o-transform-origin: 0 0;
033     -webkit-transform-origin: 0 0;
034     transform-origin: 0 0;
035     -moz-transition: -moz-transform 0.3s linear, opacity 0.3s linear;
036     -ms-transition: -ms-transform 0.3s linear, opacity 0.3s linear;
037     -o-transition: -o-transform 0.3s linear, opacity 0.3s linear;
038     -webkit-transition: -webkit-transform 0.3s linear, opacity 0.3s linear;
039     transition: transform 0.3s linear, opacity 0.3s linear;
040 }
041 #nav li {
042     background-color: #FFFFFF;
043     position: relative;
044 }
045 #nav > li {
046     -moz-transform-style: preserve-3d;
047     -ms-transform-style: preserve-3d;
048     -o-transform-style: preserve-3d;
049     -webkit-transform-style: preserve-3d;
050     transform-style: preserve-3d;
051 }
052 #nav li a {
053     background-color: #AABBCC;
054     border-color: #DDDDDD #555555 #555555 #DDDDDD;
055     border-style: solid;
056     border-width: 1px;
057     color: #000000;
058     display: block;
059     font-size: 15px;
060     padding: 8px 10px 8px 5px;
061     text-decoration: none;
062     width:95px;
063     -moz-transition: all 0.2s linear;
064     -ms-transition: all 0.2s linear;
065     -o-transition: all 0.2s linear;
066     -webkit-transition: all 0.2s linear;
067     transition: all 0.2s linear;
068 }
069 #nav li:hover > a {
070     background-color: #8899AA;
071     border-color: #8899AA;
072     color: #FFFFFF;
073 }
074 #nav li:hover ul.subs {
075     left: 114px;
076     opacity:1;
077     top: 0;
078     -moz-transition-delay: 0.3s;
079     -ms-transition-delay: 0.3s;
080     -o-transition-delay: 0.3s;
081     -webkit-transition-delay: 0.3s;
082     transition-delay: 0.3s;
083     -moz-transform: rotateY(0deg);
084     -ms-transform: rotateY(0deg);
085     -o-transform: rotateY(0deg);
086     -webkit-transform: rotateY(0deg);
087     transform: rotateY(0deg);
088 }
089 #nav ul li {
090     width: 100%;
091 }
092 /* colors */
093 .colorScheme {
094     list-style: none outside none;
095     overflow: hidden;
096     width: 120px;
097 }
098 .colorScheme a {
099     cursor: pointer;
100     float: left;
101     height: 30px;
102     margin: 0 5px 5px;
103     width: 30px;
104 }
105 .colorScheme .clr1 {
106     background-color: #8899AA;
107 }
108 .colorScheme .clr2 {
109     background-color: #aa889e;
110 }
111 .colorScheme .clr3 {
112     background-color: #8f88aa;
113 }
114 .colorScheme .clr4 {
115     background-color: #88aaaa;
116 }
117 .colorScheme .clr5 {
118     background-color: #88aa8a;
119 }
120 .colorScheme .clr6 {
121     background-color: #aaa188;
122 }
123 #clr1:target ~ #nav, #clr1:target ~ #nav ul {
124     background-color: #8899AA;
125 }
126 #clr2:target ~ #nav, #clr2:target ~ #nav ul {
127     background-color: #aa889e;
128 }
129 #clr3:target ~ #nav, #clr3:target ~ #nav ul {
130     background-color: #8f88aa;
131 }
132 #clr4:target ~ #nav, #clr4:target ~ #nav ul {
133     background-color: #88aaaa;
134 }
135 #clr5:target ~ #nav, #clr5:target ~ #nav ul {
136     background-color: #88aa8a;
137 }
138 #clr6:target ~ #nav, #clr6:target ~ #nav ul {
139     background-color: #aaa188;
140 }
141 #clr1:target ~ #nav li:hover > a {
142     background-color: #8899AA;
143     border-color: #8899AA;
144 }
145 #clr2:target ~ #nav li:hover > a {
146     background-color: #aa889e;
147     border-color: #aa889e;
148 }
149 #clr3:target ~ #nav li:hover > a {
150     background-color: #8f88aa;
151     border-color: #8f88aa;
152 }
153 #clr4:target ~ #nav li:hover > a {
154     background-color: #88aaaa;
155     border-color: #88aaaa;
156 }
157 #clr5:target ~ #nav li:hover > a {
158     background-color: #88aa8a;
159     border-color: #88aa8a;
160 }
161 #clr6:target ~ #nav li:hover > a {
162     background-color: #aaa188;
163     border-color: #aaa188;
164 }
Live Demo

Conclusion

Hope you enjoyed with new 3D menu, don’t forget to tell thanks and leave a comment 🙂 Good luck!

Rate article
© 2026 Script Tutorials