darmowe szablony stron www

Menu pionowe składające się z kilku bloków

Zobacz przykład

W tym przykładzie menu pionowe składa się z kilku (tutaj dwóch) bloków, z których każdy jest odrębną listą nienumerowaną <ul>:

<div id="menu">
     <div class="box">
          <h2>Krzewy liściaste</h2>
          <ul>
               <li><a href="#">Berberys</a></li>
               <li><a href="#">Bukszpan</a></li>
               <li><a href="#">Forsycja</a></li>
               <li><a href="#">Jaśminowiec</a></li>
               <li><a href="#">Ligustr</a></li>
               <li><a href="#">Magnolia</a></li>
               <li><a href="#">Różanecznik</a></li>
               <li><a href="#">Śnieguliczka</a></li>
               <li><a href="#">Tamaryszek</a></li>
          </ul>
     </div>
     <div class="box">
          <h2>Iglaki</h2>
          <ul>
               <li><a href="#">Cis</a></li>
               <li><a href="#">Jałowiec</a></li>
               <li><a href="#">Jodła</a></li>
               <li><a href="#">Modrzew</a></li>
               <li><a href="#">Sosna</a></li>
               <li><a href="#">Świerk</a></li>
               <li><a href="#">Żywotnik</a></li>
          </ul>
     </div>
</div>

I arkusz stylów:

#menu {
    width: 150px;
    background: #D7EEF4;
}

#menu h2 {
    margin: 0;
    width: 150px;
    height: 20px;
    font: bold 12px/20px Arial, Helvetica, sans-serif;
    text-align: center;
    color: White;
    background: url(images/nagl_menu.gif);
}

#menu ul {
   list-style: none;
   margin: 0 0 15px 0;
   padding: 0;
   background-color: #ECECEC;     
   border-bottom: 2px solid #FFB868;
   border-left: 2px solid #FFB868;
   border-right: 2px solid #FFB868;
}

#menu ul li{
   margin: 0;
   padding: 0;
}

#menu ul li a {
   display: block;
   margin: 0;
   padding: 0 0 0 10px;
   height: 20px;
   font: 11px/20px Verdana, sans-serif;
   text-align: left;
   text-decoration: none;
   color: #CD853F;
}

#menu ul li a:hover {
   text-decoration: none;
   color: Black;
   background: White;
}

Każda lista została opakowana w dodatkowy element div "block" umożliwiający dalsze jej formatowanie. Odstęp między blokami menu ustalamy w #menu ul: "margin: 0 0 15px 0;".

Formatowanie samej listy podobne jest jak w tym przykładzie.

Pobierz przykład