Skocz do zawartości
  • Przeglądający   0 użytkowników

    Brak zarejestrowanych użytkowników, przeglądających tę stronę.

wlodziu

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

Promowane odpowiedzi

wlodziu    1,201

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:



[/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:
[code] ul#menu{ font-size: 15px; margin: 0; padding: 0; width: auto; font-family: tahoma; }
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)


[/code]
CSS:
[code] ul#menu{ font-size: 15px; margin: 0; padding: 0; } ul#menu li{ display:block; float:left; width:auto; margin-left: 10px; padding:0; } ul#menu li a{ /* C */ color: #559bb7; text-decoration:none; padding: 10px; } ul#menu li a:hover{ color: red; text-decoration: underline; background: pink; }

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.

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
wlodziu    1,201

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.

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Tylko zarejestrowani użytkownicy mogą komentować zawartość tej strony.


×