Menu CSS -skalowalna nawigacja.

Tutoriale

Każdy z nas wie jak bardzo ważna jest nawigacja na stronie internetowej. To ona decyduje o dostępnie do poszczegółnych podstron naszej witryny przez internauty. W tutorialu chciałbym przedstawić prostą skuteczną nawigację dla naszej strony głównej. Nawigacja będzie posiadała zakładki menu dla każdej z podstron.

Kod HTML naszej nawigacji

Nasze skalowalne menu będzie składało się z list ul oraz pozycji tej listy li. Dobranie tych znaczników zwiększy dostępność naszej witryny. Menu takie jest bardzo dobze czytane przez czytniki stron internetowych dla niewidomych lub nie dowidzących. Oto kod menu

<ul id="nav">
  <li><a title="Introduction" href="#">Introduction</a></li>
  <li><a title="News" href="#">News</a></li>
  <li><a title="About" href="#">About</a></li>
  <li><a title="Contact" href="#">Contact</a></li>
</ul>

Wykorzystanie efektu zmiany tła.

Chcemy aby po najechaniu na pozycję naszego menu zmieniło sie tło pozycji. W tym celu wykorzystamy dwa obrazki dla tła. Jeden obrazek będzie tłem dla pozycji nie aktywnej (nie wskazanej myszką), drugi dla pozycji aktywnej (wskazanej przez myszkę). Oto obrazki tła:

Tło nie aktywne:
Tło aktywne:

Style CSS dla naszego menu

Aby nasze menu wyświetlało się w uładzie horyzontalnym znacznikom ul i li musimy nadać atrybut float wartość left.

Oto reszta styli potrzebych dla menu

#nav {
	  width:600px;
	  float:left;
	  margin:0;
	  padding:10px 0 0 46px;
	  list-style:none;
	  background: #ffcb2d;
	  }
#nav li{
	  float:left;
	  margin:0;
	  padding:0;
	  font-size:55%;
}
#nav a{
	  float:left;
	  display:block;
	  margin:0 1px 0 0;
	  padding:5px 8px;
	  color:#333;
	  text-decoration:none;
	  border:1px solid #9b8748;
	  border-bottom:none;
	  background:#f9e9a9 url(normal.gif) repeat-x top left;
}
#nav a:hover{
	  color:#333;
	  padding-bottom:5px;
	  border-color:#727377;
	  background:#fff url(active.gif) repeat-x top left;
}

Gotowy efekt skalowalnego menu.

Tutoriale