MacOS style horizontal nav

Post by

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>

 

Comments (2)

  1. Fatih Güldibi 11 Şubat 2016

    Ç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. Ali 11 Şubat 2016

      Kullandiginiz tarayicidan kaynakli olarak calismiyor olabilir belki.

Leave a comment