drop down-meny/rullistmeny
Nu är ni så himlans många som frågat om hur man ordnar en drop down-meny att det är på tiden att jag förklarar det hela - jag är ledsen att jag inte gjort det tidigare. Just det här sättet kan man hitta lite här och var på internet, och eftersom att jag inte vet varifrån det ursprungligen kommer tänker jag inte heller ange någon källa.
OBS! Innan du börjar är det jätteviktigt att du antingen har bra koll på dina stil- och kodmallar om problem skulle uppstå, eller att du skapar en underblogg till din huvudblogg, så att du kan experimentera med färg och storlek bäst du vill; det är lätt att skapa designkaos annars, eftersom att man arbetar med samtliga mallar.
(Min drop down-meny)
OBS! Innan du börjar är det jätteviktigt att du antingen har bra koll på dina stil- och kodmallar om problem skulle uppstå, eller att du skapar en underblogg till din huvudblogg, så att du kan experimentera med färg och storlek bäst du vill; det är lätt att skapa designkaos annars, eftersom att man arbetar med samtliga mallar.
(Min drop down-meny)
1. Gå till din stilmall och klistra in följande kod allra längst ned i din stilmall:
#navbar { margin: 0px; padding: 0; height: 1em; } #navbar li { list-style: none; float: left; } #navbar li a { display: block; padding-left: 10px; padding-right: 10px; padding-top: 10px; padding-bottom: 10px; border-left: 1px solid #ffffff; border-bottom: 1px solid #ffffff; background-color: #fff; /*Ändra färgen på menyflikarna här*/ color: #adadad; /*Ändra färgen på texten här*/ text-decoration: none; font-family: times new roman, arial; /*Ändra typsnittet här*/ font-size: 11px; } /*Ändra storleken på texten här*/ #navbar li ul {display: none;width: 11em; /* Ändra bredden på undermenyn här */ background-color: #ffffff; } #navbar li:hover ul, #navbarli.hover ul { display: block; position: absolute; margin: 0; padding: 0; z-index: 1; } #navbar li:hover li, #navbar li.hover li { float: none; } #navbar li:hover li a, #navbarli.hover li a { background-color: #ffffff; /*Ändra färgen på undermenyn*/
/* opacitet for IE */ filter:alpha(opacity=70); /* opacity: 0.70; filter: alpha(opacity=70); */ /* opacitet CSS3 standard */ opacity:0.70; /* opacitet for Mozilla */ -moz-opacity:0.70; border-bottom: 0px solid #cccccc; border-left: 0px solid #cccccc; border-right: 0px solid #cccccc; color: #000000; } /*ändra textfärgen på undermenyn här*/ #navbar li li a:hover { color: #000; background-color: #CCCCCC; } /*Ändra färgen när man håller musen över undermenyn*/
padding-XXXX: XXpx; här bestämmer du hur mycket extra av bakgrunden som skall synas kring texten. Ju större pixelvärde du anger desto större area kommer din fina drop down-meny att täcka.
font-family: times new roman, arial; här bestämmer du vilket typsnitt som skall användas i din meny. Jag har använt Times New Roman som förstahandsval, men om det typsnittet av någon anledning inte skulle fungera i någon webläsare kommer mitt andrahandsval Arial att användas i stället.
position: absolute; här bestämmer du hur bloggen ska bete sig då man för muspekaren över någon av huvudkategorierna. Absolute bestämmer att den övriga bloggen skall behålla samma position medan relative ser till så att den övriga bloggen skjuts ned en bit då man scrollar över någon kategori (prova gärna själva och se vad jag menar).
(opacity=70)/opacity: 0.70; här bestämmer du hur transparenta flikarna (de som dyker upp om man håller muspekaren över en huvudkategori) till din drop down-meny skall vara. Ju större siffervärde desto mindre transparens. Opacity: 100/1.00 gör inte flikarna transparenta över huvud taget medan opacity: 10/0.10 gör dem nästintill osynliga.
#navbar li li a:hover { color: #000; background-color: #CCCCC; } här bestämmer du vilken färg flikarna skall få då man håller muspekaren över dem. Som ni kan se här på bloggen blir mina flikar blå. Om ni inte har tillgång till någon sorts fotoredigeringsprogram hittar ni en toppenbra färgpalett online här.
Spara.
2. Gå till dina kodmallar leta upp stycket som säger
<div id="header">
<h1>...</h1>
<h2>...</h2>
</div>
och klistra sedan in någon av följande koder därunder:
2.1 - enkelt och bra, du behöver bara skriva in ditt bloggnamn
Du kan lätt bestämma och sedan ändra vad som ska stå istället för de delar som står skrivna med fet, kursiv text.
<ul id="navbar">
<li><a href="http://www.dittbloggnamn.blogg.se" mce_href="/922173/entries/article/new/länk">Startsidan</a></li>
<li><a href="#" mce_href="#"> Senaste inläggen </a>
<ul> <tag:recentlist limit="10"><li><a href="${EntryPermaLink}" mce_href="/922173/entries/article/73622744/ ${EntryPermaLink}">${EntryTitle}</a></li></tag:recentlist> </ul></li>
<li><a href="#" mce_href="#">Kategorier </a>
<ul><tag:categorylist><li><a href="${CategoryLink}" mce_href="/922173/entries/article/73622744/ ${CategoryLink}">${CategoryName}</a></li></tag:categorylist> </ul></li>
<li><a href="#" mce_href="#"> Arkiv </a>
<ul><tag:archivelist><li><a href="${ArchiveLink}" mce_href="/922173/entries/article/73622744/${ArchiveLink}">${ArchiveName}</a></li></tag:archivelist> </ul> </li>
<li><a href="#" mce_href="#"> Länkar </a>
<ul><tag:linklist><li><a href="${LinkURL}" mce_href="/922173/entries/article/73622744/${LinkURL}" title="${LinkDescription}">${LinkName}</a></li></tag:linklist></ul></li>
</ul>
2.2 - här får du själv chansen att bestämma vart dina flikar ska leda dina besökare
Du kan lätt bestämma och sedan ändra vad som ska stå istället för de delar som står skrivna med fet, kursiv text.
<ul id="navbar">
<li><a href="http://www.dittbloggnamn.blogg.se" mce_href="/922173/entries/article/new/länk">Startsidan</a></li>
#navbar { margin: 0px; padding: 0; height: 1em; } #navbar li { list-style: none; float: left; } #navbar li a { display: block; padding-left: 10px; padding-right: 10px; padding-top: 10px; padding-bottom: 10px; border-left: 1px solid #ffffff; border-bottom: 1px solid #ffffff; background-color: #fff; /*Ändra färgen på menyflikarna här*/ color: #adadad; /*Ändra färgen på texten här*/ text-decoration: none; font-family: times new roman, arial; /*Ändra typsnittet här*/ font-size: 11px; } /*Ändra storleken på texten här*/ #navbar li ul {display: none;width: 11em; /* Ändra bredden på undermenyn här */ background-color: #ffffff; } #navbar li:hover ul, #navbarli.hover ul { display: block; position: absolute; margin: 0; padding: 0; z-index: 1; } #navbar li:hover li, #navbar li.hover li { float: none; } #navbar li:hover li a, #navbarli.hover li a { background-color: #ffffff; /*Ändra färgen på undermenyn*/
/* opacitet for IE */ filter:alpha(opacity=70); /* opacity: 0.70; filter: alpha(opacity=70); */ /* opacitet CSS3 standard */ opacity:0.70; /* opacitet for Mozilla */ -moz-opacity:0.70; border-bottom: 0px solid #cccccc; border-left: 0px solid #cccccc; border-right: 0px solid #cccccc; color: #000000; } /*ändra textfärgen på undermenyn här*/ #navbar li li a:hover { color: #000; background-color: #CCCCCC; } /*Ändra färgen när man håller musen över undermenyn*/
padding-XXXX: XXpx; här bestämmer du hur mycket extra av bakgrunden som skall synas kring texten. Ju större pixelvärde du anger desto större area kommer din fina drop down-meny att täcka.
font-family: times new roman, arial; här bestämmer du vilket typsnitt som skall användas i din meny. Jag har använt Times New Roman som förstahandsval, men om det typsnittet av någon anledning inte skulle fungera i någon webläsare kommer mitt andrahandsval Arial att användas i stället.
position: absolute; här bestämmer du hur bloggen ska bete sig då man för muspekaren över någon av huvudkategorierna. Absolute bestämmer att den övriga bloggen skall behålla samma position medan relative ser till så att den övriga bloggen skjuts ned en bit då man scrollar över någon kategori (prova gärna själva och se vad jag menar).
(opacity=70)/opacity: 0.70; här bestämmer du hur transparenta flikarna (de som dyker upp om man håller muspekaren över en huvudkategori) till din drop down-meny skall vara. Ju större siffervärde desto mindre transparens. Opacity: 100/1.00 gör inte flikarna transparenta över huvud taget medan opacity: 10/0.10 gör dem nästintill osynliga.
#navbar li li a:hover { color: #000; background-color: #CCCCC; } här bestämmer du vilken färg flikarna skall få då man håller muspekaren över dem. Som ni kan se här på bloggen blir mina flikar blå. Om ni inte har tillgång till någon sorts fotoredigeringsprogram hittar ni en toppenbra färgpalett online här.
Spara.
2. Gå till dina kodmallar leta upp stycket som säger
<div id="header">
<h1>...</h1>
<h2>...</h2>
</div>
och klistra sedan in någon av följande koder därunder:
2.1 - enkelt och bra, du behöver bara skriva in ditt bloggnamn
Du kan lätt bestämma och sedan ändra vad som ska stå istället för de delar som står skrivna med fet, kursiv text.
<ul id="navbar">
<li><a href="http://www.dittbloggnamn.blogg.se" mce_href="/922173/entries/article/new/länk">Startsidan</a></li>
<li><a href="#" mce_href="#"> Senaste inläggen </a>
<ul> <tag:recentlist limit="10"><li><a href="${EntryPermaLink}" mce_href="/922173/entries/article/73622744/ ${EntryPermaLink}">${EntryTitle}</a></li></tag:recentlist> </ul></li>
<li><a href="#" mce_href="#">Kategorier </a>
<ul><tag:categorylist><li><a href="${CategoryLink}" mce_href="/922173/entries/article/73622744/ ${CategoryLink}">${CategoryName}</a></li></tag:categorylist> </ul></li>
<li><a href="#" mce_href="#"> Arkiv </a>
<ul><tag:archivelist><li><a href="${ArchiveLink}" mce_href="/922173/entries/article/73622744/${ArchiveLink}">${ArchiveName}</a></li></tag:archivelist> </ul> </li>
<li><a href="#" mce_href="#"> Länkar </a>
<ul><tag:linklist><li><a href="${LinkURL}" mce_href="/922173/entries/article/73622744/${LinkURL}" title="${LinkDescription}">${LinkName}</a></li></tag:linklist></ul></li>
</ul>
2.2 - här får du själv chansen att bestämma vart dina flikar ska leda dina besökare
Du kan lätt bestämma och sedan ändra vad som ska stå istället för de delar som står skrivna med fet, kursiv text.
<ul id="navbar">
<li><a href="http://www.dittbloggnamn.blogg.se" mce_href="/922173/entries/article/new/länk">Startsidan</a></li>
<li><a href="#" mce_href="#">Kategori 1</a> <ul>
<li><a href="http://www.klaragenberg.blogg.se" mce_href="/922173/entries/article/new/länk">Länk 1</a> </li>
<li><a href="http://www.klaragenberg.blogg.se" mce_href="/922173/entries/article/new/länk">Länk 2</a> </li>
<li><a href="http://www.klaragenberg.blogg.se" mce_href="/922173/entries/article/new/länk">Länk 3</a> </li> </ul>
<li><a href="#" mce_href="#">Kategori 2</a> <ul>
<li><a href="http://www.klaragenberg.blogg.se" mce_href="/922173/entries/article/new/länk">Länk 4</a> </li>
<li><a href="http://www.klaragenberg.blogg.se" mce_href="/922173/entries/article/new/länk">Länk 5</a> </li>
<li><a href="http://www.klaragenberg.blogg.se" mce_href="/922173/entries/article/new/länk">Länk 6</a> </li> </ul>
<li><a href="#" mce_href="#">Kategori 3</a> <ul>
<li><a href="http://www.klaragenberg.blogg.se" mce_href="/922173/entries/article/new/länk">Länk 7</a> </li>
<li><a href="http://www.klaragenberg.blogg.se" mce_href="/922173/entries/article/new/länk">Länk 8</a> </li>
<li><a href="http://www.klaragenberg.blogg.se" mce_href="/922173/entries/article/new/länk">Länk 9</a> </li> </ul>
</li></ul>
Spara.
3. Om du vill så kan du radera din side från samtliga kodmallar. På så sätt kommer du, precis som jag, att ha enbart drop down-menyn kvar.
Hoppas att det var till hjälp!
Kommentarer
Trackback
