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">
<ul id='navigationcss'>
<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.
Thank you for sharing this nice blog keep sharing with us.accounting training courses in dubai
ReplyDeleteThanks a million
ReplyDeleteNo doubt This is best post. dubai Vinyl Flooirng
Deletehttps://bitcoinometrics.blogspot.com
ReplyDeletehttps://belmadeng.com
ReplyDeletehttps://exambazaar.com
ReplyDeleteAwesome post...this is well-detailed
ReplyDeleteThanks for sharing. I try to use this navigation menu on my site: modern rugs dubai
ReplyDeleteThanks for sharing your knowledge with us. It's very interesting article.
ReplyDeleteWe providing home decoration services in UAE. We providing Artificial Grass Dubai at affordable price.
I am glad to be a visitor of this thoroughgoing website ! , appreciate it for this rare info ! . https://royalcbd.com/faq/
ReplyDeleteThank You very much for this great post. I am regular reader of your blog. I want to share with you my adwords experience.How to become Google Certified and get more job opportunity.
ReplyDeleteI found this blog site as one of the best blog sites that I have visited today. I see a lot of bloggers who are blogging just for money, but you are different from them and that makes you so special. I want to thank you for the update and information that you have shared with us. I have something to share with you also on targetpayandbenefits, please do accept my comment and I will be very happy if we can share ideas together.
ReplyDelete