MacOS style horizontal nav

Yazar

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>

 



2 Yorumlar
  1. Fatih Güldibi 5 sene ago
    Reply

    Ç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..

    • Ali 5 sene ago
      Reply

      Kullandiginiz tarayicidan kaynakli olarak calismiyor olabilir belki.

Yorum Yap

Email adresiniz yayınlanmayacak.

Bunlar da ilgini çekebilir

Trend Konular