Tips en tutorials voor beginners en gevorderde bloggers

Een dropdown menu maken in Blogger

drop down menu blogger

Wil je graag een drop down menu hebben in je Blogger blog? Dat kan! Maar: dit is wel een tutorial voor gevorderden.

Wat is een drop down menu?

De naam zegt het eigenlijk al! Een drop down menu werkt als volgt:

Een bezoeker gaat met de muis naar je menu.

En als hij boven een item staat, klapt het menu open, en laat subcategorieën zien. Hier onder zie je een voorbeeld van een drop down menu.

drop down menu

Wanneer kies je voor een dropdown menu?

Persoonlijk ben ik geen fan van dropdown menu’s. Ik vind ze onrustig en onoverzichtelijk. Maar als je meer dan 7 rubrieken hebt, die eigenlijk niet goed passen in je menubalk, kun je kiezen voor een drop down menu. Zo voorkom je dat je menu te vol staat.

Vuistregel: als je tussen de 7 en 15 menu items hebt, kun je kiezen voor een dropdown menu. Heb je er meer of minder? Dan is een dropdown menu niet de oplossing.

N.B. Een alternatief voor een dropdown menu is twee menu’s! Zoals op Het Moederfront.

Hoe maak je een drop down menu in je Blogger blog?

Voordat we technisch worden, pak je pen en papier. Schrijf allereerst je hoofdrubrieken op een rijtje. Laat ruimte tussen de verschillende hoofdrubrieken, want als je die klaar hebt, zet je daar alle subcategorieën onder.

Bijvoorbeeld:

  • Hardlopen (hoofdcategorie)
  • Hardlopen voor vrouwen (Subcategorie 1)
  • Hardlopen voor beginners (Subcategorie 1)
  • Hardlopen voor gevorderden (Subcategorie 1)
  • Hardlopen voor gevorderden die geen maat kunnen houden (Subcategorie 2)
  • Hardlopen voor gevorderden die geblesseerd zijn (Subcategorie 2)

En dan nu het technische deel!

Ga naar je Blogger Dashboard

Klik op Layout

Kies Html gadget

Sleep het gadget naar de plek waar je het menu wilt hebben

Plak de code, die je hier onder vindt, in het html gadget

<!-- 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 --> 

Vervang de voorbeelden met de codes van je categorieën. Geen idee waar ik heb over heb? Check dan deze post over een menu maken met je labels.

Stap 2

Ga naar je Blogger Dashboard Klik op Template Kies Customize Kies Advanced Kies CSS Plak daarin deze code: je ziet nu meteen dat je menu netjes wordt!

Nu moet je het menu nog invullen met je rubrieken.

Conclusie

Het is zeker mogelijk een dropdown menu te maken in een Blogger menu. Maar een simpeler oplossing is simpelweg twee menu’s te maken!

Leave a reply