Menu z nagłówkami

W jaki sposób wykonać menu nawigacyjne z nagłówkami (tytułami działów) na liście definicyjnej (słownik)?

Choć wykonanie menu w oparciu o listę daje naprawdę duże możliwości, to powstaje mały problem, jeśli przed blokiem ma się wyświetlić nagłówek w formie tytułu działu. Istnieje inny element, który zapewnia taki podział pozycji - lista definicyjna (słownik). Specyfikacja HTML 4.01 podaje alternatywne zastosowania tego znacznika - np. do przedstawiania dialogu. Można zatem przyjąć, że lista definicyjna reprezentuje pozycje połączone ze sobą w taki sposób, że zawartość <dd>...</dd> stanowi rozwinięcie (uszczegółowienie) <dt>...</dt>, przy czym jedna pozycja może być połączona z dowolną liczbą innych pozycji. Z taką sytuacją mamy właśnie do czynienia w przypadku menu nawigacyjnego z nagłówkami: odnośniki, zawarte w znacznikach <dd>...</dd>, stanowią rozwinięcie krótkiego nagłówka, zapisanego wewnątrz <dt>...</dt> - taki kod również jest poprawny semantycznie:

<dl>
<dt>CSS</dt>
<dd><a href="czcionki.html">Czcionki</a></dd>
<dd><a href="tekst.html">Tekst</a></dd>
<dd><a href="tlo.html">Tło</a></dd>
<dd><a href="marginesy.html">Marginesy</a></dd>
<dd><a href="obramowanie.html">Obramowanie</a></dd>
</dl>

Efekt bez stylizacji:

CSS: Czcionki; Tekst; Tło; Marginesy; Obramowanie

Oczywiście takie menu może zawierać więcej niż jeden nagłówek.

Aby mieć możliwość swobodnego stylizowania, usuwamy domyślne formatowanie listy:

dl, dt, dd {
	display: block;
	margin: 0;
	padding: 0;
}

W efekcie uzyskamy:

CSS: Czcionki; Tekst; Tło; Marginesy; Obramowanie

CSS: Czcionki; Tekst; Tło; Marginesy; Obramowanie

dl, dt, dd {
	display: block;
	margin: 0;
	padding: 0;
}

dl {
	width: 200px;
}

dt {
	background-color: #ccc;
	color: #000;
	padding: 7px;
	font-weight: bold;
	font-size: larger;
	text-align: center;
}

dl a:link, dl a:visited {
	display: block;
	width: 186px;
	text-decoration: none;
	background-color: #ccc;
	color: #000;
	padding: 5px;
	border: 2px outset #ccc;
}

dl a:hover {
	border-style: inset;
	padding: 7px 3px 3px 7px;
}

CSS: Czcionki; Tekst; Tło; Marginesy; Obramowanie

dl, dt, dd {
	display: block;
	margin: 0;
	padding: 0;
}

dl {
	width: 200px;
	padding: 1px 2px;
	background-color: #9ce;
	border: 3px double #28e;
}

dt {
	padding: 7px 15px;
	font-weight: bold;
	font-size: larger;
	background-color: #25b;
	color: #9ce;
	text-align: right;
	border-right: 20px solid #26d;
	margin-top: 1px;
}

dd {
	border-top: 1px solid #9ce;
}

dl a:link, dl a:visited {
	display: block;
	width: 176px;
	text-decoration: none;
	padding: 7px;
	font-weight: bold;
	background-color: #27c;
	color: #def;
	border-left: 10px solid #25b;
}

dl a:hover {
	width: 166px;
	background-color: #28e;
	color: #fff;
	border-left: 20px solid #26d;
}

CSS: Czcionki; Tekst; Tło; Marginesy; Obramowanie

dl, dt, dd {
	display: block;
	margin: 0;
	padding: 0;
}

dt {
	width: 180px;
	padding: 5px 10px;
	font-weight: bold;
	font-size: larger;
	text-align: center;
	background: #797 url("tlo2.gif") repeat-x top;
	color: #eff;
	border-width: 1px;
	border-style: solid;
	border-color: #dfe #365 #365 #dfe;
}

dd {
	width: 190px;
	padding-left: 10px;
	background: #797 url("punkt.gif") no-repeat left top;
	border-width: 1px;
	border-style: solid;
	border-color: #dfe #365 #365 #dfe;
}

dl a:link, dl a:visited {
	display: block;
	width: 169px;
	text-decoration: none;
	padding: 5px 10px;
	font-weight: bold;
	background: #bfb url("tlo.gif") repeat-x top;
	color: #365;
	border-left: 1px solid #797;
}

dl a:hover {
	background-color: #797;
	background-image: url("tlo2.gif");
	color: #eff;
}

Wymagane grafiki (punkt.gif, tlo.gif, tlo2.gif) w powiększeniu:

Komentarze

Zobacz więcej komentarzy