MacOS style horizontal nav

MacOS

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>

 

Ali

You may also like

Comments

  1. Çalışmıyor,Güncel yapımı gelırse performans ödevımde kullanacağım teşekkürler yayın için 5yıldız verdim..

    1. Kullandiginiz tarayicidan kaynakli olarak calismiyor olabilir belki.

Leave a reply

E-posta hesabınız yayımlanmayacak.