A fresh, clean and easy to use dropdown navigation menu is a part of a successful design. Lots of links can confuse a reader, while too few can leave them doubt what they’re missing. A drop down menu is an enormous way to hide additional links while still making them available to interested readers.
WordPress makes it easy to add a dropdown menu but, it’s a little complicated on Blogger. Hear we’ll mainly be creating a list within a list, and all that’s needed is some extra code and styling as you wish.
How To Make A Dropdown Menu HTML:
Login to your blogger dashboard then go to Layout and click on add a widget under header.
Place this code in an HTML/JavaScript widget placed in the navigation area.
<!--Start Navigation -->
<div id="navigationbar">
<li><a href="URL1">Home</a></li>
<li><a href="URL2">Category</a>
<ul>
<li><a href='URL3'>SUB-CATEGORY-1</a></li>
<li><a href='URL4'>SUB-CATEGORY-2</a></li>
</ul>
</li>
<li><a href="">Category</a></li>
</ul>
</div>
<!--End Navigation -->
For additional link, use this code :
<li><a href="URL2">Category</a></li>
To add another link with drop down categories, add this code:
<li><a href="URL2">Category</a>
<ul>
<li><a href='URL3'>SUB-CATEGORY-1</a></li>
<li><a href='URL4'>SUB-CATEGORY-2</a></li>
</ul>
</li>
Fill in your information (URL1, URL2, URL3), save the widget, be remember backup your template before editing any code always.
Now you need to add the styling that makes your menu look attractive First, open up the CSS section inside.
<b:skin> ... </b:skin>
Now look for the Tabs section, which should be look like this:
/* Styles the first link in your menu */
.tabs-inner .section:first-child ul {
margin-top: -1px;
border: none;
}
/* Styles the generally navigation bar */
.tabs-inner .widget ul {
background: #000000;
border: none;
text-align: center;
}
/* Styles the individual links */
.tabs-inner .widget li a {
font: 12px Arvo;
border: none;
color: #ffffff;
}
/* Styles the links when mouch hovered over */
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: #333333;
background-color: #ffffff;
text-decoration: none;
}
You can also edit your present tabs section to your partiality, or place the below one above your present one and use the comments given to guide yourself. Change the values until you get the look you want.
Below that, paste the following code:
#navigationbar {
width: 100%; /* modify the width of the navigation bar */
height: 35px; /* modify the height of the navigation bar */
}
#navigationcss {
margin: 0 auto;
padding: 0;
}
#navigationcss ul {
float: none;
list-style: none;
margin: 0;
padding: 0;
overflow: visible;
}
#navigationcss li a, #navigationcss li a:link, #navigationcss li a:visited {
color: #ffffff; /* change color of the main links */
display: block;
margin: 0;
padding: 10px 30px; /* adjust the first number for the top/bottom spacing, and the second number for left/right spacing */
}
#navigationcss li a:hover, #navigationcss li a:active {
color: #FF69B4 ; /* change the color of the links when hovered over */
margin: 0;
padding: 10px 30px; /* make sure these are the same as the section above! */
}
#navigationcss li li a, #navigationcss li li a:link, #navigationcss li li a:visited {
background: #ffffff; /* adjust the background color of the drop down box */
width: 150px;
color: #000000; /* adjust the color of the drop down links */
float: none;
margin: 0;
padding: 7px 10px; /* like to above, change for the spacing around the links */
}
#navigationcss li li a:hover, #navigationcss li li a:active {
background: #FF69B4 ; /* modify the background color of drop down items on hover */
color: #ffffff; /* modify the color of drop down links on hover */
padding: 7px 10px; /* keep these the same as the above section */
}
#navigationcss li {
float: none;
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
}
#navigationcss li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 150px;
margin: 0;
padding: 0;
}
#navigationcss li:hover ul, #navigationcss li li:hover ul, #navigationcss li li li:hover ul, #navigationcss li.sfhover ul, #navigationcss li li.sfhover ul, #navigationcss li li li.sfhover ul {
left: auto;
Use the comments (/* comments (how to)*/) to know what each line does, and edit it until your needed drop down box. Reason, templates can come from several sources. There’s a possibility you could have issues with using this code on your blog if your current code has been altered lots.
So guys try the presses and tell me your experiment, please do leave a comment if you do well or not.
