Skapa en dropdown meny Tips 1

Skapa en dropdown meny kan man göra på olika vis och jag ska visa lite exempel

Tips 1 skapa en meny med senaste inlägg, kategorier...se bild nedan.

1. Börja med att gå in i dn kodmall och bläddra ner till  <div id="side">


2. Ta bort denna koden:


3. Kopiera denna koden:

<ul id="navbar"> <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>


4. Klistra in koden direkt efter denna koden:



5. Kopiera denna koden och lägg längst ner i din stilmall:
#navbar { margin: 0; padding: 0; height: 1em; } #navbar li { list-style: none; float: left; } /* Ändra till right om du vill ha menyn till höger istället*/ #navbar li a { display: block; padding-left:10px; padding-right:10px; padding-top:5px; padding-bottom:0px; border-left: 1px solid #ffffff; border-bottom: 1px solid #ffffff; background-color: #cccccc; /*Ändra färgen på menyflikarna här*/ color: #000000; /*Ändra färgen på texten här*/ text-decoration: none; font-family: verdana; /*Ändra typsnittet här*/ font-size: 10px; } /*Ändra storleken på texten här*/ #navbar li ul { display: none; width: 11em; /* Ändra bredden på undermenyn här */ background-colo: #ffffff; } #navbar li:hover ul, #navbar li.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, #navbar li.hover li a { background-color: #ffffff; /*Ändra färgen på undermenyn*/ /* opacitet for IE */ filter:alpha(opacity=90); /* opacity: 0.90; filter: alpha(opacity=90); */ /* opacitet CSS3 standard */ opacity:0.90; /* opacitet for Mozilla */ -moz-opacity:0.90; border-bottom: 1px solid #cccccc; border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; color: #696969; } /*ändra textfärgen på undermenyn här*/ #navbar li li a:hover { color: #ffffff; background-color: #898888; } /*Ändra färgen när man håller musen över undermenyn*/

Spara och så var det klart.

För att ändra färg på menyn gör du det i koden du klistra in i stilmallen.

För att ta bort det genomskinliga i menyn, ta bort denna koden i stilmallen:

/* 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;

Om du vill ha headern över eller under menyn, flyttar du koden till headern
över eller under koden du klistra in i kodmallen.

<img src="LÄNK TILL DIN HEADER">

Date: 2011-12-11 Clock: 19:21:05

Hej! När jag skulle sätta in alla koderna så förhandsgranskade jag och sen blev det helt helt fel! Sen tog jag bort de koderna.... Och innan det så skulle man ta bort koden och klistra in den som du skrev att man skulle ha. så den är också borta!! Så att nu har jag inte nån Kategori meny längre... Jag behöver HJÄLP! Tack i förväg :)

Hej! Tack för denna guide - fick ihop en drop down på nolltid! MEN, den fungerar inte i Chrome.. funkar fint i Explorer. Vad kan man göra åt detta? Mvh Malin

hur gör man om man vill ha den längst upp på sidan och att det följer med när man bläddrar neråt??

det fungerar inte på min blogg?