Drop down menus can help organize and categorize content links. While
many web developers debate whether or not they are good or bad
practice, there’s no doubt that they can help clean up a design if you
have a rather busy blog. If your blog contains a large amount of
information and you’re interested in categorizing your links a little
better, a drop down menu might be the ticket!
Since Blogger doesn’t offer the option to automatically add a drop down menu as WordPress does,
we have to make our own. This requires a little bit of CSS and HTML
knowledge, but I will walk you through it so it doesn’t seem so
confusing.
The menu I’ve put together is built entirely with CSS3 and HTML. No
Javascript to deal with here, so it is nice and lightweight and easy to
configure.
To get started, you’ll need to head on over to the Layout page in your
Blogger dashboard and add a HTML/Javascript gadget in the top/header
area:
Add the following code to your new widget, customizing the titles and links to match your own blog:
<ul id="icbabdrop">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li>
Topics
<ul>
<li><a href="#">Lifestyle</a></li>
<li><a href="#">Blogging</a></li>
<li><a href="#">Art and Design</a></li>
</ul>
</li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
You will need to replace the # characters with the actual links of your pages, and the menu titles with your own. Tip: How To Change Blogger Labels Page?
The text above in RED shows a menu title (“Topics”) with three sub-menu items that appear when you roll over it
To add additional menu items with sub-menus, you can copy the red
portion of the code and paste a duplicate before or after any <li>
or </li> codes, like so:
<ul id="ansaritrixs">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li>
Topics
<ul>
<li><a href="#">Lifestyle</a></li>
<li><a href="#">Blogging</a></li>
<li><a href="#">Art and Design</a></li>
</ul>
</li>
<li>
Topics 2
<ul>
<li><a href="#">Lifestyle 2</a></li>
<li><a href="#">Blogging 2</a></li>
<li><a href="#">Art and Design 2</a></li>
</ul>
</li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
Now, you’ll want to pop on over to the Template > Customize page
of Blogger and scroll down to Advanced > CSS. Add the following code
to give that menu some style:
/* DROPDOWN MENU BY AnSaRiTrixs.com */
.tabs-inner .widget ul#icbabdrop {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
border:none;
}
.tabs-inner .widget ul#icbabdrop li {
font-size: 12px/18px;
font-family: sans-serif; /* Font for the menu */
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff; /* background colour of the main menu */
float:none;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.tabs-inner .widget ul#icbabdrop li a {
padding:0;
font-family: sans-serif; /* Font for the menu links */
border:0;
}
.tabs-inner .widget ul#icbabdrop li:hover {
background: #555; /* background colour when you roll over a menu title */
color: #fff; /* font colour when you roll over a menu title */
}
.tabs-inner .widget ul#icbabdrop li:hover a {
background: transparent;
color: #fff; /* font colour when you roll over a menu title link */
}
.tabs-inner .widget ul#icbabdrop li ul {
z-index:1000;
border:none;
padding: 0;
position: absolute;
top: 45px;
left: 30px;
float:none;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
.tabs-inner .widget ul#icbabdrop li ul li {
background: #555; /* background colour of the sub menu items */
display: block;
color: #fff; /* font colour of the sub menu items */
text-shadow: 0 -1px 0 #000;
}
ul#icbabdrop li ul li a{
color:#fff /* link colour of the sub menu items */
}
.tabs-inner .widget ul#icbabdrop li ul li:hover {
background: #666; /* background colour when you roll over sub menu items */
}
.tabs-inner .widget ul#icbabdrop li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
You can change the colours and fonts wherever I’ve placed the comments in the code.
If you want to center your menu, just add: <center> before your HTML code in the gadget you added, and </center> at the end of it.
