Sådan laver du en dropdown-menu i wordpress

brianbrandt 5 kommentarer

Dropdown menuer til WordPress er blevet meget populære, og det er efterhånden sjældent du ikke finder en hjemmeside med en dropdown i navigationen. Ofte kræver de en masse javascript, men det er faktisk ikke nødvendigt. Herunder vil jeg nu vise trin for trin hvordan du laver en dropdown menu til WordPress.

Trin 1 – Aktiver wordpress standardmenu

For at gøre det muligt, at bruge wordpress’ integrerede standardmenu, skal du indsætte følgende kode i functions.php filen i din tema-mappe.


register_nav_menus( array(
'primary' => 'Primary Navigation'
) );

Vær opmærksom på, om koden ligger der i forvejen. Koden må ikke være ens to steder.

Ønsker du at have mere end en wordpress menu, kan du gøre det i samme kode. Du skal bare tilføje en ny key i dit array.

Det kan for eksempel se således ud.


register_nav_menus( array(

'primary' => 'Primary Navigation'

'secondary' => 'Secondary Navigation'

) );

På den måde kan du faktisk tilføje så mange menuer du ønsker.

Trin 2 – Indsæt menuen i dit template

I langt de fleste tilfælde, ligger menuen i header.php. Men du kan lægge den lige hvor du synes den skal være. Start derfor med at åbne den fil din menu skal ligge i.

Find da det sted i filen den skal ligge og læg den evt. ind i en div-container, så du kan give din menu en seperat styling.

Du skal bruge følgende kode for at kalde menuen.


<!--?php wp_nav_menu( array( 'theme_location' =--> 'primary' ) ); ?&gt;

Dette indsætter menuen “Primary Navigation” i din php fil. Ønsker du at indsætte en anden menu skal du bare ændre ‘primary’. Eksempelvis:


<!--?php wp_nav_menu( array( 'theme_location' =--> 'secondary' ) ); ?&gt;

Trin 3 – Style din menu (før dropdown)

Nu til selve stylingen af din menu. Her arbejder vi med css i din temafil “style.php”.

Lad os antage, at du har kaldt din parent-div for “menu”. Så ser din kode således ud:

<div id="menu">'primary' ) ); ?&gt;</div>

Du kan nu i stylingen lave et seperat afsnit af css-koder, kun til menuen.

Start med at target selve parent-div’en i din css.


#menu {

}

I din menu, bliver der automatisk indsat en parent-div til de uordnede lister (ul) og dens list-items (li). Denne parent-div har classen “menu”, som standard. Derfor skal du bruge følgende css-selectors, for at style din menu (vi kommer til dropdown-stylingen i trin 5).


#menu {}

#menu .menu {}

#menu .menu ul {}

#menu .menu ul li {}

#menu .menu ul li a {}

Du kan også, for at lave en dynamisk styling bruge følgende css-selectors.


#menu .menu ul li:hover {}

#menu .menu ul li a:hover {}

De påvirker hvert menu-element, når du bevæger cursoren hen over.

Trin 4 – Et hurtigt eksempel på styling

Hvordan din styling skal være, afhænger 100% af dit design.

Med denne opstilling kan du både lave horisontale og vertikale menuer.

Jeg vil derfor blot give et hurtigt eksempel på, hvordan en menu kunne styles.

Jeg ønsker at opnå følgende resultat.

Med følgende kode.


#menu {

width: 100%;

height: 40px;

padding: 10px 40px;

background-color: #333;

}

#menu .menu {

}

#menu .menu ul {

list-style: none;

}

#menu .menu ul li {

list-style: none;

height: 40px;

margin: 0 8px;

display: inline-block;

}

#menu .menu ul li a {

color: #fff;

font: 18px Arial, sans-serif;

text-transform: uppercase;

text-decoration: none;

}

#menu .menu ul li:hover {}

#menu .menu ul li a:hover {

color: #ff3333;

}

Trin 5 – Dropdown

Din dropdown funktion er allerede sat ind i den kode, du satte ind i trin 1.

Den skal faktisk bare styles.

Din dropdown-menu ligger som en uordnet liste med classen “children”, under den uordnede liste, som ligger i forvejen.

Det er altså sat op på følgende måde.

<div id="menu">
<div>
<ul>
	<li>Hovedmenupunkt</li>
	<li>Hovedmenupunkt</li>
	<li>Hovedmenupunkt
<ul>
	<li>Undermenupunkt</li>
	<li>Undermenupunkt</li>
	<li>Undermenupunkt</li>
</ul>
</li>
</ul>
</div>
</div>

Du skal derfor bruge følgende css-selectors til at style din dropdown.


