Inne podejście do menu

autor: Patryk 'yarpo' Jar, ostatnia modyfikacja: 2007-10-16

szukaj: nawigacja menu listy kurs css

Już raz na tym kursie tematem przewodnim były hiperłącza - teraz jednak poznasz nowe - bardzo ciekawe efekty, a także najnowsze sposoby na tworzenie list nawigacyjnych. Zobaczmy przykłady:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<title>Tytuł strony</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>

<div id="prawa"></div>
<div id="lewa">
<h2>_menu:</h2>
<ul>
<li><a href="a.htm">HOME</a></li>
<li><a href="a.htm">Spis treści</a></li>
<li><a href="a.htm">Nowości</a></li>
<li><a href="a.htm">Kontakt</a></li>
</ul>
</div>
<div id="srodek">
<ul>
<li><a href="a.htm">HOME</a></li>
<li><a href="a.htm">Spis treści</a></li>
<li><a href="a.htm">Nowości</a></li>
<li><a href="a.htm">Kontakt</a></li>
</ul>
</div>

</body>
</html>

Opis:

1 - do warstwy 'lewa' wstawiam nagłówek drugiego stopnia <h2>, a także listę. Każda pozycja tej listy to kolejna pozycja naszego menu.
2 - w warstwie 'srodek' także wstawiłem identyczną listę. Wydawałoby się, że muszą wyglądać tak samo... Poczekajmy na kod CSS:-)

Plik CSS:

body { margin: 5px; padding: 5px; background-color: black; }
div { padding: 5px; margin: 0; border: 1px solid white; vertical-align: top; background-color: gray; }
div#lewa { float: left; width: 200px; }
div#prawa { float: right; width: 180px; }
div#srodek{ margin: 0 191px 0 220px; }

div#lewa h2 {
background-color: silver;
letter-spacing: 0.5em;       // 6
margin: 0 0 2px 0;
padding: 5px;
font-weight: bold;
font-size: 13px;
font-family: verdana;
border: 1px solid black;}

div#lewa ul {               // 1
padding: 0;                 // 2
margin: 0;                  //
width: 150px;               //
list-style-type: none;      //
font-weight: bold;          //
font-size: 12px;            //
font-family: verdana; }     // 2

div#lewa ul li {             // 3
margin: 0 0 2px 0;           //
border: 1px solid black;     //
background-color: silver; }  // 3

div#lewa ul a {              // 4
display: block;              //
color: black;                //
padding: 5px 15px 5px 15px;  //
text-decoration: none; }     // 4

div#lewa ul a:hover {           // 5
color: gray;                    //
background-color: #cdcdcd;      //
background-image: url(1.gif);   //
background-position: 120px 50%; //
background-repeat: no-repeat; } // 5

Opis:

1 - jest to dla Ciebie coś nowego. Zamiast tworzyć klasy, opisuję położenie danego obiektu. Ta reguła jest ważna dla wszystkich ul [list], które są zawarte w warstwie 'lewa'. Liczba selektorów może być większa, np. 'div#cd table tr td p' - w tym wypadku opisywane byłyby właściwości <p>.
2 - reguła dla ul w 'lewa': odległości na 0, szerokość 150px, brak wypunktowania listy, czcionka pogrubiona, rozmiar 12px, rodzaj verdana.
3 - reguła dla li znajdującego się w ul w 'lewa': marginesy (dól 2px, reszta 0), obramowanie 1px, tło siwe.
4 - reguła dla hiperłącza w liście w 'lewa': wyświetlane jako element blokowy, czarną czcionką, padding 5px góra i dół, 15px lewa i prawa; bez dekoracji.

5 - reguła dla hiperłączy najechanych: tekst szary, kolor tła jasny siwy, wczytaj grafikę w tło, umieść ją 120px od lewej granicy <a> i 50% wysokości, wyświetl tylko raz - nie powtarzaj [domyślnie tło się powtarza]. Jest to bardzo ciekawy efekt - po najechaniu w tle pojawia się grafika - wcześniej jej tam nie było. Grafikę możesz pobrać tu.
6 - odległość między literami w wyrazie. Ustawiona na 0.5em.

W taki oto sposób mamy opisane lewe menu. Ale w kodzie mamy jeszcze raz cos podobnego - tylko w innej warstwie, a nasze opisy nie będą działać na listę z warstwy 'lewa'. Trzeba więc dodać trochę kodu:

Uzupełnij plik css:

body { margin: 5px; padding: 5px; background-color: black; }
div { padding: 5px; margin: 0; border: 1px solid white; vertical-align: top; background-color: gray; }
div#lewa { float: left; width: 200px; }
div#prawa { float: right; width: 180px; }
div#srodek{ margin: 0 191px 0 220px; }

div#lewa h2, div#lewa ul li { // 1
margin: 0 0 2px 0;
border: 1px solid black;
background-color: silver;}

div#lewa h2 { // 2
letter-spacing: 0.5em;
padding: 5px;
font: bold 13px verdana; } // 3

div#lewa ul, div#srodek ul { // 4
padding: 0;
margin: 0;
list-style-type: none;
font: bold 12px verdana; }

div#lewa ul { // 5
width: 150px; }

div#lewa ul a {
display: block;
color: black;
padding: 5px 15px;
text-decoration: none; }

div#lewa ul a:hover, div#srodek ul a:hover {
color: gray;
background-color: #cdcdcd; }

div#lewa ul a:hover {
background-image: url(1.gif);
background-position: 120px 50%;
background-repeat: no-repeat; }

div#srodek ul li {
background-color: #cdcdcd;
border: 1px solid black;
display: inline; } // 6

div#srodek ul a { // 7
color: black;
padding: 0px 15px 1px 15px;
text-decoration: none; }

Opis:

1 - jednocześnie opisuje właściwości dla dwóch elementów. elementów tych może być znacznie więcej np. 'p, h1, h2, u, ul { } '. Każdy kolejny element należy wpisać po przecinku. Pozwala to zaoszczędzić kilka linijek kodu - warto skorzystać:-).
2 - ponieważ h2 miał tylko 3 właściwości zbieżne z li w nowej regule wpisuję te właściwości - często stosowany zabieg. Pamiętaj, że ani li od h2 ani odwrotnie nie przejmuje jego właściwości domyślnych czy opisanych gdzie indziej.

3 - teraz bardzo ciekawy skrót. Zastępuje on: font-weight; font-size; font-family'. Więcej na ten temat w lekcji Skrótowy zapis właściwości
4 - kolejna reguła dla dwóch elementów na raz. Właściwości można by ją zastąpić regułą dla samego <ul>, ale to mogłoby Cię lekko zbić z tropu.
5 - ponieważ tylko ul z 'lewa' miało określoną szerokość wyrzuciłem tą właściwość do osobnej reguły.
6 - w opisie pozycji listy [li] z 'srodek' zmieniłem z domyślego 'display: list-item' na 'inline', czyli w lini. dzięki temu z listy pionowej wyjdzie ładna lista pozioma - to menu będzie ułożone w poziomie...
7 - ...dlatego z opisu hiperłączy musiałem wyrzucić 'display: block'

Jeśli już wszystko pozapisywałeś i włączyłeś tą stronę zapewne widzisz, że na środku jakby brakuje treści, a po prawej w ogóle jej nie ma... To sie zmieni już na następnej lekcji. Zapraszam dalej!

Patryk 'yarpo' Jar

szukaj: nawigacja menu menu listy listy kurs css

Zagadnienia poruszane w tej części kursu:

Chcesz zostać programistą?

Poznaj 6 kroków do efektywnej
nauki programowania!