Voeg Dropdown Menu Toe Aan Blogger

Hoe Voeg Je Een Dropdown Menus toe aan Blogger?

Dit artikel heeft ondersteunende code welke hoort bij deze tutorial over het toevoegen van menus aan Blogger. Deze cursus omvat gedetaïlleerde instructies en een video dat je exact laat zien wat je met onderstaande code moet doen. 

Bekijk de video om te zien wat je met de code moet doen:


Stap 1:  Plan hoe je je menu bar wil laten uitzien, creëer een sitemap met alle linken die je wil gebruiken.

Stap 2:  Kopieer deze code … vervang alle linken met die van jouw … voeg het vervolgens toe in nieuwe HTML widget waar je je menu bar wil laten verschijnen:geen styling toegevoegen

<!-- start navmenu --> <ul id='cssnav'> <li class="active"><a href='http://LINK.com'>Home</a></li> <li class="sub"><a href='http://CATEGORY-ONE-LINK.com'>Category 1</a> <ul> <li><a href='http://SUB-CATEGORY-ONE-LINK.com'>SUB-category1</a></li> <li><a href='http://SUB-CATEGORY-TWO-LINK.com'>SUB-category2</a></li> <li><a href='http://SUB-CATEGORY-THREE-LINK.com'>SUB-category3</a></li> </ul> </li> <li><a href='http://CATEGORY-TWO-LINK.com'>Category 2</a> <ul> <li><a href='http://SUB-CATEGORY-ONE-LINK.com'>SUB-category1</a></li> <li><a href='http://SUB-CATEGORY-TWO-LINK.com'>SUB-category2</a></li> <li><a href='http://SUB-CATEGORY-THREE-LINK.com'>SUB-category3</a></li> </ul> </li> <li><a href='http://CATEGORY-THREE-LINK.com'>Category 3</a> <ul> <li><a href='http://SUB-CATEGORY-ONE-LINK.com'>SUB-category1</a></li> <li><a href='http://SUB-CATEGORY-TWO-LINK.com'>SUB-category2</a></li> <li><a href='http://SUB-CATEGORY-THREE-LINK.com'>SUB-category3</a></li> </ul> </li> <li><a href='http://CATEGORY-FOUR-LINK.com'>Category 4</a> <ul> <li><a href='http://SUB-CATEGORY-ONE-LINK.com'>SUB-category1</a></li> <li><a href='http://SUB-CATEGORY-TWO-LINK.com'>SUB-category2</a></li> <li><a href='http://SUB-CATEGORY-THREE-LINK.com'>SUB-category3</a></li> </ul> </li> </ul> <!-- end navmenu -->

NOTA 1:  Er is nog geen styling toegevoegd - dus dit zal er nog niet zo goed uitzien. Maar lees verder.

NOTA 2: Je bent welkom om meer of minder subcategories toe te voegenafhankelijk wat je nodig hebt. Kopiëer dezelfde format als weergegeven in het voorbeeld.

Stap 3: Ga naar Blogger Template Designer (klik op customize - dan advanced - dan op ADD CSS en voeg volgende code toe:

/* ----- CSS Nav Menu Styling ----- */
#cssnav {
margin: 0px 0 0 -30px;
padding: 0px 0px 0px 0px;
width: 1050px;  /* Set your width to fit your blog */
font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */
color: $(tabs.text.color); /* Template Designer - Change Font Size */
}

#cssnav ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x 
scroll 0 -800px;_background-image: none; /* Template Designer - Change 
Menu Background */height: 20px; /* Change Height of Menu */
list-style: none;
margin: 0px;
padding: 0px;
}

#cssnav li {
float: left;
padding: 0px;
}

#cssnav li a {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x 
scroll 0 -800px;_background-image: none; /* Template Designer - Change 
Menu Background */
display: block;
margin: 0px;
font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */
text-decoration: none;
}

#cssnav > ul > li > a {
color: $(tabs.text.color); /* Template Designer - Change Font Color */
}

#cssnav ul ul a {
color: $(tabs.text.color); /* Template Designer - Change Color */
}

#cssnav li > a:hover, #cssnav ul li:hover {
color: $(tabs.selected.text.color); /* Template Designer - Change Font 
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) $(tabs.background.gradient) repeat-x 
scroll 0 -800px;_background-image: none; /* Template Designer - Change 
Menu Background */
display: none;
height: auto;
padding: 0px;
margin: 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) $(tabs.background.gradient) repeat-x 
scroll 0 -800px;_background-image: none; /* 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: $(tabs.selected.background.color); /* 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;
}

Blogger, Dropdown Menu, dropdown menu html, dropdown menu html css