#menu .menu ul ul {}

#menu .menu ul ul li {}

#menu .menu ul ul li a {}

VIGTIGT!

Det er en god idé, ikke at have dropdown på, hele tiden. Dette kan klares med en display-none.

Det vil se ud på følgende måde i css’en.


#menu .menu ul ul {

display: none;

}

Nu skal du jo selvfølgelig have kaldt din dropdown frem, hver gang du flytter cursoren hen over et element.

Dette gøres med følgende kode.


#menu .menu ul li:hover &gt; ul {

display: block;

}

Igen kan du selvfølgelig bruge hover-selectors til at lave en dynamisk menu.


#menu .menu ul ul li:hover {}

#menu .menu ul ul li a:hover {}

Du kan altid indsætte et trin mere til din dropdown, ved at indsætte en “ul” mere i din css-selector.


#menu .menu ul ul ul {}

#menu .menu ul ul ul li {}

#menu .menu ul ul ul li a {}

Trin 6 – Et eksempel på dropdown

Jeg prøver at opnå dette.

Med denne kode.


#menu .menu ul ul {

display: none;

}

#menu .menu ul li:hover &gt; ul {

display: block;

}

#menu .menu ul ul {

background-color: #666;

width: 200px;

position: relative;

top: 13px;

margin-left: -15px;

padding: 2px;

}

#menu .menu ul ul li {

height: 20px;

width: 190px;

margin: 0;

padding: 5px;

}

#menu .menu ul ul li:hover {

background-color: #fff;

}

#menu .menu ul ul li a {

color: #fff;

font: 12px Arial, sans-serif;

text-transform: uppercase;

}

#menu .menu ul ul li:hover &gt; a {

color: #333;

}

Trin 7 – Active elements

Din wordpress menu har en funktion, der kan give en anden farve til det menu-punkt du allerede befinder dig på.

Dette gøres med følgende classes.


current_page_item

current-menu-ancestor

current-menu-item

current-menu-parent

For eksempel.


#menu .menu ul li.current_page_item &gt; a,

#menu .menu ul li.current-menu-ancestor &gt; a,

#menu .menu ul li.current-menu-item &gt; a,

#menu .menu ul li.current-menu-parent &gt; a {

color: #ff0000;

}

God fornøjelse med at lave din egen dropdown menu til WordPress. Nu skal du bare tilføre dine egne farver, typografier og størrelser.



Discussion

  • Oliver

    Det kunne være rigtig rart hvis dropdown-menupunkter kunne vises i sidebaren vha enten en widget eller kode i functions.php – men det er vist ikke helt ligetil;-)

    14-06-11
    • Casper

      Nej, det er bestemt ikke lige til. Men der findes et rigtig godt plug-in til at lave dine menuer:
      http://wpmegamenu.com/
      Kendt som UberMenu.
      Det er desværre ikke et gratis plug-in, men det er alle pengene værd.

      14-06-11
  • Tanja

    Er der en måde man kan style den der markør, der viser at der er undersider, som regel en trekant? God guide i øvrigt 🙂

    14-06-11
    • admin

      Hej Tanja,
      Mange tak for ros 🙂

      Der er ikke en standard funktion til dette i WordPress, men der er flere måder at opnå dit resultat.

      1) Giv dine WordPress menuer (forudsagt at de er sat op i menuer i backenden) en class. For at aktivere classes skal du under “menuer” trykke på “skærmindstillinger” i toppen af backenden. Nu kan du tilføje en class der fx hedder “has_sub_page” til alle punkter med underpunkter og style den i CSS’en.

      2) Du skal have fat i en walker, eller en funktion der udvider din wordpress wp_nav_menu class. Der er en på: http://wordpress.stackexchange.com/questions/37179/wp-nav-menu-check-if-the-list-item-has-children-and-add-a-class-to-anchor-link
      Men jeg har ikke testet dette.

      Ellers er der ikke umiddelbart nogen metode til dette, så vidt jeg lige hurtigt kan se 🙂

      14-06-11
  • SImone

    Hej Casper
    Jeg er igang med at lære det her nye sprog så tusind tak for den grundige gennemgang, den har hjulpet mig meget.

    Nu er det sådan at jeg gerne ville kunne åbne min menu på click i stedet for hover, da jeg syntes det giver en mere rolig side. Jeg har prøvet at finde svar andre steder men de er meget plugin specifikke og ikke rigtig noget jeg kan bruge med den her tilgang. Eftersom jeg ikke har hundred procent styr på det hele endnu ved jeg ikke hvor jeg skal starte. Er det noget du kan hjælpe med?

    På forhånd tak!

    14-06-11
  • Der er lukket for kommentarer