Znakowanie pozycji menu w Joomla!

Możliwość umieszczenia na jednej stronie kilku menu wymaga sposobu ich rozróżnienia. Rozwiązanie przyjęte w Joomla! jest zaskakująco proste i funkcjonalne.

Oznaczanie typu pozycji

Kod Joomla! generuje odnośniki z dwoma rodzajami wartości dla atrybutów id i class, każdą o wyraźnie sprecyzowanej roli:

• mainlevel - wskazuje na łącza do głównych, nadrzędnych pozycji w menu,
• sublevel - wskazuje na łącza do pozycji potomnych.

Oznaczanie miejsca w strukturze

A że na stronie można stworzyć więcej niż jedno menu, administratorzy mają do dyspozycji dwa paramtry modułów wyświetlających menu:

• przyrostek klasy CSS modułu,
• przyrostek klasy CSS menu,

Zastosowanie przyrostków generuje np. taki kod menu:

 
<div class="moduletable-boczne">
   <h3>Menu witryny</h3>
   <ul id="mainlevel-glowne">
      <li><a href="url" class="mainlevel-glowne" >Start</a></li>
      <li><a href="url" class="mainlevel-glowne" >Nowości</a></li>
      <li><a href="url" class="mainlevel-glowne" >Komunikaty</a></li>
   </ul>
</div>

Klasa CSS z przyrostkiem, określona dla menu wykorzystywany jest równocześnie, jak widać z przykładu:

• jako wartość identyfikatora bloku obejmującego menu,
• jako wartość klasy stylu elementu a.

Dzięki takiemu rozwiązaniu twórcy szablonów graficznych mogą zaprojektować w arkuszach stylów alternatywne style dla różnych modułów menu i odnośników w tych modułach.

Definiowanie stylu menu

Parametry modułu menu pozwalają ponadto ustalić administratorom, jakimi znacznikami HTML zostanie objęte menu i jego pozycje, decydując się na jeden z z trzech stylów menu:

• pionowe: generowane w wierszach jednokolumnowej tabeli,
• poziome: generowane w komórkach jednowierszowej tabeli,
• poziome lub pionowe - lista: generowane jako lista nieuporządkowana.

Kod menu w postaci listy nieuporządkowanej, zgodny ze stndardami XHTML, przedstawiliśmy w listingu powyżej.

Gdyby w tym samym przypadku został ustalony dla menu styl pionowe, kod generowany przez Joomla wyglądałby następująco:

<table cellpadding="0" cellspacing="0" class="moduletable-boczne">
   <tr>
      <th valign="top">
         Menu witryny
      </th>
   </tr>
   <tr>
      <td>
         <table width="100%" border="0" cellpadding="0" cellspacing="0">
            <tr align="left">
               <td>
                  <a href="url" class="mainlevel-glowne">Start</a>
               </td>
            </tr>
            <tr align="left">
               <td>
                  <a href="url" class="mainlevel-glowne">Nowości</a>
               </td>
            </tr>
            <tr align="left">
               <td>
                  <a href="url" class="mainlevel-glowne">Komunikaty</a>
               </td>
            </tr
         </table>
      </td>
   </tr>
</table>

Formatowanie menu

Na możliwości kształtowania wyglądu menu projektanci szablonów dla Joomla! i administratorzy raczej nie powinni narzekać, choć łatwo można sobie wyobrazić jeszcze bardziej elastyczny i użyteczny system (standardowy nie umożliwia np. budowy wielopoziomego menu w posiaci listy nienumerowanej).

Najmniej godnym poecenia są rozwiązania oparte na tabelach. Menu jest listą pozycji w ofercie witryny i zgodnie z zasadami znakowania semantycznego powinno być odpowidnio sformatowaną listą. Niemniej, decyzję w tej kwestii pozostawiono twórcom witryn. Szablon również powinien taką decyzję umożliwiać, dostarczając zarówno reguł dla menu pionowego i poziomego sformatowanego jako lista nieuporządkowana, jak i w tabelkach.

W arkuszu stylów powinny się znaleźć deklaracje domyślnych formatów menu oraz formatów alternatywnych - z przyrostkiem. Punktem wyjścia jest opracowanie stylów domyślnych, a następnie odmian - poprzez modyfikację wybranych własności.

