Bygg en Drop Down meny för sidor i WordPress
dropdown

Ett klassiskt och snyggt sätt att få in många sidor på en liten yta är att använda sig av ”Drop Down menyer”. Det är alltså menyer som dyker upp och ”faller ner” när man håller musen över dem. Likt mina menyer för kategorier, eller likt din webbläsares flikar högst upp, där du hittar ”Arkiv”, ”Redigera” och ”Visa”. Att göra detta för sidor i WordPress är relativt enkelt, så här kommer en guide på hur det går till.

wp_list_pages()

För att göra detta i WordPress kommer vi att använda oss av funktionen wp_list_pages() som listar alla sidor precis på ett sånt vis som vi vill ha dem.

Gå in i header.php och leta upp ett bra ställe att placera dina sidor på. När du hittar en bra plats skriver du följande:

1
2
3
4
5
6
7
8
<div id="nav">
    <ul>
        <li <?php if(is_front_page()) { ?>class="current_page_item"<?php } ?>>
            <a href="<?php echo get_option('home'); ?>/">Hem</a>
        </li>
        <?php wp_list_pages('sort_column=menu_order&title_li=' ); ?>
    </ul>
</div>

Ok, nu har vi skapat oss en lista med först en länk till ”Hem” och sedan en lista av resterande sidor och undersidor. Raden om ”current_page_item” är till för att vi ska kunna ändra färg på ”Hem” när vi är placerade på den sidan.

Vi kommer nu få en meny som ser ut ungefär så här:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="nav">
    <ul>
        <li>
            <a href="#">Hem</a>
        </li>
        <li>
            <a href="#">Topp Sida</a>
            <ul>
                <li>
                    <a href="#">Undersida 1</a>
                </li>
                <li>
                    <a href="#">Undersida 2</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Sida utan undersidor</li>
        </li>
    </ul>
</div>

Style.css

Gå nu vidare till din stilmall i filen style.css och börja med följande:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#nav{
	background: #464646;
	color: #999999;
}
#nav li{
	display: inline;
	list-style: none;
	margin: 0;
	position: relative;
}
#nav a{
	text-decoration: none;
	color: #999999;
	padding: 0px 15px;
	margin: 0;
	display: inline-block;
	font: normal 14px/47px Georgia,"Times New Roman","Bitstream Charter",Times,serif;
}

Det som är viktigt här är att ha li som inline så att de hamnar på en horisontell linje istället för under varandra. Sedan att ha position som relative så att vi senare kan få våra drop down menyer att hamna rätt.

I a är det viktigt att använda inline-block så att de hålls kvar på en linje, men fortfarande accepterar line-hight och padding. Line-hight är det som står efter / i deklarationen om font, alltså i exemplet 47 px. Detta ska vara höjden på din meny. Så har du en högre eller mindre meny, ändra detta värde.

Göm dina undersidor

Som läget är nu, så kommer vi att se våra undersidor hela tiden, så vill vi inte ha det, utan vi vill bara att undersidorna ska synas ifall vi håller musen på huvud sidan. Så vi lägger till följande.

1
2
3
4
5
6
7
#nav ul ul{
	display: none;
	position: absolute;
	left: 0;
	top: 100%;
	background: #464646;
}

Vi definierar #nav ul ul eftersom det betyder en onumrerad lista inuti en onumrerad lista, alltså en undermeny. Sätt display till none så visas den inte. Sätt till din ”Absolut” så blir vi fria att placerade den var som helst. Eftersom vi vill ha den precis under huvud sidan så sätter vi left: 0; och top: 100%; det är här det är viktigt att vi redan definierat #nav li till position: relative, annars skulle undermenyn hamna högst upp i vänster hörn.

Bakgrunds färgen är bara att den ska synas.

Ta fram undersidorna igen

Vi vill att undersidorna ska visas när vi håller musen över länken till huvud sidan, alltså a:hover, men detta skulle göra att under menyn skulle försvinna ifall vi försöker flytta ner musen till undermenyn. Så istället använder vi oss av li:hover, då vi har en <li>-tag som sträcker sig runt hela undermenyn. Koden blir alltså:

1
2
3
#nav li:hover > ul{
	display: block;
}

Genom att sätta display till block får vi dem dessutom på en vågrät linje under varandra. Vill vi att undermenyerna också ska vara på en horisontell linje kan vi sätta display till inline.

Eftersom alla li, enligt tidigare definition är satta som inline och vi här vill ha dem som block, kan det vara bra att definiera det här också:

1
2
3
#nav li ul li{
	display: block;
}

Snygga till

Om vi är på en under-under-sida (Pappa > Son > Barnbarn) och vill att alla tidigare sidor, plus den vi är på (Barnbarn, Son och Pappa) ska bli färgade på ett speciellt sätt så kan vi använda oss av vissa klasser som automatiskt kommer att skapas. Den aktiva sidan (Barnbarn) kommer att få klassen current_page_item sidan ovanför den (Son) kommer att få klassen current_page_parent och alla sidor ovan för denna (Pappa, och Farfar och…) kommer att få klassen current_page_ancestor. Vi kan deklarera dessa separat eller gemensamt enligt:

