search check home clock-o tag tags chevron-left chevron-right chevron-up chevron-down twitter facebook github rss comment comments terminal code

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

[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

  1. Jeden
  2. Dwa
  3. Trzy

Lista nieuporządkowana

  • Jeden
  • Dwa
  • Trzy

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

Menu nawigacyjne

Lista #1 - 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

Lista #2 - 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

Lista #4 - 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

Lista #4 - 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

Lista #5 - 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

Lista #6 - Menu z rotacją 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

  • Kamil

    Niestety menu wykorzystujące CSS3, nawet jako element propagujący nowe przeglądarki nie do końca się nadaje. Nie dość że wymaga trzech wpisów w CSS każdy dla innego silnika, to oprócz IE nie działa w operze 10.10 MacOS (na O10.5 beta nie sprawdzałem)

  • jeśli chodzi o CSS3, to jest to w dalszym ciągu wersja rozwojowa. Bardzo zaawansowana, ale jeszcze nie jest w wersji finalnej.
    Uważam, ze warto znać już teraz CSS3 i tworzyć dodatkowe efekty na stronie. Dzięki temu, możemy w jakiś niewielki sposób skłonić użytkownika do zmiany przeglądarki na nowszą.
    Jednak trzeba pamiętać, by nie przesadzać z efektami w CSS3 bo właśnie w starszych przeglądarkach strona może brzydko wyglądać, a to odstrasza użytkowników.