This dropdown menu code is working in almost all templates i have tested, this drop down menu is easy to install widget and its customization is also not that hard that hard its code looks.
In this tutorial i will show you how to add this Cool Drop Down menu to your blog but also i will teach you how to customize it as per your requirements.
Also read: How to show only post titles, thumbnails, and some description on Blogger label and archive pages ?
You can add this drop down menu to your blogs in following simple steps:
- Step 1: Log in to your Blogger Account.
- Step 2:Then Go to your Dashboard >> Template.
- Step 3:Then first save(download) your template by clicking "Backup/Restore" button so that if anything goes wrong then you can again upload your previous template.
- Step 4: Now, Click "Edit HTML" Tab and search for the code given below
/* TabsNote: CTRL+F is not working properly in new blogger's Edit HTML section so you have to search it manually.
----------------------------------------------- */
- Step 5:Now Delete all the code after this /* Tabs .....Comment till you reach this /* Headings
----------------------------------------------- */ comment . - Step 6: It looks like this :
----------------------------------------------- */
.tabs-outer {
overflow: hidden;
position: relative;
background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll 0 0;
}
#layout .tabs-outer {
overflow: visible;
}
.tabs-cap-top, .tabs-cap-bottom {
position: absolute;
width: 100%;
border-top: 1px solid $(tabs.border.color);
}
.tabs-cap-bottom {
bottom: 0;
}
.tabs-inner .widget li a {
display: inline-block;
margin: 0;
padding: .6em 1.5em;
font: $(tabs.font);
color: $(tabs.text.color);
border-top: 1px solid $(tabs.border.color);
border-bottom: 1px solid $(tabs.border.color);
border-$startSide: 1px solid $(tabs.border.color);
height: 16px;
line-height: 16px;
}
.tabs-inner .widget li:last-child a {
border-$endSide: 1px solid $(tabs.border.color);
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
background: $(tabs.selected.background.color) $(tabs.background.gradient) repeat-x scroll 0 -100px;
color: $(tabs.selected.text.color);
}
/* Headings
----------------------------------------------- */
- Step 7: You have to remove this blue color code.
- Step 8: After removing this your code will look like this :
----------------------------------------------- */
/* Headings
----------------------------------------------- */
 |
| A snapshot of the Edit HTML section. |
- Step 9: Now, Save the Template by clicking "Save Template" Tab.
- Step 10: Now, Go to Layout >> add a gadget >> HTML/Javascript and paste the following code in it.
To Enlarge the images Please click on them.
<script src='http://santosh143.googlecode.com/svn/dropdown.js' type='text/javascript'></script> <style> .ddsubmenustyle, .ddsubmenustyle div { font: normal 13px Verdana; margin: 0; padding: 0; position: absolute; left: 0; top: 0; list-style-type: none; background: white; border: 1px solid black; border-bottom-width: 0; visibility: hidden; z-index: 100; } .ddsubmenustyle ul { margin: 0; padding: 0; position: absolute; left: 0; top: 0; list-style-type: none; border: 0px none; } .ddsubmenustyle li a { display: block; width: 170px; /*width of menu (not including side paddings)*/ color: black; background-color: lightyellow; text-decoration: none; padding: 4px 5px; border-bottom: 1px solid black; } * html .ddsubmenustyle li { display: inline-block; width: 170px; } .ddsubmenustyle li a:hover { background-color: black; color: white; } .downarrowpointer { /*CSS for "down" arrow image added to top menu items*/ padding-left: 4px; border: 0; } .rightarrowpointer { /*CSS for "right" arrow image added to drop down menu items*/ position: absolute; padding-top: 3px; left: 100px; border: 0; } .ddiframeshim { position: absolute; z-index: 500; background: transparent; border-width: 0; width: 0; height: 0; display: block; } .mattblackmenu ul { margin: 0; padding: 0; font: bold 12px Verdana; list-style-type: none; border-bottom: 1px solid gray; background: #414141; overflow: hidden; width: 100%; } .mattblackmenu li { display: inline; margin: 0; } .mattblackmenu li a { float: left; display: block; text-decoration: none; margin: 0; padding: 6px 8px; border-right: 1px solid white; color: white; background: #414141; } .mattblackmenu li a:visited { color: white; } .mattblackmenu li a:hover { background: black; } .mattblackmenu a.selected { background: black; } </style> <div id="ddtopmenubar" class="mattblackmenu"> <ul> <li> <a href="#">LINK1</a> </li> <li> <a href="#" rel="ddsubmenu1">LINK2</a> </li> <li> <a href="#" rel="ddsubmenu2">LINK3</a> </li> <li> <a href="#">Link4</a> </li> <li> <a href="#" rel="ddsubmenu3">LINK5</a> </li> </ul> </div> <script type="text/javascript"> ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar") </script> <ul class='ddsubmenustyle' id='ddsubmenu1'> <li> <a href='#'>LINK2 ITEM 1</a> </li> <li> <a href='#'>LINK2 ITEM 2</a> <ul> <li> <a href='#'>LINK2 ITEM 2.1</a> </li> <li> <a href='#'>LINK2 ITEM 2.2</a> </li> </ul> </li> <li> <a href='#'>LINK2 ITEM 3</a> <ul> <li> <a href='#'>LINK2 ITEM 3.1</a> </li> </ul> </li> <li> <a href='#'>LINK2 ITEM 4</a> </li> </ul> <ul class='ddsubmenustyle' id='ddsubmenu2'> <li> <a href='#'>LINK3 ITEM 1</a> </li> <li> <a href='#'>LINK3 ITEM 2</a> </li> <li> <a href='#'>LINK3 ITEM 3</a> <ul> <li> <a href='#'>LINK3 ITEM 3.1</a> </li> <li> <a href='#'>LINK3 ITEM 3.2</a> </li> <li> <a href='#'>LINK3 ITEM 3.3</a> </li> <li> <a href='#'>LINK3 ITEM 3.4</a> </li> </ul> </li> <li> <a href='#'>LINK3 ITEM 4</a> </li> <li> <a href='#'>LINK3 ITEM 5</a> <ul> <li> <a href='#'>LINK3 ITEM 5.1</a> </li> <li> <a href='#'>LINK3 ITEM 5.2</a> <ul> <li> <a href='#'>LINK3 ITEM 5.2 1</a> </li> <li> <a href='#'>LINK3 ITEM 5.2 2</a> </li> <li> <a href='#'>LINK3 ITEM 5.2 3</a> </li> </ul> </li> </ul> </li> <li> <a href='#'>LINK3 ITEM 6</a> </li> </ul> <ul class='ddsubmenustyle' id='ddsubmenu3'> <li> <a href='#'>LINK5 ITEM 1</a> </li> <li> <a href='#'>LINK5 ITEM 2</a> </li> <li> <a href='#'>LINK5 ITEM 3</a> </li> <li> <a href='#'>LINK5 ITEM 4</a> </li> <li> <a href='#'>LINK5 ITEM 5</a> </li> </ul>
- Now, you can see your drop down menu in your blog.
Peace brother, I have never commented online to anyone's help that I have used so far, but now I am forced to use this choice to convey my sincere thanks for the successful installation of drop-down menu I achieved by following your article u have shared here. I had been trying for several weeks with failure and you know how painstaking work it is to carefully code and decode etc. I am happy with the results and am gonna check out ur post on how to customize the setup. Once again thanks a lot and may God bless you.
ReplyDeleteI tried thirty billions of CSS menus and this was the only one that worked properly.
ReplyDeleteThanks a lot!