Cel:

Zakładki - rozwiązanie pozwalające na zgrupowanie informacji nt. opisywanego materiału i zaprezentowanie nagłówków konkretnych kategorii. Poniżej zaprezentowane dwa style CSS - jeden przy wykorzystaniu wyłącznie CSS, drugi używa 4rech obrazków w celu uzyskania lepszego efektu.

Końcowy efekt:

• Zakładka 1
• Zakładka 2
• Zakładka 3
• Zakładka 4
• Zakładka 5

• Zakładka 1
• Zakładka 2
• Zakładka 3
• Zakładka 4
• Zakładka 5

Kod dla obu przykładów:

	<ul class="tab">
		<li><a href="#" class="active">Zakładka 1</a></li>
		<li><a href="#">Zakładka 2</a></li>
		<li><a href="#">Zakładka 3</a></li>
		<li><a href="#">Zakładka 4</a></li>
		<li><a href="#">Zakładka 5</a></li>
	</ul>
	<div class="tabContent">
		<p style="padding: 20px; margin: 0px">DIV, zawierający zawartość zakładki.</p>
	</div>
	<br />
	<ul class="tab image">
		<li><a href="#" class="active"><span>Zakładka 1</span></a></li>
		<li><a href="#"><span>Zakładka 2</span></a></li>
		<li><a href="#"><span>Zakładka 3</span></a></li>
		<li><a href="#"><span>Zakładka 4</span></a></li>
		<li><a href="#"><span>Zakładka 5</span></a></li>
	</ul>
	<div class="tabContent image">
		<p style="padding: 20px; margin: 0px">DIV, zawierający zawartość zakładki.</p>
	</div>	

Druga prezentajca różni się dodaniem elementu SPAN wewnątrz A oraz dodaniem klasy image:

<ul class="tab image">
	(...)
	<li><a href="#" class="active"><span>Zakładka 1</span></a></li>	

Style CSS dla tej strony:

ul.tab {
	margin: 0px;
	padding: 0px;
	border-bottom: 1px solid #040404;
	height: 20px;
	/* Szerokość zwiekszona o 2 px wzgl. DIV'a - szerokosc DIV'a + 2px obramowania */
	width: 502px;
}

ul.tab li {
	list-style: none;
	margin: 0px;
	padding: 0px;
	float: left;
}

/* Ogólny wygląd zakładki */
ul.tab li a {
	display: block;
	padding: 3px;
	background: #d3d3d3;
	border: 1px solid #d3d3d3;
	border-bottom: 0px;
	color: white;
	text-decoration: none;
	margin-left: 5px;
	font-size: 11px;
}

/* Wyglad nie aktywnej zakładki po najechaniu kursorem */
ul.tab li a:hover {
	border-color: red;
}

/* Wygląd aktywnej zakładki */
ul.tab li a.active:hover,
ul.tab li a.active {
	color: #040404;
	background: white;
	border: 1px solid black;
	border-bottom: 1px solid white;
}

div.tabContent {
	border: 1px solid #040404;
	border-top: 0px;
	width: 500px;
}

/* Dodatkowe style dla zakładek graficznych */
ul.tab.image {
	height: 23px;
	border-bottom: 2px solid #fada17;
	/* Zwiększamy szerokość o kolejne 2 px, ponieważ poszerzymy ramkę na DIV */
	width: 504px;
}

/* Wykorzystujemy technikę zwaną jako Sliding Doors */
ul.tab.image a {
	background: url('right.gif') no-repeat bottom right;
	border: 0px;
	padding: 0px;
}

ul.tab.image a span {
	display: block;
	padding: 7px 5px 5px 5px;
	background: url('left.gif') no-repeat bottom left;
}

ul.tab.image a.active:hover,
ul.tab.image a:hover,
ul.tab.image a.active {
	border: 0px;
	background: url('active_right.gif') no-repeat bottom right;
}

ul.tab.image a:hover span,
ul.tab.image a.active span {
	background-image: url('active_left.gif');
	color: #040404;
}

div.tabContent.image {
	border: 2px solid #fada17;
	border-top: 0px;
}	

O autorze:

Zaprezentowany powyżej skrypt / styl CSS lub inna informacja pochodzi z blogu EpicWeb.pl i powstał na podstawie przemyśleń własnych autora lub pod wpływem artykułów z innych źródeł (podane zostało wtedy ono na blogu w odpowiednim poście). Jeżeli nie zaznaczono inaczej, udostępniany jest na zasadach CC-BY-SA 2.5.

Autorem jest Bartosz "BTM" Szczeciński - programista PHP, MySQL, lubiący eksperymentować ze stylami CSS, JavaScript oraz szeroko pojętą tematyką aplikacji internetowych. Możesz skontaktować się ze mną poprzez email btm@anfo.pl lub Jabbera btm@jabber.aster.pl