tisdag 11 mars 2014

Dropdown med flyouts på Blogg.se



Jag har fått frågan om hur jag gjorde min horisontella meny med dropdown i flera steg, eller "flyouts" som det kan kallas, och om det fungerar på Blogg.se också. Det gör det. Detta tipset är för Blogg.se-bloggar.




Gör såhär:

1. Kopiera följande kod och klistra in i din stilmall.



I stilmallskoden ska du bestämma utseendet på din dropdown med bredd, typsnitt, färger osv. Det finns lite text i koden som förklarar vad som styr vad. Det är bara att fråga om du inte hittar det du vill ändra.

2. Kopiera följande kod och klistra in där du vill ha menyn i dina kodmallar.



Vill du ha menyn ovanför headern klistrar du in koden ovanför <div id="header">. Om du vill ha den under headern klistrar du in koden ovanför <div id="content">. Du kan bygga på menyn med fler länkar, flikar och flyouts.

Bygg på din meny:

I koden ovan har jag lagt in fyra titlar varav tre är med dropdown och en är en länk. Vill du ha fler enkla länkar lägger du bara till följande kod:



De tre med dropdown är kodade med olika funktioner. Den första t ex. som syns på bilden, title 2, har en undermeny med tre rader som ha en flyout var och en av de har ytterligare en flyout. Den andra, title 3, har en undermeny med fyra rader utan några flyouts, som en vanlig dropdown med andra ord. Den tredje, title 4, har en undermeny med sex rader varav en har en flyout.

För att lägga till en titel med undermeny/ dropdown:


Och för att lägga till en rad med en flyout, radera en <li><a href="Link URL">Submenu Title</a></li> i koden ovan och lägg istället till:


Du kan kopiera, bygga på och konstruera en uppdelad dropdown-meny som passar dig.

1 kommentar:

  1. Tack så himla mycket, och riktigt snabbt svar också!! :))

    SvaraRadera