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ł: Intel Core i9

Intel Core i9

Artykuł: Święto Lotnictwa Polskiego

Święto Lotnictwa Polskiego

Artykuł: Utworzenie Marynarki Wojennej

Utworzenie Marynarki Wojennej

Artykuł: Dzień, w którym słońce zaszło w&nbsp;południe

Dzień, w którym słońce zaszło w południe

Artykuł: GeForce 300

GeForce 300

Artykuł: Sega Dreamcast

Sega Dreamcast

Artykuł: Jacob Ziv

Jacob Ziv

Nasze technikum

Technik informatyk

Szkoły dla dorosłych

Nasza szkoła

Pełna oferta edukacyjna

Oferta szkoły