A drop down menu is a easy way to hide extra links while still making them available to your readers.
In Wordpress its so simple but in blogger little complicated. We’ll basically be creating a list within a list, and all that need some extra code and styling.
Copy and Paste this code in an HTML/JavaScript widget placed in the navigation area.
<!--Start Navigation -->
<div id="navigationbar">
<ul id='navigationcss'>
<li><a href="LINK1">Home</a></li>
<li><a href="LINK2">Category</a>
<ul>
<li><a href='LINK3'>SUB-CATEGORY-1</a></li>
<li><a href='LINK4'>SUB-CATEGORY-2</a></li><li><a href='LINK5'>SUB-CATEGORY-3</a></li>
</ul>
</li>
<li><a href="">Category</a></li>
</ul>
</div>
<!--End Navigation -->
If you need to add another link use below code;
<li><a href="LINK6">Category</a></li>
To add another link with drop down categories;
<li><a href="LINK2">Category</a>
<ul>
<li><a href='LINK3'>SUB-CATEGORY-1</a></li>
<li><a href='LINK4'>SUB-CATEGORY-2</a></li>
</ul>
</li>
Do the changes, save the widget, and select Template menu > Edit HTML (backup your template before editing).
To add styling open up the CSS section within
<b:skin> ... </b:skin>
Search for the section, which looks something like this:
/* Styles the first link in your menu */
.tabs-inner .section:first-child ul {
margin-top: -1px;
border: none;
}
/* Styles the overall 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 hovered over */
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: #333333;
background-color: #ffffff;
text-decoration: none;
}
You can edit your current tabs as you like or place the above one below your current one and use the comments provided to guide yourself. Below that, paste the following code:
#navigationbar {
width: 100%; /* change the width of the navigation bar */
height: 35px; /* change 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; /* change 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; /* change the background color of the drop down box */
width: 150px;
color: #000000; /* change the color of the drop down links */
float: none;
margin: 0;
padding: 7px 10px; /* similar to above, change for the spacing around the links */
}
#navigationcss li li a:hover, #navigationcss li li a:active {
background: #FF69B4 ; /* change the background color of drop down items on hover */
color: #ffffff; /* change 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;
}
NB:- Backup your blog file always before you do any changes.
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
ConversionConversion EmoticonEmoticon