Przejdź do treści

Centrum Kształcenia Zawodowego i Ustawicznego w Mrągowie

Menu strony

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;
}

Trzy miesiące temu na naszej stronie…

Artykuł: Przebieg wojny o Falklandy

Przebieg wojny o Falklandy

Artykuł: Piotr Nowak

Piotr Nowak

Artykuł: Jan Falkowski

Jan Falkowski

Artykuł: Krystyna Wituska

Krystyna Wituska

Artykuł: Międzynarodowy Dzień Zapobiegania Narkomanii

Międzynarodowy Dzień Zapobiegania Narkomanii

Artykuł: Windows 98

Windows 98

Nasze technikum

Technik informatyk

Szkoły dla dorosłych

Nasza szkoła

Pełna oferta edukacyjna

Oferta szkoły