Proste menu z użyciem CSS

autor: Mateusz Pilszek, ostatnia modyfikacja: 2007-04-14

szukaj: menu nawigacja listy css

Stworzymy proste menu, którego wygląd zostanie określony za pomocą języka CSS. Będzie ono zajmowało całą szerokość okna przeglądarki, a w jednej linii umieścimy wiele pozycji. Efekt końcowy będzie podobny do poniższego:

W dowolnym miejscu (w obrębie sekcji body) wstawiamy następujący kod:

<ul id="menu">
	<li><a href="link1.html">Pozycja 1</a></li>
	<li><a href="link2.html">Pozycja 2</a></li>
	<li><a href="link3.html">Pozycja 3</a></li>
	<li><a href="link4.html">Pozycja 4</a></li>
</ul>

Teraz zdefiniujemy wygląd menu. Tworzymy nowy plik o nazwie menu.css i zapisujemy go w katalogu, w którym znajduje się nasza strona. Następnie do sekcji head dołączamy poniższy kod:

<link rel="Stylesheet" href="menu.css" type="text/css" />

Na początku definiujemy wygląd głównego elementu (ul). Dopisujemy następujący kod do pliku menu.css:

#menu {
	background-color: #ddd;
	border-width: 1px 0;
	border-style: solid;
	border-color: gray;
	padding: 3px 5%;
	margin: 0;
}

Za pomocą cechy background-color określiliśmy tło (jasnoszare). Elementy border stworzyły szare, jednopikselowe obramowanie. Właściwość padding dodała trochę wolnej przestrzeni pomiędzy obramowaniem a zawartością menu. Ostatnia cecha – margin zlikwidowała wcięcie, jakie przeglądarka Internet Explorer tworzy dla list.

Teraz ustalimy wygląd dla znaczników <li>:

#menu li {
	display: inline;
	border-right: 1px solid gray;
	padding: 0 10px;
}

Właściwość display ustawiona na wartość inline wymusiła, aby wszystkie elementy listy znalazły się w jednej linii.

Za pomocą następującego kodu zlikwidujemy podkreślenie linków i ustawimy ich kolor:

#menu a {
	color: #666;
	font: bold 0.8em Arial, sans-serif;
	text-decoration: none;
}

Jeżeli chcesz, aby linki w menu zmieniały kolor po najechaniu na nie kursorem, możesz dodać poniższy kod:

#menu a:hover {
	color: #333;
}

Mateusz Pilszek

szukaj: menu menu nawigacja listy listy css css

Osoby czytające tę publikację przeglądały również:

Chcesz zostać programistą?

Poznaj 6 kroków do efektywnej
nauki programowania!