Chrome Pointer

Lär dig webbdesign - Dropdown-meny

   Något som är populärt både på bloggar och hemsidor är en dropdown-meny. Den har sitt namn eftersom den "droppar" ner och fäller ut sig då man hovrar (håller muspekaren) över den. Menyn över min header är en dropdown-meny.
   För det här råder jag er att använda en testblogg, så att ni inte råkar göra fel på er egen blogg. I det allra första avsnittet av den här serien berättar jag hur man gör en testblogg.
 
   För att göra en dropdown-meny måste vi använda oss av både kodmall och CSS. Det är egentligen ganska enkelt, men det kan lätt krångla till sig i huvudet. Till att börja med så gör vi en grundkod som ska ligga i kodmallarna. Glöm inte att alla kodmallar fungerar var för sig. Du måste alltså lägga in samma kod i alla fyra kodmallar.
   Jag kommer nu visa er ett exempel från Designadinblogg.se, eftersom jag helt enkelt inte orkar bygga en ny dropdown-meny för det här. Varför? Jo... som sagt, det kan lätt krångla till sig.
   Till att börja med langar vi in en kod i vår CSS. Notera att hela dropdown-menyn heter Navbar. Om du vill ändra namn på den till Dropdown eller något annat måste du se till att du döper om allt. Det är jätteviktigt, annars kommer koderna inte fungera. Samma sak i kodmallen.
 
   Det här ska in i din CSS:
#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*/
 
    Lägg in hela den ovanstående kodremsan i din CSS. Instruktionerna som finns i koden kan ligga kvar, för det som står inom "/*" och "*/" syns inte i koden. Det är ganska vanligt i gratisdesigner att den originala designern har lämnat kvar instruktioner för att göra det lättare för användaren.
   Det är ganska mycket kodning i CSS:en, men det är inte alls lika mycket i kodmallen.
 
 
   Nu måste vi lägga in en kod i kodmallen så att CSS-kodningen syns. Man får tänka lite var man vill ha dropdown-menyn - över eller under headern. Min dropdown ligger över div-taggen header, eftersom den är ovanför min header. Glöm inte att lägga in denna kod på samma ställe i alla fyra kodmallar!
 
<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>
 
 
   Men, sådär vill man nog inte ha sin dropdown. Ofta vill man kanske ha kategorier, arkiv, länkar eller speciella inlägg. Det är ganska lätt att fixa. Här nedan har ni koden till min egen dropdown - ni får självklart ta den här direkt om ni vill. Det är inte svårare än så här för att automatiskt få in sina senaste inlägg, sina kategorier, sitt arkiv samt sina länkar i en dropdown.
 
<ul id="navbar">

<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!







Sofia

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

Svar: Det beror helt på var man själv väljer att lägga den i koden. Vill du ha den över headern? Då lägger du den över headern. Vill du ha den under headern? Då lägger du den under headern. Och glöm inte att göra samma sak i alla kodmallar!
Esmeralda Silverforce

Sofia

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

Svar: Då är frågan om du ändrar på rätt ställen. Jag uppmuntrar alla som kodar att göra det på en testblogg, för vips har man ändrat på fel ställe och då kan hela designen sabbas om man inte minns exakt hur det var innan. Nu vet jag ju inte vad du har ändrat för något, men använd helst en testblogg så att du inte behöver oroa dig över att något kaosar.
Esmeralda Silverforce

Ellen Eveninggirl

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!

Svar: Om det är så att du inte är van vid kodning är det mycket bättre att du använder dig av en designmall där det redan finns en dropdown. Det är överlag lite förvirrande och svårt att koda en dropdown, särskilt om man inte är van vid kodning!
Esmeralda Silverforce

Sophia Dragonsten

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.

Kom ihåg mig!

Namn: (ALLA anonyma kommentarer raderas)


E-postadress: (syns endast för mig)


URL / Bloggadress:


Din Kommentar:


Trackback


Jag är Esmeralda “Esme” Silverforce, 90-talist som alltid haft ett enormt intresse för hästdatorspel. Från att ha varit en spelare av MMORPG’t Star Stable Online sedan spelets start arbetar jag nu med spelet, men mitt enorma intresse för andra spel består - och det är just de spel jag spelar som ni kan ta del av här!

Utöver denna blogg delar jag aktivt med mig av spelbilder på min Instagram @GamingbyEsme och pratar även mycket om spel på YouTube. Jag är också grundare av Jorvikipedia, som är ett slags uppslagsverk om allt som handlar om Star Stable. Ni kan läsa mer om mig och vem jag är längre ner i menyn!

Kontakt: Hitta min kontaktinformation genom att klicka på brevikonen i menyn högst upp på sidan!

Disclaimer: Bloggen är privat driven och ingenting skrivet på den är betalt material om inte annat tydligt framgår i inläggen. All min egen text samt grafik får användas om länk ges tillbaka till mig.