Lär dig webbdesign - Dropdown-meny
#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: #cccccc; /*Ändra färgen på menyflikarna här*/ color: #fff; /*Ä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: 10em; /* Ändra bredden på undermenyn här */ background-color: #69f;}#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: #889988; /*Ändra färgen på undermenyn*/ border-bottom: 1px solid #fff; color: #ffffff; } /*ändra textfärgen på undermenyn här*/#navbar li li a:hover { background-color: #000000; } /*Ändra färgen när man håller musen över undermenyn*/<ul id="navbar">
<li><a href="#">Kategori 1</a> <ul> <li><a href="#">Länk 1</a></li> <li><a href="#">Länk 2</a></li> <li><a href="#">Länk 3</a></li> </ul></li><li><a href="#">Kategori 2</a> <ul> <li><a href="#">Länk 4</a></li> </ul></li><li><a href="#">Länk 5</a></li><li><a href="#">Kategori 3</a> <ul> <li><a href="#">Länk 6</a></li> <li><a href="#">Länk 7</a></li> <li><a href="#">Länk 8</a></li> <li><a href="#">Länk 9</a></li> </ul></li></ul><li><a href="#">Senaste Inläggen</a>
<ul>{% for entry in entries[:15] %}
<li><a href="{{ entry.url }}">› {{ entry.title }}</a>
{% endfor %}</ul></li>
<li><a href="#">Kategorier</a>
<ul>
<li>{% for category in categories %}
<li><a href="{{ category.url }}">› {{ category.name }}</a>
{% endfor %}</li>
</ul></li>
<li><a href="#">Arkiv</a>
<ul><li>{% for month in archive_months %}
<li><a href="{{ month.link }}">› {{ month.name }}</a>
{% endfor %}</li></li></ul>
<li><a href="#">Länkar</a>
<ul><li>{% for link in linklist %}
<li><a href="{{ link.url }}" title="{{ link.description }}">› {{ link.name }}</a>
{% endfor %}</li></ul>
</ul>
Okej, nu har ni en dropdown här - men den är grå och ganska trist. Man ändrar storlek och utseende i CSS:en, och ni har här ovan riktlinjer med hjälp av kommentarerna i kodningen.
Tänk på:
- "a" betyder länk
- "hover" betyder att detta bara syns om man håller muspekaren över elementet
- Om du vill ha en hemsida att leta färger på så kan du gå tillbaka till inlägget där jag pratade om Webbfärger
Lycka till!
Hej igen!
Jag har en till fråga. Jag har ändrat lite i designen på min blogg & sparat. Sedan går jag in på bloggen men inget av det jag ändrar syns. Vad beror det på?
// Sofia
Hej Esme!
Jag har prövat att göra en dropdown meny flera gånger nu. Jag är rätt vilse med det här med kodning och sånt. Jag använder en test blogg, jag gör som du säger men det blir inte bra. Jag förstår inte vart i kodmallarna jag ska klistra in koderna. Snälla hjälp!
Hejsan. Jag håller på att koda min drop-down meny på min testblogg men jag kan inte trycka på undermenyn. Alltså, jag kan hålla musen över menyn och se undermenyn, men så fort jag försöker flytta musen så jag kan trycka på den så försvinner den. Resterande saker fungerar men det är just det som är mitt stora problem. Har du några idéer eller tips på vad det kan bero på?
Tack på förhand.
Hejsan Esme!
När jag lagt in alla koder & så, ska texten synas då ovanför headern ? Alltså det står typ
Kategori:
- Teckningar
osv. Är det meningen att det ska göra det? Eller har jag gjort fel?
MVH Sofia