Inne podejście do menu
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:
Kod XHTML:
<!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łowek 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 wszystkiech 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 bardzociekawy 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 nalezy 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 - czesto stosowany zabieg. Pamietaj, że ani li od h2 ani odwrotnie nie przejmuje jego właściwości domyslnych czy opisanych gdzie indziej.
3 - teraz bardzo ciekawy skrót. Zastępuje on: font-weight; font-size; font-family' . Więcej nt. skrótów w lekcj.i Skrótowy zapis właściwości
4 - kolejna reguła dla dwóch elementów na raz. Własciwoe 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 domyslego 'display: list-item' na 'inline' , czyli w lini. dzięki temu z listy pionowej wyjdzie ładna lista pozioma - to menu będzei ułożone w poziomie...
7 - ...dlatego z opisu hiperłaczy musiałem wyrzycić 'display: block'
Jeśli już wszystko pozapisywałeś i włączyłes tą stronę zapewne widzisz, że na środku jakby brakuje treści, a po prawej w ogóle jej nie ma... To sie zmieni juz na następnej lekcji. Zapraszam dalej!
|