Home » Tutorials

CSS3 multicolor menu

Tutorials
Author Reading 16 min Views 412 Published by Modified by

In our new tutorial we’ll create a new nice multicolor and crossbrowser CSS3 menu with sliding (I use css3 transition) and color 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
download in package

Ok, download the example files and lets start coding !

Step 1. HTML

As usual, we start with the HTML. Here are full html code of our menu. As you can see – this is multilevel menu built on UL-LI elements. But, it is a little unusual. I don’t wrap submenus into own UL element, I am going to hide them, and display if necessary.

index.html

01 <!DOCTYPE html>
02 <html lang="en" >
03     <head>
04         <meta charset="utf-8" />
05         <title>CSS3 multicolor menu | Script Tutorials</title>
06         <link href="css/styles.css" rel="stylesheet" type="text/css" />
07         <link href="css/menu.css" rel="stylesheet" type="text/css" />
08     </head>
09     <body>
10         <header>
11             <h2>CSS3 multicolor menu</h2>
12             <a href="http://www.script-tutorials.com/css3-multicolor-menu/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
13         </header>
14         <div class="container">
15
16             <span id="red"></span>
17             <span id="orange"></span>
18             <span id="pink"></span>
19             <span id="green"></span>
20             <span id="blue"></span>
21             <span id="indigo"></span>
22             <span id="violet"></span>
23             <span id="grey"></span>
24
25             <div class="colorScheme">
26                 <a href="#red" class="red"></a>
27                 <a href="#orange" class="orange"></a>
28                 <a href="#pink" class="pink"></a>
29                 <a href="#green" class="green"></a>
30                 <a href="#blue" class="blue"></a>
31                 <a href="#indigo" class="indigo"></a>
32                 <a href="#violet" class="violet"></a>
33                 <a href="#grey" class="grey"></a>
34             </div>
35
36             <ul id="nav">
37                 <li><a href="http://www.script-tutorials.com/">Home</a></li>
38                 <li><a class="hsubs" href="#">Menu 1</a>
39                     <ul class="subs">
40                         <li><a href="#">Submenu 1</a></li>
41                         <li><a href="#">Submenu 2</a></li>
42                         <li><a href="#">Submenu 3</a></li>
43                         <li><a href="#">Submenu 4</a></li>
44                         <li><a href="#">Submenu 5</a></li>
45                     </ul>
46                 </li>
47                 <li><a class="hsubs" href="#">Menu 2</a>
48                     <ul class="subs">
49                         <li><a href="#">Submenu 2-1</a></li>
50                         <li><a href="#">Submenu 2-2</a></li>
51                         <li><a href="#">Submenu 2-3</a></li>
52                         <li><a href="#">Submenu 2-4</a></li>
53                         <li><a href="#">Submenu 2-5</a></li>
54                         <li><a href="#">Submenu 2-6</a></li>
55                         <li><a href="#">Submenu 2-7</a></li>
56                         <li><a href="#">Submenu 2-8</a></li>
57                     </ul>
58                 </li>
59                 <li><a class="hsubs" href="#">Menu 3</a>
60                     <ul class="subs">
61                         <li><a href="#">Submenu 3-1</a></li>
62                         <li><a href="#">Submenu 3-2</a></li>
63                         <li><a href="#">Submenu 3-3</a></li>
64                         <li><a href="#">Submenu 3-4</a></li>
65                         <li><a href="#">Submenu 3-5</a></li>
66                     </ul>
67                 </li>
68                 <li><a href="#">Menu 4</a></li>
69                 <li><a href="#">Menu 5</a></li>
70                 <li><a href="#">Menu 6</a></li>
71                 <li><a href="http://www.script-tutorials.com/css3-multicolor-menu/">Back</a></li>
72             </ul>
73
74         </div>
75     </body>
76 </html>

Step 2. CSS

Here are the CSS styles of our menu. Maybe you’ve noticed – that in our html – I have two CSS files: layout.css and menu.css. The first file (layout.css) contain the styles of our demo page. We will not publish these styles in this article, but if you wish – you can find these styles in our package.

css/menu.css