1
2
3
4
5
#nav li.current_page_ancestor > a,
#nav li.current_page_parent > a,
#nav li.current_page_item > a{
	color: #FFFFFF;
}

Koden ovan gör så att länken direkt efter ett list item som har någon av dessa klasser kommer att få en vit text.

Under-under-sidor

Om du har sidor som är barn till en undersida så kommer du att få problem med våran kod. Det mest klassiska är att dessa menyer ska dyka upp bredvid menyn till höger om denna. Vi kan då skriva in följande:

1
2
3
4
5
#nav ul ul ul{
	position: absolute;
	left: 100%;
	top: 0;
}

Vilket kommer att flytta alla under-undersidor en meny till höger.

Tips: Vill du ha dem till vänster istället skriver du left: auto; right: 100%;

Vill du att menyerna ska ligga lite omlott kan du tex skriva:

1
2
3
4
5
#nav ul ul ul{
	position: absolute;
	left: 98%;
	top: 10px;
}

Hover effekter

Det sista vi kan snygga till är så att vi får ändra färger på menyvalen när vi håller musen på dem. Det ordnar vi enklast så här:

1
2
3
4
#nav li a:hover{
	color: #FFFFFF;
	background: #999999;
}

Detta kommer att göra så att när du håller musen på ett menyalternativ kommer det alternativet att bli vitt och få en bakgrundsfärg som är #999999;

Vill du göra det lite mer avancerat, så att det blir likt bilden högst upp, där det inte någon bakgrund på top-länken, men på undersidorna, och färgen dessutom stannar kvar när man kommer vidare till en undersida kan du använda följande kod:

1
2
3
4
5
6
#nav li ul li:hover > a{
	background: #999;
}
#nav li:hover > a{
	color: #FFFFFF;
}

Avslutning

Det ska nog vara allt som krävs, självklart man man leka mer om man vill, testa att sätta en border på #nav li ul och se vad som händer. Ändra på top och left och se hur det förändrar ditt utseende, skriv menyvalen i andra storlekar, bold och med andra färger och ändra detta när du håller musen över för att få en annan effekt. Sätt en bakgrund med en gradient färg för att skapa en webb 2.0 känsla över menyn.

Skriv en kommentar och visa din meny eller fråga om det är någonting som inte fungerar.

Här följer en exempel fil med css koden som används i exemplet.

Demo: Alla bilder kommer från temat AdminPress, kolla in det här: AdminPress Demo
Download: Ladda ner exempelfilen: dropdownstyle.rar (870 B) senast uppdaterad 17 February 2011

Överkurs, undermenys inikator

Om man vill sätta dit en liten pil på undersidorna som indikerar att det finns fler undermenyer så finns det ett ganska snyggt sätt att göra det på, men tyvärr syns det inte i IE.

Eftersom WordPress inte sätter dit några klasser som visar på att det finns under menyer, och jag i den här guiden inte vill göra några avancerade javascript eller php-funktioner för att lägga till det, så kan vi använda oss av en css kod för att lösa problemet.

Vi utnyttjar :not() och :last-child, som fungerar utmärkt i Firefox, Opera och Crome, men tyvärr inte i någon version av IE. Koden ser ut så här:

1
2
3
#nav li li a:not(:last-child){
	background: url(./images/arrowInd.png) no-repeat 100% 50%;
}

Det koden säger är att li li a, en länk i en lista i en lista (alltså en länk i en undermeny) som inte är det sista barnet i det listobjektet, ska ha en bakgrund.

Om vi tittar på våran förenklade modell av menyn från tidigare:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="nav">
    <ul>
        <li>
            <a href="#">Hem</a>
        </li>
        <li>
            <a href="#">Topp Sida</a> <!-- Länk med undermeny -->
            <ul> <!-- Fler barn i <li> -->
                <li>
                    <a href="#">Undersida 1</a>
                </li>
                <li>
                    <a href="#">Undersida 2</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Sida utan undersidor</li> <!-- Länk utan undermeny. Ända barnet -->
        </li>
    </ul>
</div>

Som ni kan se har länkar med undermenyer fler element under sig, och blir då alltså ”inte sista barnet” och uppfyller kraven från innan.

På detta länkar vill vi sätta en bakgrund som ser ut som en pil, som vi sedan placerar längst ut till höger (Häger 100% och vertikalt i mitten 50%).

I exemplet krävs också att du har en bild som heter arrowInd.png som ligger i mappen Images


