Panfueppel -

Dropdown meny

Kategori → Panda tips 20:30:14

2011-01-02 Kommentarer

Dropdown menyer är lite knepiga. Inte alls så lätt som det ser ut.
En dropdown meny är en sånhär:

Alltså, en meny som ploppar ner när man drar musen över den. :)
Okey. Alltså, man gör såhär.

Gå in på Design & Redigera stilmall och sätter in koden här nedan längst ner i mallen.

Stilmallskoden:

#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: 3px 8px; 	 background-color: none; /*Ändra färgen på menyflikarna här*/ 	 color: #000000; /*Ändra färgen på texten här*/ 	 text-decoration: none;          font-family: Letter Gothic Std; /*Ändra typsnittet här*/          font-size: 12px; } /*Ändra storleken på texten här*/ #navbar li ul { 	 display: none;  	 width: 10em; /* Ändra bredden på undermenyn här */ 	}  #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*/  opacity: 0.8; 	 border-bottom: 1px dotted #1c7494;  border-left: 1px solid #8fc8e6;  border-right: 1px solid #8fc8e6; 	 color: #000000; } /*ändra textfärgen på undermenyn här*/  #navbar li li a:hover { 	 background-color: #9ae1ff; } /*Ändra färgen när man håller musen över undermenyn*/

Efter det går du in i Kodmallar (inget syns ännu, så bli inte orolig) och lägg in koden nedanför under <div id="wrapper"> som är ganska högt uppe.

Kodmallskoden:

<ul id="navbar"><li><a href="#" mce_href="#">Överkategori</a>    <ul> <li><a href="http://adresshär" mce_href="http://adresshär">Länk1</a></li>       <li><a href="http://adresshär" mce_href="http://adresshär">Länk2</a></li> <li><a href="http://adresshär" mce_href="http://adresshär">Länk3</a></li> <li><a href="http://adresshär" mce_href="http://adresshär">Länk4</a></li>     </ul> </li>  <li><a href="#" mce_href="#">Överkategori</a>    <ul> <li><a href="http://adresshär" mce_href="http://adresshär">Länk1</a></li>       <li><a href="http://adresshär" mce_href="http://adresshär">Länk2</a></li>     </ul> </li>  <li><a href="#" mce_href="#">Överkategori</a>    <ul> <li><a href="http://adresshär" mce_href="http://adresshär">Länk1</a></li>       <li><a href="http://adresshär" mce_href="http://adresshär">Länk2</a></li> <li><a href="http://adresshär" mce_href="http://adresshär">Länk3</a></li> <li><a href="http://adresshär" mce_href="http://adresshär">Länk4</a></li> <li><a href="http://adresshär" mce_href="http://adresshär">Länk5</a></li>     </ul> </li>

I kodmallskoden måste man fylla i text och länkar. Men ni förstår nog hur ni skall göra! :)
Lycka till, har ni några frågor så är det bara att kommentera!

Kommentera

Kategori → Panda tips
20:30:14

2011-01-02 ❣ Inspireras, inte kopiera! ❣
Publicerat av: Eppelskrutt

Kommentarer

Postat av: elin

du har verkligen en fin blogg!

själv är vi ju nybörjare på photoshop men ska lära oss mer och samma är vi på bloggar och sånt ! ;)

men jag har en fråga och jag hoppas du svarar.

Två frågor

Hur gammal är du?

:)

Vad hade du för stilmall för allra första gången <3

/eliin

2011-01-04 @ 01:13:06
URL: http://panfufreaks.blogg.se/

Trackback