[RDiR] - 1 - poziome menu tekstowe z hoverem.

Witam, dziś pokażę Wam w jaki sposób stworzyć menu tekstowe, które bedzie posiadało hover.

Do tego celu użyjemy listy wyliczeniowej, czyli ul, li.

Na początku stwórzmy sobie w pliku html (u mnie index.html) prostą listę wyliczeniową z identyfikatorem "menu" (bedzie to odwołanie do selektorów w CSS) oraz z gotowymi już wierszami i odnośnikami.

U mnei wyszło coś takiego:

• Strona Główna
• O mnie
• Kontakt
• RDiR

[/code] UL - utworzenie listy, id - identyfikator listy (potrzebny jako odwołanie do CSS), li - wiersz listy W dalszym kroku utworzymy sobie w pliku CSS, w którym bedziemy definiować wygląd naszej listy, tak aby powstało menu. Na początku deklarujemy sobie znacznik ul + jego identyfikator czyli [b]ul#menu[/b]. W nim będą znajdować się główne "cechy" naszego menu, takie jak: wygląd czcionki, rozmiar, wielkość menu. Ja stworzyłem coś takiego: font-size: wielkość czionki, margin: odstępy między menu a innymi elementami nastronie, mozna ustwić np. margin-top: 10px; to nasze menu będzie znajdować się pod danym elementem z przerwą 10px. padding: jest to odtęp wewenątrz elementu (dopełnienie) czyli naszego ul. width: szerokość, ustalam automatyczną ponieważ ona bedzie się zmieniać gdy bedziemy chcieli dodać nową pozycje w menu. font-family: nazwa czcionki jakiej bedziemy uzywać w naszym menu. Dalszym krokiem bedzie zadeklarowanie "cech" naszego wyglądu wiersza. Czyli deklarujemy znacznik li w naszej liście ul z identyfikatorem, czyli ul#menu li. W nim bedziemy deklarować cehcy jakie ma posiadać każdy wiersz czyli to co znajduje się miedzy znacznikami ..., czyli odtępy miedzy pozycjami w menu itp Wyskrobałem takie coś:

ul#menu li{

	display:block; 

	float:left; 

	width:auto; 

	margin-left: 10px; 

	padding:0; 

	}

display: block; - blokujemy elementy, float: left; - nadajemy im mozliwośc pływania w elemencie, czyli pozycje będą się ustawiać jedna za drugą, gdybysmy nadali parametr none, lub usuneli całkiem wiersze byłyby jeden pod drugim. Mozna także nadać right, będą sobei pływać z prawej strony. width: auto; tu też nadajemy automatyczną szerokość, by nei zmieniać gdy np. damy "O mnie" (jest krótki) a potem "Strona Główna" jest o wiele dłuższy. Takto nam się dopasuje automatycznie do długości tekstu, (można ustawić stała wielkosć wtedy każdy wpis będzie miał taką samą wielkość) margin-left: 10px; margines, czyli odstęp miedzy pozycjami w menu. Można nadać margin: right itp. padding:0; tutaj się zachowuje tak samo jak margin, jeżeli nadaliśmy już w margin wartośc tu nie musimy. Jeżeli nadamy tu i w margin odstęp się zwiększy (suma margin i padding) Następnym krokiem bedzie ustalenie wyglądu i "cech" naszego odnosnika w każdej pozycji czyli a. Deklarujemy w naszym CSS ul#menu li a. Daczego taka kolejność? Nasz odnośnik a znajduje się w znacznikach li, a te zaś w ul z identyfikatorem "menu". W nim już dekorujemy kolor, dekoracje, "zasięg odnośnika", czyli miejsce w którym można bedzie klikać na odnośnik (domyślnie tylko tekst) Napisałem takie coś:

ul#menu li a{ 

	color: #559bb7; 

	text-decoration:none; 

	padding: 10px;

	}

color - kolor czcionki, text-decoration - domyslnie underline, czyli podkreslenie, none - brak. padding - dopełnienie, czyli zasięg naszego odnośnika od tekstu, ja dałem z każdej strony 10px, czyli bedzie pokazywać się łapka do 10px od tekstu, czyli naszego odnośnika. Menu, już działa zadowalająco, ale dla urozmaicenia dodamy hover. Hover jest to pseudoklasa, która definiuje "cechy" elementu po najechaniu na nie myszką. Stwórzmy pseudoklasę tlyko dla odnośników, czyli znacznika a, bo tlyko go bedziemy używać. ul#menu li a:hover W tym selektorze deklarujemy tylko to, co ma się zmienić i na co. Mój kod:

ul#menu li a:hover{ 

	color: red;

	text-decoration: underline;

	background: pink;

	}

Wytłumaczę tylko background, ponieważ wczesniejsze były już tłumaczone wyżej. background - jest to tło. Możemy nadać jego kolor czy też obrazek (tło obrazkowe). zasięg tła jest zależny od nadania dopełnienia w deklaracji wyżej, czyli zasięg naszego odnośnika. Myślę, że to podstawowa wiedza do wykonania prostego menu. Końcowy kod: HTML (pamiętaj także podlinkować plik CSS)

• Strona Główna
• O mnie
• Kontakt
• RDiR

[/code] CSS:

Jeżeli macie jakieś pytania, proszę kierować w tym temacie.

Jeżeli macie pomysły na poradniki, proszę pisać PW.

Wszelkie prawa zastrzeżone.

Kopiowanie bez zgody autora surowo zabronione.

Bardzo fajne i przydatne, piwko .

Można też dodać hover jako obrazek czyli zamiast colo: red dać np background-image: url(adres_obrazka);

Poradnik super.

Wszystko ładnie opisane i działa.

Brawo

Scyther, "background - jest to tło. Możemy nadać jego kolor czy też obrazek (tło obrazkowe). zasięg tła jest zależny od nadania dopełnienia w deklaracji wyżej, czyli zasięg naszego odnośnika. " czytaj to co napisałem.

C4 wl0dz!u, dzięki, porób więcej poradników. Bardzo czytelny i w ogóle.

Świetny poradnik - gratulacje!