MacOS style horizontal nav

25Okunma
2 yorum

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
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2021-02-06 tarihinde yayınlandı,Toplam 1307 karakterden oluşmaktadır.
Yeniden yazdırma ipuçları:Özel talimatlar dışında, bu sitedeki tüm makaleler CC-4.0 sözleşmesi kapsamında yayınlanmaktadır.Yeniden basılması için lütfen kaynak belirtiniz.
Yorum yap(2 yorum)
Yükleniyor...
Fatih Güldibi Yorumcu LV.1
2016-02-11 10:13:53 回 Yanıtla

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