https://instagram.com/alphazzers
   
Konuyu Oyla:
  • Toplam: 3 Oy - Ortalama: 3.33
  • 1
  • 2
  • 3
  • 4
  • 5
Sadece CSS (Animasyon) Harika bir menü
#1
Yeni bir menü ile karşınızdayım.Sadece CSS ile yapılmıştır.Çok kullanışlı ve güzeldir.Ben yapmadım menüyü.


gkG4yL.png


HTML KODLARI;

PHP Kod:
<ul id="menu">
 
   <li>
 
       <a href="http://genelforum.10tr.net/">
 
           HOME
        
</a>
 
       <span></span>
 
   </li>
 
   <li>
 
       <a href="http://genelforum.10tr.net/">
 
           ARTICLES
        
</a>
 
       <span></span>
 
   </li>
 
   <li>
 
       <a href="http://genelforum.10tr.net/">
 
           TUTORIALS
        
</a>
 
       <span></span>
 
   </li>
 
   <li>
 
       <a href="http://genelforum.10tr.net/">
 
           RESOURCES
        
</a>
 
       <span></span>
 
   </li>
 
   <li>
 
       <a href="http://genelforum.10tr.net/">
 
           SNIPPETS
        
</a>
 
       <span></span>
 
   </li>
 
   <li>
 
       <a href="http://genelforum.10tr.net/">
 
           WORDPRESS
        
</a>
 
       <span></span>
 
   </li>
 
   <li>
 
       <a href="http://genelforum.10tr.net/">
 
           INSPIRATION
        
</a>
 
       <span></span>
 
   </li>
</
ul


CSS KODLARI;

PHP Kod:
#menu, #menu ul {
 
   /* Remove bullet points and add fonts */
 
   list-stylenone;
 
   font-familyHelveticaArialsans-serif;
}
 
    
#menu li {
 
   /* Horizontal menu, not vertical. Then just a little extra positioning */
 
   floatleft;
 
   positionrelative;
 
   margin-right20px;
 
   height40px  
}
 
    
#menu li a {
 
   /* Clear up the links and position them correctly */
 
   color#000;
 
   padding0 15px;
 
   text-decorationnone;
 
   displayblock;
 
   positionrelative;
 
   height40px;
 
   padding10px 15px;
 
   font-weightbold;
 
   /* Quick animations to animate the anchor */
 
   -webkit-transitionall 0.2s ease-in;
 
   -moz-transitionall 0.2s ease-in;
 
   -ms-transitionall 0.2s ease-in;
}
 
    
     
#menu li span {
 
   /* Default width of the span (acts as border). Z-index so it appears behind the words. */
 
   width6px;
 
   z-index: -1;
 
   /* Position it absolutely so it goes where we want it to go */
 
   positionabsolute;
 
   left0;
 
   top0;
 
   height100%;
 
   /* Animation again, because both the span and the anchor will be animated */
 
   -webkit-transitionall 0.4s ease-in;
 
   -moz-transitionall 0.4s ease-in;
 
   -ms-transitionall 0.4s ease-in;


PHP Kod:
#menu li:nth-of-type(1) span { background: #c04545; }
#menu li:nth-of-type(2) span { background: #c06b45; }   
#menu li:nth-of-type(3) span { background: #88c045; }
#menu li:nth-of-type(4) span { background: #48c045; }
#menu li:nth-of-type(5) span { background: #45c0aa; }   
#menu li:nth-of-type(6) span { background: #4576c0; }
#menu li:nth-of-type(7) span { background: #7945c0; } 

PHP Kod:
#amenu li:hover > span {
 
   /*Change the width of this span to 100% */
 
   min-width100%;
}
 
#menu li a:hover {
 
   color#fff;
}
 
    
#menu li:hover {
 
   box-shadowinset 0px 0px 10px rgba(0,0,0,0.3);

Ara
Cevapla PGM
Teşekkür verenler:
#2
Sen yapmadıysan ne anlamı kalıyorki paylaşmanın bulacak olan internetten'de bulur.

Paylaşım için teşekkürler.
Ara
Cevapla PGM
Teşekkür verenler:
#3
(17-03-2015 Saat: 15:21)ufufuk Nickli Kullanıcıdan Alıntı: Sen yapmadıysan ne anlamı kalıyorki paylaşmanın bulacak olan internetten'de bulur.

Paylaşım için teşekkürler.

Dediğin doğru ama sen bulabilirmisin ? Sadece adını aratarak bulursun :) Yani sadece aramak yetmez.Ben kolayca bulunması için paylaştım.


NOT: Bu arada Hover var menüde.Üstüne gelince olacak şeyleri görün :)
Ara
Cevapla PGM
Teşekkür verenler:
#4
Bulmama gerek yok ben kendimde yaparım,kodlar biraz karışık olmuş tüm css kodlarını bir tag'da toplasan?

Tekrardan teşekkürler.
Ara
Cevapla PGM
Teşekkür verenler:
#5
(17-03-2015 Saat: 15:29)ufufuk Nickli Kullanıcıdan Alıntı: Bulmama gerek yok ben kendimde yaparım,kodlar biraz karışık olmuş tüm css kodlarını bir tag'da toplasan?

Tekrardan teşekkürler.


Sen yapabilirsin ama biz yapamıyoruz kardeşim bu yüzden paylaşmalı. @ufufuk
Ara
Cevapla PGM
Teşekkür verenler:
#6
Hemen cikismayin. Arkadas paylasmis begenmis bizde kullanalim istemis,eline koluna saglik :D
Ara
Cevapla PGM
Teşekkür verenler:
#7
(17-03-2015 Saat: 15:33)ChromeStarde Nickli Kullanıcıdan Alıntı:
(17-03-2015 Saat: 15:29)ufufuk Nickli Kullanıcıdan Alıntı: Bulmama gerek yok ben kendimde yaparım,kodlar biraz karışık olmuş tüm css kodlarını bir tag'da toplasan?

Tekrardan teşekkürler.


Sen yapabilirsin ama biz yapamıyoruz kardeşim bu yüzden paylaşmalı. @ufufuk

Başka yerden çekeceğimize burda kendim yapıp paylaşırım daha iyi :)
Bende beğendim saten bunu :)
Ara
Cevapla PGM
Teşekkür verenler:
#8
Çok sade değil mi biraz daha hareketli olsaydı keşke seni eleştirmiyorum yanlış anlama yapanı
Ara
Cevapla PGM
Teşekkür verenler:
#9
BEN beğenmedim :)
ama paylaşım için teşekkürler.
Ara
Cevapla PGM
Teşekkür verenler:
#10
(17-03-2015 Saat: 17:29)Catastrophe Nickli Kullanıcıdan Alıntı: Çok sade değil mi biraz daha hareketli olsaydı keşke seni eleştirmiyorum yanlış anlama yapanı

Hocam hover var.bi onizleseniz :)
Ara
Cevapla PGM
Teşekkür verenler:
#11
Güzel, kardeşim eyvAllah  :)
Ara
Cevapla PGM
Teşekkür verenler:
#12
(17-03-2015 Saat: 21:44)ChromeStarde Nickli Kullanıcıdan Alıntı: Güzel, kardeşim eyvAllah  :)

Kardes o kadr eywallah ama bi emeğe s aygi :)
Ara
Cevapla PGM
Teşekkür verenler:


Hızlı Menü:


Şu anda bu konuyu okuyanlar: 2 Ziyaretçi


Online Shopping App
Online Shopping - E-Commerce Platform
Online Shopping - E-Commerce Platform
Feinunze Schmuck Jewelery Online Shopping