WordPressGuru

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.

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.

Ö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