Add Dropdown Menus to Blogger with this Code:
This post has supporting code that goes along with the tutorial on Adding Menus to Blogger. This course includes detailed instructions and a video that will walk you though exactly what to do with the code below. Watch the video to learn what to do with this code >>
Step ONE: Plan for your menu bar, creating a sitemap with all the links that you want to use.
Step TWO: Grab this code … replacing it with all your links … then add it into a new HTML widget where you want your menu bar to appear:
<!-- start navmenu --> <ul id='cssnav'> <li class="active"><a href='http://LINK.com'>Home</a></li> <li class="sub"><a href='http://CATEGORY-ONE-LINK.com'>Category 1</a> <ul> <li><a href='http://SUB-CATEGORY-ONE-LINK.com'>SUB-category1</a></li> <li><a href='http://SUB-CATEGORY-TWO-LINK.com'>SUB-category2</a></li> <li><a href='http://SUB-CATEGORY-THREE-LINK.com'>SUB-category3</a></li> </ul> </li> <li><a href='http://CATEGORY-TWO-LINK.com'>Category 2</a> <ul> <li><a href='http://SUB-CATEGORY-ONE-LINK.com'>SUB-category1</a></li> <li><a href='http://SUB-CATEGORY-TWO-LINK.com'>SUB-category2</a></li> <li><a href='http://SUB-CATEGORY-THREE-LINK.com'>SUB-category3</a></li> </ul> </li> <li><a href='http://CATEGORY-THREE-LINK.com'>Category 3</a> <ul> <li><a href='http://SUB-CATEGORY-ONE-LINK.com'>SUB-category1</a></li> <li><a href='http://SUB-CATEGORY-TWO-LINK.com'>SUB-category2</a></li> <li><a href='http://SUB-CATEGORY-THREE-LINK.com'>SUB-category3</a></li> </ul> </li> <li><a href='http://CATEGORY-FOUR-LINK.com'>Category 4</a> <ul> <li><a href='http://SUB-CATEGORY-ONE-LINK.com'>SUB-category1</a></li> <li><a href='http://SUB-CATEGORY-TWO-LINK.com'>SUB-category2</a></li> <li><a href='http://SUB-CATEGORY-THREE-LINK.com'>SUB-category3</a></li> </ul> </li> </ul> <!-- end navmenu --> |
NOTE 1: There is no styling added yet … so this will not look like much just yet. But stay with me 
NOTE 2: You are welcome to add more categories and sub-categories as you need. Just copy the same format as listed in the example.
NOTE 2: You are welcome to add more categories and sub-categories as you need. Just copy the same format as listed in the example.
Step THREE: Go into the Blogger Template Designer (click on CUSTOMIZE … then on ADVANCED … then on ADD CSS) and add the following:
/* ----- CSS Nav Menu Styling ----- */
#cssnav {
margin: 0px 0 0 -30px;
padding: 0px 0px 0px 0px;
width: 1050px; /* Set your width to fit your blog */
font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */
color: $(tabs.text.color); /* Template Designer - Change Font Size */
}
#cssnav ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
height: 20px; /* Change Height of Menu */
list-style: none;
margin: 0px;
padding: 0px;
}
#cssnav li {
float: left;
padding: 0px;
}
#cssnav li a {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
display: block;
margin: 0px;
font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */
text-decoration: none;
}
#cssnav > ul > li > a {
color: $(tabs.text.color); /* Template Designer - Change Font Color */
}
#cssnav ul ul a {
color: $(tabs.text.color); /* Template Designer - Change Color */
}
#cssnav li > a:hover, #cssnav ul li:hover {
color: $(tabs.selected.text.color); /* Template Designer - Change Font Color on Hover */
background-color: $(tabs.selected.background.color); /* Template Designer - Change Font Background on Hover */
text-decoration: none;
}
#cssnav li ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
display: none;
height: auto;
padding: 0px;
margin: 0px;
position: absolute;
width: 200px; /* Change Width Of DropDown Menu */
z-index:9999;
}
#cssnav li:hover ul {
display: block;
}
#cssnav li li {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Background */
display: block;
float: none;
margin: 0px;
padding: 0px;
width: 200px; /* Change Width Of DropDown Menu */
}
#cssnav li:hover li a {
background: $(tabs.selected.background.color); /* Template Designer - Change Background of Link on Hover */
}
#cssnav li ul a {
display: block;
height: auto;
margin: 0px;
padding: 10px;
text-align: left;
}
#cssnav li ul a:hover, #cssnav li ul li:hover > a {
color: $(tabs.selected.text.color); /* Template Designer - Change Text Color on Hover */
background-color: $(tabs.selected.background.color); /* Template Designer - Change Background on Hover */
border: 0px;
text-decoration: none;
}
|
NOTE: I’ve listed notes next to a few lines of this code to point out what you can change and style for your own blog.
