Rozdział III Menu na stronie:
Witam was w trzecim rozdziale mojego poradnika HTML/CSS dziś opowiem wam
trochę o menu strony. Jak pewnie zauważyliście błądząc po czeluściach stron
internetowych stykamy się zazwyczaj z dwoma rodzajami menu:
- Poziomym
- pionowym
Ja osobiście wolę menu poziome gdyż jest ono wygodniejsze dla mojego
wzroku i według mnie ładniej wygląda tak więc od niego zacznę a następnie
przejdę do menu pionowego. Ale wybór menu na swoją stronę pozostawiam
oczywiście wam drodzy czytelnicy.
·
Menu
poziome:
Tak więc menu to nic innego jak hyperlinki które pozwalają nam przenosić
się pomiędzy podstronami naszego serwisu.
Nasze przykładowe menu będzie zawierało:
- listę hyperlinków które będą funkcjonowały u nas na stronie. (możecie
dodawać ich o wiele więcej jeśli tylko potrzebujecie.
- osobny plik menu.css
Najpierw tworzymy listę linków które będą nam potrzebne do stworzenia
menu. Zamkniemy ją w div-ie o nazwie menu. Tak dla łatwiejszego zapamiętania.
<div id="menu">
<a href="index.html">Strona Główna</a>
<a href="omnie.html">O mnie</a>
<a href="kontakt.html">Kontakt</a>
</div>
Następnie będzie nam potrzeby plik o nazwie menu.css do którego wstawimy
następujące linie kodu.
body{ background:#ffffff; margin:0px;
}
#menu { padding: 24px; border:#999
1px dashed; }
#menu > a{
font-family:Arial, Helvetica,
sans-serif;
font-size:17px;
background: #aaa;
padding: 12px 24px;
color:#ffffff;
margin-right: 10px;
text-decoration:none;
border-radius: 3px;
}
#menu > a:hover{
background: #666666;
color:#FFF;
}
Teraz pewnie stukacie się w głowę dlaczego mi to nie działa lub oszukałeś
nas.
Otóż nie, ponieważ nie wstawiliście linijki kodu do dokumentu HTML tak
samo jak wstawialiście kod do dokumentu style.CSS
Tak wiec po wklejeniu tej linijki kodu wszystko powinno grać:
<link
rel="Stylesheet" type="text/css" href="menu.css"
/>.
Po rozwianiu waszych wątpliwości mam nadzieję. Pora na zrozumienie tego,
co wkleiłem wam, jako przykład otóż:
3 pierwsze wiersze, jakie wkleiłem do naszej lekcji to same suche,
brzydkie linki. Z tagami <a href=”…”>…</a> Ale jeśli ktoś takie
lubi to w porządku nie musi się więcej uczyć.
W pliku menu.css dodałem natomiast:
- background, czyli tło dla waszego MENU
-następny jest div, który zamieściliśmy czyli menu
- w divie zamieściłem to wszystko co urozmaica naszą stronkę tzn. tło dla
naszego buttona charakterystyka czcionki jej wielkość, kolor, margines z prawej
strony, oraz kąt ramki aby zaokrąglić nasz buton.
Aha i wyjaśnie wam
jeszcze jedno otóż #menu> a:hover
To jest div z właściwościami naszego menu gdy najedziemy na niego
kursorem. Tu ustawiłem kolor tła oraz kolor dla tekstu.
·
Teraz
przyszedł czas na pionowe menu:
Menu pionowe robimy w bardzo podobny sposób a mianowicie.
<div class="optionL" ><a href="index.html"
class="tilelink">Strona Główna</a></div>
<div class="optionL"><a href="oferta.html"
class="tilelink">Oferta </a></div>
<div class="optionL"><a href="info.html"
class="tilelink">Informacje o nas</a></div>
</div>
I znów mamy suche linki html. Pora poddać je transformacji. I przemienić
w ładne menu.
.optionL{
font-size: 17px;
height: 25px;
padding: 8px;
border-bottom: 2px dotted #ffbb00;
}
.optionL:hover{
background-color: #0000ff;
color: white;
cursor: pointer;
}
Podsumowanie rozdziału III:
Czego nauczyliśmy się w tym rozdziale:
- tworzyć menu poziome
- tworzyć menu pionowe
- nauczyliśmy się załączać plik menu.css do linków
Brak komentarzy:
Prześlij komentarz