How To Brand A Dropdown Navigation Carte On Blogger Blog.
A fresh, build clean together with slowly to exercise dropdown navigation menu is a role of a successful design. Lots of links tin confuse a reader, land besides few tin operate out them dubiousness what they’re missing. A drib downwards card is an enormous agency to cover additional links land nevertheless making them available to interested readers.
WordPress makes it slowly to add together a dropdown menu but, it’s a piffling complicated on Blogger. Hear we’ll mainly locomote creating a listing within a list, together with all that’s needed is some extra code together with styling equally yous wish.
How To Make A Dropdown Menu HTML:
Login to your blogger dashboard thence become to Layout together with click on add together a widget nether header.
Place this code inward an HTML/JavaScript widget placed inward 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, exercise this code :
<li><a href="URL2">Category</a></li>
To add together some other link amongst drib downwards categories, add together 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 inward your information (URL1, URL2, URL3), salvage the widget, locomote think backup your template earlier editing whatever code always.
Now yous necessitate to add together the styling that makes your card await attractive First, opened upwards up the CSS department inside.
<b:skin> ... </b:skin>
Now await for the Tabs section, which should locomote await similar this:
/* Styles the start link inward your card */
.tabs-inner .section:first-child ul {
margin-top: -1px;
border: none;
}
/* Styles the to a greater extent than oftentimes than non navigation bar */
.tabs-inner .widget ul {
background: #000000;
border: none;
text-align: center;
}
/* Styles the private 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 tin also edit your acquaint tabs department to your partiality, or house the below ane higher upwards your acquaint ane together with exercise the comments given to take away yourself. Change the values until yous larn the await yous want.
Below that, glue the next code:
#navigationbar {
width: 100%; /* modify the width of the navigation bar */
height: 35px; /* modify the peak 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; /* modify color of the primary links */
display: block;
margin: 0;
padding: 10px 30px; /* adjust the start number for the top/bottom spacing, together with the instant 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 certain these are the same equally the department above! */
}
#navigationcss li li a, #navigationcss li li a:link, #navigationcss li li a:visited {
background: #ffffff; /* adjust the background color of the drib downwards box */
width: 150px;
color: #000000; /* adjust the color of the drib downwards links */
float: none;
margin: 0;
padding: 7px 10px; /* like to above, modify for the spacing to a greater extent than or less the links */
}
#navigationcss li li a:hover, #navigationcss li li a:active {
background: #FF69B4 ; /* modify the background color of drib downwards items on hover */
color: #ffffff; /* modify the color of drib downwards links on hover */
padding: 7px 10px; /* keep these the same equally the higher upwards 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 business does, together with edit it until your needed drop downwards box. Reason, templates tin come upwards from several sources. There’s a possibility yous could bring issues amongst using this code on your spider web log if your electrical flow code has been altered lots.
So guys receive the presses together with say me your experiment, delight practise operate out a comment if yous practise good or not.