[CSS] Jak ogarnąć listy? – Kilka efektownych sposobów na listy uporządkowane i nieuporządkowane

W dzisiejszym artykule zamierzam poruszyć problem stylizacji list uporządkowanych i nieuporządkowanych za pomocą języka CSS.
Obecnie menu jest najczęściej budowane na bazie listy nieuporządkowanej, dlatego w tym artykule jest przygotowanych kilka przykładów odnośnie menu nawigacyjnego. Ponadto, zaprezentuję tez kilka przykładów na użycie listy jako efektownego sposobu prezentacji treści na stronach WWW.
Dla przypomnienia pokażę jak wygląda lista uporządkowana i nieuporządkowana. Lista uporządkowana

Jeden
Dwa
Trzy

Lista nieuporządkowana

Jeden
Dwa
Trzy

W dolnej części artykułu można sprawdzić demo z tych porad.

Menu nawigacyjne

To jest typowy przykład na stworzenie menu nawigacyjnego na bazie listy nieuporzadkowanej.
Zaczynamy od kodu HTML:

<div id="menu1">
   <ul>
      <li><a href="#">Jeden</a></li>
      <li><a href="#">Dwa</a></li>
      <li><a href="#">Trzy</a></li>
      <li><a href="#">Cztery</a></li>
   </ul>
</div>

Kod CSS do tego przykładu wygląda następująco:

#menu1 ul { 
    list-style: none; 
    text-align: center; 
    border-top: 1px solid #eee; 
    border-bottom: 1px solid #eee; 
    padding: 10px 0; 
}
#menu1 ul li { 
    display: inline; 
    text-transform: uppercase; 
    padding: 0 10px; 
    letter-spacing: 10px; 
}
#menu1 ul li a { 
    text-decoration: none; 
    color: #eee; 
}
#menu1 ul li a:hover { 
    text-decoration:  underline; 
}

Lista z odmienną czcionką dla numerów pozycji

Efekt ten można uzyskać dodając dodatkowy element w list-item. Dzięki temu można uzyskać odmienną wielkość czcionki czy kolor, co jest niemożliwe korzystając ze standardowego sposobu na tworzenie listy.
Kod HTML wygląda tak:

<div id="menu2">
   <ol>
      <li><p><em>Jeden</em> Sed diam eu dui dolor, porttitor laoreet fermentum. Morbi laoreet, enim aliquam convallis. Donec ullamcorper, augue euismod convallis nisl. Etiam dictum sit amet tempus arcu.</p></li>
      <li><p><em>Dwa</em> Sed diam eu dui dolor, porttitor laoreet fermentum. Morbi laoreet, enim aliquam convallis. Donec ullamcorper, augue euismod convallis nisl. Etiam dictum sit amet tempus arcu.</p></li>
      <li><p><em>Trzy</em> Sed diam eu dui dolor, porttitor laoreet fermentum. Morbi laoreet, enim aliquam convallis. Donec ullamcorper, augue euismod convallis nisl. Etiam dictum sit amet tempus arcu.</p></li>
      <li><p><em>Cztery</em> Sed diam eu dui dolor, porttitor laoreet fermentum. Morbi laoreet, enim aliquam convallis. Donec ullamcorper, augue euismod convallis nisl. Etiam dictum sit amet tempus arcu.</p></li>
   </ol>
</div>

Kod CSS:

#menu2 { 
    width: 320px; 
}
#menu2 ol { 
    font-style: talic; 
    font-family: Georgia, serif; 
    font-size: 24px; 
    color: #bfe1f1;  
}
#menu2 ol li p { 
    padding:8px; 
    font-style: normal; 
    font-family: Arial; 
    font-size: 13px; 
    color: #eee; 
    border-left: 1px solid #999; 
}
#menu2 ol li p em { 
    display: block; 
}

Lista po rzymsku

Standardowo listy uporzadkowane są numerowane cyframi arabskimi. W tym przykładzie pokazuję jak zmienić sposób numerowania listy.
Kod HTML:

