Chodził za mną ostatnio problem. Wyobraźcie sobie menu jak na stronie Polskiego Związku Brydża Sportowego. Stronę kodujemy dla przeciętnego użytkownika – więc menu ma być trywialnie proste w obsłudze. Aby nie komplikować sprawy zakładamy, że te dwa poziomy wystarczają.
Przystępujemy do działania. Po pierwsze – w functions.php deklarujemy używanie naszego nowego menu:
|
1 |
register_nav_menu( 'upper', 'Główne menu nawigacyjne' ); |
Następnie wklejamy kod menu w wybrane miejsce szablonu strony, najczęściej w header.php:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<nav> <div class="highnav"> <div class="wrapper"><?php $args = Array ( 'theme-location' => 'upper', 'menu_id' => false ); wp_nav_menu( $args); ?> </div> </div> <div class="lownav"> </div> </nav> |
Dodajemy style CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
nav { width:100%; position:relative; z-index:5; } nav .highnav { width:100%; background-color:#3d5837; color:white; height:29px; } nav .lownav { background-color: #8ea48f; color:black; height:29px; width:100%; } nav li { float:left; list-style:none; margin:0; z-index: 10; } nav .wrapper { width: 980px; margin: 0 auto; } .menu li { height: 29px; } .highnav li a { display:block; color:#eeeeee; text-decoration:none; padding:0 10px; line-height:29px; } .highnav li a:hover { background-color:#8ea48f; color:white; } .sub-menu { position:absolute; top: 29px; left: 0; height: 29px; display: none; } .current-menu-item .sub-menu, .current-menu-parent .sub-menu, .current-post-ancestor { display: block; } .sub-menu li a { display:block; color:#000000; text-decoration:none; padding:0 10px; line-height:29px; } .submenu li a:hover { color:white; } |
I już prawie możemy się cieszyć działającą stroną. Pozostaje jeden problem: załóżmy, że w dolnym menu mamy archiwum kategorii wpisów. Po otwarciu dowolnego wpisu z archiwum – znika nam podmenu. Chodziłem długo z tym problemem, a uciekło mi rozwiązanie trywialnie proste – jQuery. Wklejamy powyższe gdzieś w sekcji [cci]head[/cci] strony (ale poniżej importu jQuery):
|
1 2 3 4 5 |
<script type="text/javascript"> $(document).ready(function() { $("li:has(.current-post-ancestor)").addClass("current-menu-parent"); }); </script> |
i już możemy cieszyć się w pełni funkcjonującym menu nawigacyjnym.
Problem jest dość ciekawy z praktycznego punktu widzenia. Takie menu widuję często na stronach dużych portali, nikt jednak (poprawcie mnie, jeśli się mylę) nie zdecydował się na opisanie jego budowy od początku do końca.
Dodaj komentarz