Centrum Kształcenia Zawodowego i Ustawicznego w Mrągowie

E14 - CSS: Menu strony

środa,

E14 - CSS: 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;
}
Kampania wrześniowa
Jan Stefan Witkowski

Jan Stefan Witkowski

nVidia GeForce 20

nVidia GeForce 20

1 Samodzielna Kompania Commando

1 Samodzielna Kompania Commando

Potop szwedzki

Potop szwedzki

Bitwa pod Nowym Dworem

Bitwa pod Nowym Dworem

Bitwa nad Niemnem

Bitwa nad Niemnem

Nasze technikum

Szkoły dla dorosłych

Pełna oferta edukacyjna