MacOS style horizontal nav

Michael Hue tarafından hazırlanmış  olan Css Dock menü.  Görüntü ve  animasyon olarak  Mac OS  işletim sistemindeki menü taklit edilmiş. Animasyon, icon yansıması, butonlarda açılan tooltip  açıklaması bu menüden eksik edilmemiş. Menü olarak olabilmesi gereken her şeyi  eklemiş  tasarımcı  arkadaş. Gayet  güzelde  duruyor.

Kurulum:

• Head etiketleri  arasına  eklenecek  bölüm.

Css ve  font  dosyaların url  aresleri:

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:regular,bold&amp;v1" />
<link rel="stylesheet" href="css/example.css" />
<link rel="stylesheet" href="../source/dock.css" />

• Body etiketleri arasına  eklenecek  bölüm:

Html :

<div class="wrapper">
		<div class="example">
			<h1>CSS Dock <em>V2</em></h1>
			<!-- Begin: CSS Dock Code -->
			<div class="dock">
				<ul>
					<li id="mail">
						<a href="#mail">
							<em><span>Mail</span></em>
							<img src="images/icon-mail.png" alt="Mail" />
						</a>
					</li>
					<li id="ical">
						<a href="#ical">
							<em><span>iCal</span></em>
							<img src="images/icon-ical.png" alt="iCal" />
						</a>
					</li>
					<li id="addressbook">
						<a href="#addressbook">
							<em><span>Address Book</span></em>
							<img src="images/icon-addressbook.png" alt="Address Book" />
						</a>
					</li>
					<li id="iphoto">
						<a href="#iphoto">
							<em><span>iPhoto</span></em>
							<img src="images/icon-iphoto.png" alt="iPhoto" />
						</a>
					</li>
					<li id="idisk">
						<a href="#idisk">
							<em><span>iDisk</span></em>
							<img src="images/icon-idisk.png" alt="iDisk" />
						</a>
					</li>
				</ul>
			</div>