Multi Level Drop Down Menu With CSS3 For Blogger



Today I am sharing another great example of CSS3,in today's tutorial I am sharing a multi level drop down menu which works with pure CSS3 and any single image is not included in this menu.As is works with pure CSS3,it does not affect the loading speed of your blog as compared to jQuery menus and other menus which works with script.Previously I shared a horizontal menu with CSS3 but one of my loyal readers asked me to create a multi level drop down which works with pure CSS3,that's why I kept my word and sharing this menu today.

live demo




How To Add This Menu To Blogger?

This menu can be easily installed on any blogger blog in 2 steps.In first step we will implement the CSS part of of the menu in template and in last Second Part we will add HTML part of menu as a HTML/JavaScript widget.Also the HTML mark up of the menu is so clean and neat so that new bloggers can also easily add it to their blog,if can't them I am here :D :)

1. Adding The CSS Code


  1. Go to Blogger Dashboard > Template
  2. Click on Edit HTML
  3. Hit Proceed button
  4. Find below code in your template


1
]]></b:skin>

add below code just above it,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
/* Drop Down Menu By helperblogger.com */
#nav {
 float: left;
 font: bold 12px Arial, Helvetica, Sans-serif;
 border: 1px solid #121314;
 border-top: 1px solid #2b2e30;
 overflow: hidden;
 width: 100%;
 background: #3C4042;
 background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );
 background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
 background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
}
 
#nav ul {
 margin: 0;
 padding: 0;
 list-style: none;
}
 
#nav ul li {
 float: left;
}
 
#nav ul li a {
 float: left;
 color: #d4d4d4;
 padding: 10px 20px;
 text-decoration: none;
 background: #3C4042;
 background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );
 background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
 background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
 border-left: 1px solid rgba(255, 255, 255, 0.05);
 border-right: 1px solid rgba(0,0,0,0.2);
 text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
}
/* Drop Down Menu By helperblogger.com */
#nav ul li a:hover,
#nav ul li:hover > a {
 color: #252525;
 background: #3C4042;
 background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
 background: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
 background: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 -1px #000;
}
 
#nav li ul a:hover,
#nav ul li li:hover > a {
 color: #2c2c2c;
 background: #5C9ACD;
 background: -webkit-gradient( linear, left bottom, left top, color-stop(0.17, rgb(61,111,177)), color-stop(0.51, rgb(80,136,199)), color-stop(1, rgb(92,154,205)) );
 background: -moz-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
 background: -o-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
 border-bottom: 1px solid rgba(0,0,0,0.6);
 border-top: 1px solid #7BAED9;
 text-shadow: 0 1px rgba(255, 255, 255, 0.3);
}
/* Drop Down Menu By helperblogger.com */
#nav li ul {
 background: #3C4042;
 background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
 background-image: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
 background-image: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
 left: -999em;
 margin: 35px 0 0;
 position: absolute;
 width: 160px;
 z-index: 9999;
 box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
 -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
 -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
 border: 1px solid rgba(0, 0, 0, 0.5);
}
 
#nav li:hover ul {
 left: auto;
}
 
#nav li ul a {
 background: none;
 border: 0 none;
 margin-right: 0;
 width: 120px;
 box-shadow: none;
 -moz-box-shadow: none;
 -webkit-box-shadow: none;
 border-bottom: 1px solid transparent;
 border-top: 1px solid transparent;
}
 
.nav ul li ul {
    position: absolute;
    left: 0;
    display: none;
    visibility: hidden;
}
 
.nav ul li ul li {
    display: list-item;
    float: none;
}
 
.nav ul li ul li ul {
    top: 0;
}
 
.nav ul li ul li a {
    font: normal 13px Verdana;
    width: 160px;
    padding: 5px;
    margin: 0;
    border-top-width: 0;
    border-bottom: 1px solid gray;
}
 
#nav li li ul {
 margin: -1px 0 0 160px;
 visibility: hidden;
}
 
#nav li li:hover ul {
 visibility: visible;
}
/* Drop Down Menu By helperblogger.com */

Save your template.

Now we have implemented the styles of the menu,lets go to the HTML part.

2. HTML Part


  1. Now go to Page Layout
  2. Click on Add a Gadget (below header,see image below)
  3. Select HTML/JavaScript
  4. Paste below code inside it,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="nav">
 <ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Our Portfolio</a></li>
  <li><a href="#">One Dropdown</a></li>
  <li><a href="#">Three Levels</a>
  <ul>
   <li><a href="#">Level 2.1</a></li>
   <li><a href="#">Level 2.2</a></li>
   <li><a href="#">Level 2.3</a></li>
   <li><a href="#">Level 2.4</a></li>
   <li><a href="#">Level 2.5</a></li>
  </ul>
  </li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Contact Us</a></li>
 </ul>
</div>

Change the links and texts as you wish save your menu.

Customizing The Menu

Before adding this menu customize your links and link names and replace above with your own.To do the customizations I highly recommend you to use our HTML Editor,with using the HTML Editor you can see the live preview of your menu when you do some changes.Also it will help your to learn CSS and HTML,like I have learned many things using HTML Editor.

Follow below simple steps to use the HTML Editor.

  • Add the CSS code between <style> and </style> tag.
  • Just below of it paste the HTML Part
  • Hit Preview button.




Any Help

By following above steps,if you can't create menu which you want then simply contact me with your queries also if you cant add links and drop downs then send me a raw structure of your menu,I will send you the customized code.

Peace And Blessings Buddies :) Happy Blogging :)  

be vigilant and careful while doin html / javascript duties
coz it may lead to info leaks or slowing down or unworkability.
also check out google blogger terms and conditions.




no video for this stuff.

Labels:

Latest posts.