How to create Drop Down Menu That can Be Styled With Template Designer

Hello and welcome to GetWebInfo.Com. Here on this post you can learn that How to create Drop Down Menu That can Be Styled With Template Designer. From a design standpoint Drop down menus are an excellent feature because they help clean up a busy layout. If structured correctly drop down menus can be great navigation tool while still being a usual and attractive design feature. 



How to create Drop Down Menu That can Be Styled With Template Designer

Here are the best method to add a layout that can be styled with your blogger template.

Step 01 Go to your Layout > Add a new HTML/JavaScript Gadget and add the following code to it.
<!-- START NAVIGATION BY GetWebInfo -->
<div id="navigationbar">
<ul id='cssnav'>
<li class="active"><a href='LINK'>Home</a></li>
<li class="sub"><a href='LINK'>CATEGORY 1</a>
<ul>
<li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 1A</a></li>
<li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 1B</a></li>
</ul>
</li>
<li class="sub"><a href='LINK'>CATEGORY 2</a>
<ul>
<li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 2A</a></li>
<li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 2B</a></li>
</ul>
</li>
<!-- ADD MORE CATEGORIES OR LINKS HERE -->
<li class="last"><a href='LINK'>Contact</a></li>
</ul>
</div>
<!-- END NAVIGATION BY GetWebInfo  -->
Add Another Dropdown Category
<li class="sub"><a href='LINK'>CATEGORY 3</a>
<ul>
<li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 3A</a></li>
<li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 3B</a></li>
</ul>
</li>
Add Another Link
<li><a href='LINK'>LINK-NAME</a></li>




Add The CSS to Your Blogger Blog

Add the following code to Template> Customize> Advanced> Add CSS. This will place the code above ]]></b:skin> in Template> Edit HTML. To change values via the Template Designer, Go to Template> Customize> Advance> Tabs Text and Tabs Background.

/* ----- START DROPDOWN CSS BY Getwebinfo.com ----- */
#cssnav {
border: 0px;
margin: 0px;
padding: 0px;
width: auto;
font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */
color: $(tabs.text.color); /* Template Designer - Change Text Colour */
}
#cssnav ul {
background: $(tabs.background.color); /* Template Designer - Change Menu Background */
height: 40px; /* Change Height of Menu */
list-style: none;
margin: 0px;
padding: 0px;
}
#cssnav li {
float: none;
display: inline-block;
padding: 0px;
}
#cssnav li a {
background: $(tabs.background.color); /* Template Designer - Change Menu Background */
display: block;
margin: 0px;
text-align: center;
font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */
text-decoration: none;
}
#cssnav > ul > li > a {
color: $(tabs.text.color); /* Template Designer - Change Text Color */
}
#cssnav ul ul a {
color: $(tabs.text.color); /* Template Designer - Change Text Color */
}
#cssnav li > a:hover, #cssnav ul li:hover {
color: $(tabs.selected.text.color); /* Template Designer - Change Text 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); /* Template Designer - Change Menu Background */
display: none;
height: auto;
padding: 0px;
margin: 0px;
border: 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); /* 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: #FFFFFF; /* 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;
}
/* ----- END DROPDOWN CSS BY Getwebinfo.com ----- */

Drop Down Menu Not Visible?

Here some other tips that can be really helfull for you. If your dropdown menu is not appearing when you hover over it, there may be something blocking it. Go To Template> Edit CSS and find </b:skin>, above it add the following
.tabs-outer, .tabs .widget ul {overflow: visible;}
Header Not FUll Width?

Blogger by default has paddings and margins set up around your content. If you have set your navigation above to be 100% and there is still a small gap on either side then we can add code to overwrite that. Go to Template> Edit HTML and find </b:skin>. Add the following code above </b:skin>
.tabs-inner { padding: 0px; } .section { margin: 0px; }
This will remove the Bloggers default space around tabs. If there's still a gap that you don't want add the following above </b:skin>
.content-inner { padding: 10px 0px; }



After doing these all steps you can all don. After it you just go and check it out your blogger blog work well or not. I hope this article is really helpful for you. If you like this article so please share it on your social media accounts Thanks.

Hello and Welcome to GetWebinfo.com. Here on this site you can be able to find out Latest Articles are about Blogger, SEO, AdSense, WordPress,. You can also be able to find out Latest Tips that can you really need one. You can also Download Premium themes free from this site.


No comments:

Post a Comment