Menu pionowe - lista

Określenie reguł dla menu pionowego w postaci listy nieuporządkowanej nie jest trudne nawet jeśli chcemy je wystylizować podobnie, jak menu złożone z przycisków oparte na wielowierszowej tabeli. Przykład reguł przedstawiony jest poniżej:

Listing Menu pionowe - lista

 
#mainlevel-boczne {
   width              : 180px;
   font-family        : Arial, Helvetica, sans-serif;
}
#mainlevel-boczne ul {
   list-style         : none;
   padding            : 0;
   margin             : 0;
}
#mainlevel-boczne li {
   border-bottom      : 1px solid #FFF;
}
#mainlevel-boczne li a  {
   display            : block;
   padding            : .5em; 
   color              : #FFF;
   text-decoration    : none;  
}
#mainlevel-boczne li a:link, #mainlevel-boczne li a:visited {
   border-left        : 1em solid #54C104;
   border-right       : 1px solid #54C104;
   background-color   : #429306;
}
 
#mainlevel-boczne li a:hover, #mainlevel-boczne li a:active{
   border-left        : 1em solid #429306;
   border-right       : 1px solid #429306;
   background-color   : #54C104;
}
 

Menu planujemy umieścić w bocznym pasku, stąd zadeklarowaliśmy specjalną klasę z przyrostkiem -boczne i określiliśmy szerokość elementu, w którym zostanie umieszczone.

Następnie zdefiniowaliśmy styl listy - usunęliśmy punktory oraz domyślne marginesy i odstępy.

W kolejnej regule dodaliśmy do elementu li dolną linię obramowania, oddzielającą pozycje menu.

Trzy kolejne reguły określają wygląd odnośników. W pierwszej ustawiliśmy właściwość display na block, co spowoduje, że łącza będą wyświetlane jako element blokowy, a cały obszar przycisku będzie aktywny podczas najazdu wskaźnika myszki. Usunęliśmy również linię podkreślającą łącza.

Dwie następne reguły ustalają odmienny wygląd nieodwiedzonych i odwiedzonych pozycji menu oraz pozycji wskazywanych i aktywnych.

Menu - lista pozioma

Poniższy przykład ilustruje sposób formatowania menu poziomego opartego na elementach listy nieuporządkowanej. W roli przycisków wykorzystany został tutaj jeden niewielki obrazek zastosowany jako tło.

Listing Menu poziome - lista

 
ul#mainlevel-nav{
   width               : 100%;
   list-style          : none; 
   padding             : 0;
   margin              : 0;
   height              : 2.7em;
   border-top          : 1px solid #eee;
   background          : #fff url(../images/nav_buttons_bg.gif) repeat-x;  
}
ul#mainlevel-nav li{
   display            : inline;
   background         : #bcc6cc url(../images/nav_buttons_bg.gif) repeat-x;
   border-right       : 1px solid #aaa;
   float              : left;
   white-space         : nowrap;
   text-decoration    : none; 
   }
 
ul#mainlevel-nav li a {
   background         : #bcc6cc url(../images/nav_buttons_bg.gif) 0px -1px repeat-x; 
   padding            : 8px 6px 11px 6px;
   display            : block; 
   font-weight        : bold; 
   font-size          : 13px;
   border             : 1px solid #eee;
   border-bottom      : 0px solid #ddd
}
ul#mainlevel-nav li a:hover, ul#mainlevel-nav li a:active {
   background-position: 0px 3px; 
   background-color   : #bcc6cc; 
   padding            : 10px 6px 9px 6px;
   border             : 1px solid #ccc;
   border-bottom      : 0px solid #ccc;
   border-top         : 0px solid #b9c4ca; 
   color              : #900900;
}
 

Zwróć uwagę na trzy własności w regule dla elementów listy:

• display: inline - spowoduje wyświetlanie pozycji menu w jednej linii,
• float: left - umieści pozycje menu obok siebie, w kolejności od lewej,
• white-space - nie pozwoli na dzielenie wierszy,

Ciekawostką w tym rozwiązaniu jest również wykorzystanie jednego obrazka tła, a rónocześnie efektu "wciśniętego przycisku", uzyskany dzięki zastosowaniu ujemnej wartości w pozycjonowniu obrazka (efekt widoczny na naszej witrynie).