Att bygga en horisontell meny med WordPress inbyggda menyhanterare är inte svårt, läs mer om menyhantering i WordPress.
Det som kan vara en utmaning är att skapa en submeny där menyvalen visas horisontellt, på en ny rad, snarare än att de visas via en dropdown-meny.
På en av mina testsajter har jag en huvudmeny med några huvudsidor som i sin tur har några submenyval, “indragna” under toppmenyvalet:
När jag använder den meny på testsajten så genereras följande HTML:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<div id=“top-navigation”>
<div class=“menu-top-navigation-container”><ul id=“menu-top-navigation” class=“menu”><li id=“menu-item-32″ class=“menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-32″><a href=“http://www.hermosabeach.se/”>Hem</a></li>
<li id=“menu-item-35″ class=“menu-item menu-item-type-post_type menu-item-object-page menu-item-35″><a href=“http://www.hermosabeach.se/hermosa-beach/”>Hermosa Beach</a>
<ul class=“sub-menu”>
<li id=“menu-item-74″ class=“menu-item menu-item-type-post_type menu-item-object-page menu-item-74″><a href=“http://www.hermosabeach.se/besoka-platser-i-hermosa-beach/”>Besöka</a></li>
<li id=“menu-item-75″ class=“menu-item menu-item-type-post_type menu-item-object-page menu-item-75″><a href=“http://www.hermosabeach.se/handla-mat-i-hermosa-beach/”>Handla mat</a></li>
<li id=“menu-item-76″ class=“menu-item menu-item-type-post_type menu-item-object-page menu-item-76″><a href=“http://www.hermosabeach.se/restauranger-i-hermosa-beach/”>Restauranger</a></li>
<li id=“menu-item-77″ class=“menu-item menu-item-type-post_type menu-item-object-page menu-item-77″><a href=“http://www.hermosabeach.se/hotell-i-hermosa-beach/”>Hotell</a></li>
</ul>
</li>
<li id=“menu-item-33″ class=“menu-item menu-item-type-post_type menu-item-object-page menu-item-33″><a href=“http://www.hermosabeach.se/bb-i-los-angeles/”>B&B i LA</a></li>
</ul></div>
|
Början och slutet av HTML-koden är specifik för den meny jag använder. Det du ska hålla koll på är UL-klassen “menu” och UL-klassen “sub-menu”. Submenyn finns där i koden men är dold när startsidan visas. Ett klick på “Hermosa Beach” i det här fallet, som är modersidan, visar submenyn.
UL-klasserna ger du lite kärlek* så ska det funka sen. Du bör kanske jobba lite med färger, marginaler och padding för att få det snyggt på din hemsida!
* Tips på kärlek:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
.menu {
background-color:#ccc;
}
.menu li, .sub-menu li {
display:inline;
}
.menu li .sub-menu {
display:none;
}
.menu li.current-menu-item .sub-menu {
display:block;
position:absolute;
width:100%;
background-color:#009ee0;
}
|
