wtorek,
Menu strony
Jeśli zastanowić się czym jest menu pod względem semantycznym w HTML, można dojść do wniosku, że to lista odnośników. Idąc tym torem, zdecydowana większość profesjonalnych twórców stron internetowych do budowy menu strony wykorzystuje listy HTML.
Materiał ma charakter powtórkowy i nie znajdziesz w nim informacji dla początkujących, np. jak stosować selektory CSS, szczegółowego omówienia własności itd.
Początkowo menu wygląda mało efektownie, ale taka struktura ma kilka zalet. Wygląd można zmienić za pomocą stylów CSS. Zastosowana struktura uprości ich dołączanie.
Kod HTML dla menu ze wszystkich przykładów
<ul id="art-menu-s">
<li><a href="#art-menu">Start</a></li>
<li><a href="#art-menu">O firmie</a></li>
<li><a href="#art-menu">Realizacje</a></li>
<li><a href="#art-menu">Oferta</a></li>
<li><a href="#art-menu">Kontakt</a></li>
</ul>
Pierwsza wersja menu to układ wertykalny.
Style CSS dla układu werykalnego
#art-menu li, ul#art-menu {
list-style-type:none;
padding:0;
margin:0;
}
#art-menu a{
display:block;
padding:10px 20px;
text-decoration:none;
background: #a00;
color:#fff;
font:1.2em sans-serif;
border:solid 1px #fff;
}
#art-menu a:hover {
background: #000;
}
ul#art-menu {
width:200px;
margin:30px 0;
}
Elementy <ul> oraz <li> w pierwszych wierszach otrzymały deklarację CSS, która pozbawia ich marginesów (margin) i wypełnienia (padding) oraz początkowego znaku listy (list-style-type:none;). Elementy <a> zdefiniowano jako blokowe (display:block) o określonym obramowaniu (border) oraz takich własnościach jak kolor tła (background), brak podkreślenia (text-decoration:none), dopełnienie (padding), kolor (color), krój i rozmiar czcionki (font). Dodatkowo po najechaniu myszą (pseudoklasa :hover) zmienia się ich tło. Element <ul> otrzymał marginesy (margin), aby lepiej skomponować się z resztą strony. Ma on także określoną szerokość (width), czym ogranicza znajdujące się w nim elementy.
Transformacja prezentowanego menu na układ horyzontalny wymaga wprowadzenia jedynie kilku zmian. Elementy <li> otrzymały własność „display: inline” co ustawia je w jednej linii. Element <ul> nie może mieć ograniczonej szerokości, dlatego usunięto własność width. Elementy <a> otrzymały „float: left”, dzięki czemu będą układały się obok siebie. Aby zmusić <ul> do otoczenia pływających (float) w nim elementów zastosowano własność „overflow: auto”.
Style CSS dla układu horyzontalnego
#art-menu li, ul#art-menu {
list-style-type:none;
padding:0;
margin:0;
}
#art-menu a{
display:block;
padding:10px 20px;
text-decoration:none;
background: #a00;
color:#fff;
font:1.2em sans-serif;
border:solid 1px #fff;
}
#art-menu a:hover {
background: #000;
}
ul#art-menu {
margin:30px 0;
overflow:auto;
}
#art-menu li {
display:inline;
}
#art-menu a {
float:left;
}