001 #nav,#nav ul {
002     list-style: none outside none;
003     margin: 0;
004     padding: 0;
005 }
006 #nav {
007     background-color: #000000;
008     border-radius: 5px 5px 5px 5px;
009     box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
010     display: table;
011     padding: 10px;
012     position: relative;
013 }
014 #nav ul {
015     background-color: red;
016     border:1px solid red;
017     border-radius: 0 5px 5px 5px;
018     border-width: 0 1px 1px;
019     box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
020     left: -9999px;
021     overflow: hidden;
022     padding: 20px 0 10px;
023     position: absolute;
024     top: -9999px;
025
026     -moz-transform: scaleY(0);
027     -ms-transform: scaleY(0);
028     -o-transform: scaleY(0);
029     -webkit-transform: scaleY(0);
030     transform: scaleY(0);
031
032     -moz-transform-origin: 0 0;
033     -ms-transform-origin: 0 0;
034     -o-transform-origin: 0 0;
035     -webkit-transform-origin: 0 0;
036     transform-origin: 0 0;
037
038     -moz-transition: -moz-transform 0.1s linear;
039     -ms-transition: -ms-transform 0.1s linear;
040     -o-transition: -o-transform 0.1s linear;
041     -webkit-transition: -webkit-transform 0.1s linear;
042     transition: transform 0.1s linear;
043 }
044 #nav li {
045     float: left;
046     position: relative;
047 }
048 #nav li a {
049     color: #FFFFFF;
050     display: block;
051     font-size: 16px;
052     padding: 7px 20px;
053     text-decoration: none;
054 }
055 #nav li:hover > a {
056     background-color: red;
057     border-radius: 5px 5px 5px 5px;
058     color: #FFFFFF;
059 }
060 #nav li:hover > a.hsubs {
061     border-radius: 5px 5px 0 0;
062 }
063 #nav li:hover ul.subs {
064     left: 0;
065     top: 34px;
066     width: 180px;
067
068     -moz-transform: scaleY(1);
069     -ms-transform: scaleY(1);
070     -o-transform: scaleY(1);
071     -webkit-transform: scaleY(1);
072 }
073 #nav ul li {
074     width: 100%;
075 }
076 #nav ul li:hover > a {
077     background-color: #222222 !important;
078     border-radius: 5px 5px 5px 5px;
079 }
080
081 /* colors */
082 .colorScheme {
083     height: 32px;
084     list-style: none outside none;
085     margin: 0 auto 25px;
086     width: 320px;
087 }
088 .colorScheme a {
089     cursor: pointer;
090     float: left;
091     height: 30px;
092     margin: 0 5px;
093     width: 30px;
094 }
095 .colorScheme .red {
096     background-color: red;
097 }
098 .colorScheme .orange {
099     background-color: orange;
100 }
101 .colorScheme .pink {
102     background-color: pink;
103 }
104 .colorScheme .green {
105     background-color: green;
106 }
107 .colorScheme .blue {
108     background-color: blue;
109 }
110 .colorScheme .indigo {
111     background-color: indigo;
112 }
113 .colorScheme .violet {
114     background-color: violet;
115 }
116 .colorScheme .grey {
117     background-color: grey;
118 }
119
120 #red:target ~ #nav ul {
121     background-color: red;
122     border: 1px solid red;
123 }
124 #orange:target ~ #nav ul {
125     background-color: orange;
126     border: 1px solid orange;
127 }
128 #pink:target ~ #nav ul {
129     background-color: pink;
130     border: 1px solid pink;
131 }
132 #green:target ~ #nav ul {
133     background-color: green;
134     border: 1px solid green;
135 }
136 #blue:target ~ #nav ul {
137     background-color: blue;
138     border: 1px solid blue;
139 }
140 #indigo:target ~ #nav ul {
141     background-color: indigo;
142     border: 1px solid indigo;
143 }
144 #violet:target ~ #nav ul {
145     background-color: violet;
146     border: 1px solid violet;
147 }
148 #grey:target ~ #nav ul {
149     background-color: grey;
150     border: 1px solid grey;
151 }
152
153 #red:target ~ #nav li:hover > a {
154     background-color: red;
155 }
156 #orange:target ~ #nav li:hover > a {
157     background-color: orange;
158 }
159 #pink:target ~ #nav li:hover > a {
160     background-color: pink;
161 }
162 #green:target ~ #nav li:hover > a {
163     background-color: green;
164 }
165 #blue:target ~ #nav li:hover > a {
166     background-color: blue;
167 }
168 #indigo:target ~ #nav li:hover > a {
169     background-color: indigo;
170 }
171 #violet:target ~ #nav li:hover > a {
172     background-color: violet;
173 }
174 #grey:target ~ #nav li:hover > a {
175     background-color: grey;
176 }
Live Demo
download in package

Conclusion

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

Rate article
© 2025 Script Tutorials