<div id="menu3">
   <ol>
      <li>Lorem ipsum dolor sit amet, ...<br />Fusce sit amet ...</li>
      <li>Aenean placerat lectus tristique...<br />Vivamus interdum ...</li>
      <li>Mauris eget sapien arcu, vitae...<br />Phasellus neque risus...</li>
      <li>Phasellus feugiat lacus ...<br />Duis rhoncus ...</li>
   </ol>
</div>

Kod CSS:

#menu3 { 
    font-family: Arial, sans-serif; 
}
#menu3 ol { 
    list-style-type: upper-roman; 
    color: #eee; 
    font-size: 14px; 
    list-style-position: inside; 
}

Obrazki jako znaczniki listy

Dobry sposób na upiększenie swojej listy.
Kod HTML:

<div id="menu4">
   <ul>
      <li>Jeden</li>
      <li>Dwa</li>
      <li>Trzy</li>
      <li>Cztery</li>
   </ul>
</div>

Kod CSS:

#menu4 ul { 
    color: #eee;
    list-style-image: url(menu-li.png); 
    font-size: 18px; 
}
#menu4 ul li a { 
    line-height: 30px; 
}

Menu z podmianą tła

Jest to kolejny przykład na wykorzystanie listy nieuporządkowanej jako menu nawigacyjne na stronie.
Kod HTML:

<div id="menu5">
   <ul>
      <li><a href="#"><strong>Jeden</strong>#1</a></li>
      <li><a href="#"><strong>Dwa</strong>#2</a></li>
      <li><a href="#"><strong>Trzy</strong>#3</a></li>
      <li><a href="#"><strong>Cztery</strong>#4</a></li>
   </ul>
</div>

Kod CSS:

#menu5 { 
    width: 320px; 
    font-family: Georgia, serif; 
    font-size: 15px; 
}
#menu5 ul { 
    list-style:  none; 
}
#menu5 ul li a { 
    display: block; 
    text-decoration: none; 
    color: #000; 
    background-color: #FFF; 
    line-height: 30px;
    border-bottom-style: solid; 
    border-bottom-width: 1px; 
    border-bottom-color: #CCCCCC; 
    padding-left: 10px; 
    cursor: pointer; 
}
#menu5 ul li a:hover { 
    color: #FFFFFF; 
    background-image: url(iphone-li.png); 
    background-repeat: repeat-x; 
}
#menu5 ul li a strong { 
    margin-right: 10px; 
}

Menu z rotacją - wykorzystanie CSS3

Jest to bardzo ciekawy efekt, ale jego wadą jest to, że tego efektu nie uświadczymy w IE.
Wychodzę z założenia, że zawsze można go użyć jako element propagujący dobre, nowoczesne przeglądarki (FF, Chrome, Opera czy Safari).
Kod HTML:

<div id="menu6">
   <ul>
      <li><a href="#">Jeden</a></li>
      <li><a href="#">Dwa</a></li>
      <li><a href="#">Trzy</a></li>
      <li><a href="#">Cztery</a></li>
   </ul>
</div>

Kod CSS:

#menu6 ul { 
    list-style: none; 
}
#menu6 ul li { 
    font-family: Georgia, serif; 
    font-size: 18px; 
}
#menu6 ul li a { 
    display: block; 
    width: 300px; 
    height: 28px; 
    background-color: #333; 
    border-left: 5px solid #222; 
    border-right: 5px solid #222; 
    padding-left: 10px;
    text-decoration: none; color: #bfe1f1; 
}
#menu6 ul li a:hover { 
    -moz-transform: rotate(-5deg); 
    -moz-box-shadow: 10px 10px 20px #000000;
    -webkit-transform: rotate(-5deg); 
    -webkit-box-shadow: 10px 10px 20px #000000;
    transform: rotate(-5deg); 
    box-shadow: 10px 10px 20px #000000; 
}

Mam nadzieję, że te porady okażą się Tobie przydatne.
Demo z tego artykułu jest tutaj: Efektowne listy