57 kommentarer till 'Bygg en Drop Down meny för sidor i WordPress' »»

  • Usch jag får verkligen inte rätt på det. Förstår inte hur jag ska göra alls. Du har ingen egen – lätt förståelig guide hur man ie anpassar sin sida?? Det är inte bara denna menyn som inte fungerar i ie utan även min topp-bild bildspel. Vad tråkigt det blir att göra sidor när IE inte kan läsa nått känns det som…

    min sida: http://www.josefina-norman.se
    (Har du nått tips på vad jag ska göra??)


    • Jo IE är verkligen inte roligt att ha att göra med. Jag lovar att 80% av alla pengar som läggs ner på webbutveckling går ut på att göra webbsidorna läsbara i gamla uråldriga IE-versioner. Så känns det i alla fall på mitt jobb.

      Jag har faktiskt planerat att skriva en artikel om IE, men det kommer nog dröja lite till… På tok för mycket att göra för att hinna med den här sidan tyvärr.

      Jag tycker att drop down menyn fungerar bra i alla versioner av IE (7-9). Header bilden ser dock lite konstig ut, men det är lätt fixat. Gå in i text-style.css (rad 12)
      Och ta bort följande:

      #header {
          text-align: center;
      }

      Lycka till.


  • Tack för svaret!! Jag tog bort koden som du skrev och nu funkar ju headern. Försökte även ändra lite i menyn, kändes som om man tappade undermenyn på Bröllopsfotografering då det värdet var satt till top: 100% på nav ul ul men det hjälpte inte att sätta det till 80%. När jag surfar med explorer så måste jag hålla ner musen för att kunna ”glida över” till undermenyn. Frågan är hur många som kommer på samma teknik när de är inne på min sida..

    Förstår inte varför de inte kan göra explorer något bättre, känns ju så förlegat… Ser fram emot ett framtida inlägg om ie buggfix, när du har tid för det!! Sidan är KANON så jag hoppas att du hittar tid till den framöver!

    Ha en bra dag!


    • Nej. IE7 är inte rolig att ha att göra med. Det fungerar dock i både IE8 och IE9 (problemet med IE är att även om de skapar nya och bättre versioner av sin webbläsare så har fortfarande användare kvar de gamla läsarna, vilket gör att man ändå måste få det att fungera även där.

      Jag kan dock inte hitta någon enkel lösning på ditt problem. Du får testa lite med att sätta lite av följande deklarationer på a taggen i menyn:
      display: block;
      height: 46px;
      padding: 15px 10px;

      Det kan göra susen ibland. Lycka till


  • Tack så jättemycket för det här inlägget! Även fast jag skriver på blogg.se är det här den absolut bästa beskrivningen hittills. Gör mycket när man förklarar vad allt står för :) Tack igen!


  • Vet inte om du kan hjälpa mig eftersom jag använder blogg.se men jag blir helt tokig på koderna! Igår när jag hade gjort klart dem var det precis som jag ville ha det med mina dropdowns. Idag när jag kollade (efter att ha skickat iväg ett inlägg från mobilen) var allt helt annorlunda! Menyraden går nu ned längs sidorna av mina inlägg och alla länkar är helt i oordning. Dessutom visas mina inlägg i dubbel upplaga nu! Jag förstår inte varför det har blivit så :(


  • Ordnade det själv nu :) Visade sig att din mall bara fungerade bra i firefox för mig (och inte i explorer). Efter att jag ändrade lite i mallen fungerade det däremot i båda :D . Problem solved!


    • Tack för snälla kommentarer, och vad trevligt att höra att du löste ditt problem själv. Man lär sig alltid med av att lyckas lösa saker på egen hand. Lycka till med fortsatt kodande.

      Vänligen WpGurun


  • Hej. Fin guide.
    Men jag vill göra en dropdownmeny med egen bild. Flikar. Som här: http://lummelundaannorlunda.blogg.se/

    Hur gör jag då?


    • Hon har inte använt wordpress egna funktioner för att skapa den första översta randen, utan den är ”hårdkodad”. Och sedan har hon skrivit ut (med hjälp av WordPress) varje korrekt undermeny till respektive flik.


  • 53. JL' skriver: |

    Hejsan! Jag försöker få till sånna där dropdown menyer, men eftersom att detta tips är för dem med wordpress så undrar jag om du vet hur man ska göra när det gäller blogg.se?


    • Css:en och koden är i stort sätt den samma för själva dropdown funktionen. Enda skillnaden är hur man får fram en lista på sidor… Och det vet jag tyvärr inte… Du får vända dig till en blogg.se guru istället :)


  • Hej!
    Superbra gjort! Jag satt och gruvade mig för att börja göra det här då det var så struligt sist jag gjorde det och det var ett tag sedan, samt inte i WordPress.

    Så hittade jag denna och på en halvtimme var det klart och fungerar (har dock inte testat ie ännu och bereder mig på en kalldusch).

    Tack!
    Mvh
    Jennie


  • 56. Pingback: Emmas Hjärtan ♥ » Att göra en dropdown meny…

  • 57. antonia skriver: |

    Jag är nog mest intresserad av en lösning på dropdown kommentar. Alltså när kommentarer är inbäddade mellan inläggen så att man slipper öppna en ny sida.


Lämna en kommentar

XHTML: Du kan använda dessa taggar:
<a href="">, <em>, <strong>, <img src="">,
<pre lang="php">, <code>, <blockquote>