Sannas Bloggtips

Dropdown där överkategorierna är i olika färger

För att göra detta använder du dig alltså utav en stilmallskod & en kodmallskod per överkategori. Du stylar och döper om dem till vad din överkategori heter varje gång du lägger till en ny.

Stilmallskod
#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: tahoma; /*Ändra typsnittet här*/ font-size: 10px; } /*Ä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.6; border-bottom: 1px dotted #B3B3B3; border-left: 1px solid #fff; border-right: 1px solid #fff; color: #000000; } /*ändra textfärgen på undermenyn här*/ #navbar li li a:hover { background-color: #574948; } /*Ändra färgen när man håller musen över undermenyn*/

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

Sanna tipsar:
Detta är absolut lättast om du gör en sak i taget. Gör en överskrift åt gången så att du inte blandar ihop koderna. Döp om stilmallskoden och ul id="navbar" till det du vill (alltså ordet navbar ska bytas ut till det egna ord/namn på koden överallt). Styla det stycket och när du är färdig och nöjd; gå vidare med nästa.

2013-12-06 @ 21:04:00 Permalink Kategori: Dropdown Kommentarer (0)

Välkomna till min bloggtipssida som återigen har väckts till liv. Här hittar ni tips och tricks för blogg.se.

Dropdown där överkategorierna är i olika färger

Kommentera här: