[web] CSS - poziome menu za pomocą listy...

[Insane]

Na forum nie ma jeszcze tutka o CSSie i poziomym menu więc zrobię pierwszy :)

Efektem będzie takie menu:

http://www.pececik.net/~ftp/faq/menu_css/donejb5.gif

Jak uzyskać takie menu ?
Wpierw należy przygotować dwa obrazki na efekt :hover i normalny...

2 Przykładowe...

Normal:
http://www.pececik.net/~ftp/faq/menu_css/normalstatebq2.gif
Hover:
http://www.pececik.net/~ftp/faq/menu_css/hoverstatemp6.gif

To zaczynamy od napisania kodu HTML:


<ul id="menu">
Home (#)
About (#)
Forum (#)
Tutorials (#)
Mail us (#)
[/list]


Czyli zwykłej listy...

Teraz objaśnienie kodu CSS:
dla UL z id="menu"


#menu {
list-style: none;
margin: 0;
padding: 0;
float:left;
font: bold 12px Tahoma;
}


Usuwamy wypunktowanie i marginesy, dodajemy atrybut żeby lista przylegała do lewej strony, można ustawic tez right i center a za background-image: dać obrazek z normal state i bedzie lista wycentrowana na całą szerokość. Oczywiście ustalamy też czcionkę i przechodzimy do LI.


#menu li {
display: inline;
}


Wyświetlamy w poziomie...
Czas na "a" i "a:hover"

dla mniej obeznanych "a" hiperłącze, a:hover - hiperłącze aktualnie "najechane" myszą :) Czyli rollover

A

#menu li a {
float: left;
color: #517F82;
text-decoration: none;
padding: 12px 9px;
background-image: url(normal-state.gif);
border-left: 1px solid #ADCED0;
border-right: 1px solid #8BACAE;
border-top: 5px solid #A5C6C8;
}


Znów przylega do lewej, usuwamy podkreślenie z hiperłącza ustawiamy padding 12px- gora dol, 9px- lewo prawo, Nasz obrazek ma 40px wysokości więc trzeba obliczyć żeby nie było błędów w wysokości: czcionka 12px+2x padding 12px = 36px, mamy spokojnie 4px przestrzeni. Dodajemy obrazek tła... lewa i prawe obramowanie oraz górne...

Teraz efekt najechania myszką...
A:hover


#menu li a:hover {
color: #517F82;
background-image: url(hover-state.gif);
border-top: 5px solid #B7B294;
}


Kolor czcionki pozostaje ten sam, zmieniamy tylko obraz tła i górny border

Cały kod wygląda tak:

CSS:

#menu {
list-style: none;
margin: 0;
padding: 0;
float:left;
font: bold 12px Tahoma;
}
#menu li {
display: inline;
}
#menu li a {
float: left;
color: #517F82;
text-decoration: none;
padding: 12px 9px;
background-image: url(normal-state.gif);
border-left: 1px solid #ADCED0;
border-right: 1px solid #8BACAE;
border-top: 5px solid #A5C6C8;
}
#menu li a:hover {
color: #517F82;
background-image: url(hover-state.gif);
border-top: 5px solid #B7B294;
}


HTML:

<ul id="menu">
Home (#)
About (#)
Forum (#)
Tutorials (#)
Mail us (#)
[/list]