Websiteniz için çok hoş ve kullanışlı bir Css3 üst menü örneği. Demonate tarafından hazırlanmış olan bu Css3 üst menü örneğini dilerseniz sitenizin alt bölümünde de kullanabilirsiniz. Görüntü olarak gayet güzel tasarlanmış olan bu Css3 menü örneğinde Google web fontları ve Font Awesome kullanılmıştır. Herhangi bir resim eki bulunmuyor.
Mouse ile menü linklerinin üzerine geldiğiniz ana Font Awesome ikonları yavaşça renk değiştiriyor, link arkaplanıda aynı şekilde renk değiştiriyor ve link başlığı açıklaması ile beraber yavaşça sol tarafa doğru kayıyor. Dikkat çekici bu özellik menüye çok farklı bir görünüm kazandırmış. Her ne kadar sayfada fazla yer kapladıkları için kalın menü taraftarı olmasamda bana göre kullanılmaya değer gibi görünüyor. Dileyenler kendi zevkine göre düzeltebilirler tabi. Bide menü rengi maviden laciverte dönüşüyor. Kendi sitenizin rengine uyarlamanız için biraz renk kodları ile uğraşmanız gerek.
Kullanım
- Head etiketleri arasına eklemeniz gereken bölümler.
Font Awesome kodu :
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
Css :
@import url(http://fonts.googleapis.com/css?family=Cuprum:400,700); /** Tutorial https://www.mintik.com/?p=13620 **/ body { padding: 0px; margin: 0px; background: #000811; } .mainmenu { color: #ccc; font-size: 16px; font-family: 'Cuprum', Georgia, "Times New Roman", Times, Serif; background: #002244; width: 100%; height: 51px; border: 1px solid #026; border-bottom: 3px solid #012; text-shadow: 0 1px 0 #000;} .mainmenu ul {margin: 0; padding: 0; } .mainmenu li i { position: absolute; margin-left: -35px; margin-top: 6px; color: #012; text-shadow: 0 1px 0 #036;} .mainmenu li { float: left; display: block; padding: 10px 10px 10px 50px; border-right: 1px solid #012; cursor: pointer; min-width: 100px; max-width: 100px; } .mainmenu li:hover { background: #012; } .mainmenu li:hover i {color: #036; text-shadow: 0 1px 0 #000;} .mainmenu li main {font-weight: 700; margin-top: -18px; } .mainmenu li desc { position: relative; float: left; font-size: 11px; color: #888; } .mainmenu li, .mainmenu li i, .mainmenu li main, .mainmenu li desc { -moz-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out;} .mainmenu li:hover main { margin-left: 10px; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out;} .mainmenu li:hover desc { margin-left: 30px; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out;}
- Body etiketleri arasına eklemeniz gereken bölüm.
Html :
<div class="mainmenu"> <ul> <li><i class="icon-home icon-large"><a href="https://www.mintik.com/?p=13620"></i> <main> Home</main><desc>sweet home ...</desc></a></li> <li><i class="icon-comments icon-large"><a href="https://www.mintik.com"></i> <main> Blog</main><desc>What they say</desc></a></li> <li><i class="icon-tint icon-large"><a href="https://www.mintik.com/category/webmaster/"></i> <main>Contact</main><desc>drop a line ...</desc></a></li> </ul> </div>
‘a href=”www.google.com” ‘ href alanını boyle doldurursan googleye gider anlatabildim mi ?
Merhabalar . Menüde ki target= ( hedef kısmı) nı nasıl değiştirebilirim Örnek veriyorum Home tıklandığında aynı pencerede açması yeni sekmede açması vs. Umarım demek istediğimi anlamışsınızdır 🙂 Teşekkürler cevaplarını sabırsızlıkla bekliyorum 😉