webmaster webmastering webdesign

Jesteś tutaj: webmade.org >> porady >> xhtml + html + css

Proste menu z użyciem CSS

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

szukaj: menu menu nawigacja nawigacja listy listy css 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:

menu css

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

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

Chcesz zaistnieć w sieci?
Tworzenie stron www.
Zobacz nasze realizacje!

 

valid XHTML
valid CSS
© 2004-2008 copyright by webmade.org