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!
|
