üstanimasyon

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>&nbsp;<main> Home</main><desc>sweet home ...</desc></a></li>
    <li><i class="icon-comments icon-large"><a href="https://www.mintik.com"></i>&nbsp;<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>&nbsp;<main>Contact</main><desc>drop a line ...</desc></a></li>
  </ul>
</div>

 


Ali senin düşüncelerini merak ediyor. Bir yorum yaz

  1. kemal dedi ki:

    ‘a href=”www.google.com” ‘ href alanını boyle doldurursan googleye gider anlatabildim mi ?

  2. Ali dedi ki:

    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 😉