Animasyonlu Menü Kodu (koddostu.com'dan alıntı)

Bu Konudaki Kullanıcılar:

2 Misafir (1 Mobil) - 1 Masaüstü,

1 Mobil

5 sn

2
Cevap

0
Favori

709
Tıklama

Daha Fazla
İstatistik

Konu İstatistikleri Yükleniyor

Konuya Özel

0 oy

Öne Çıkar

Cevapla

Sayfa: 1

Giriş

Mesaj

Google'ın materyal tasarımını duymuşsunuzdur belki. Veya "Android L"i . Aşağıdaki hazır kod materyal tasarıma uygun yapılmış bir düşey menü hazır kodu.

Bir kod sitesinden alıntıladım kodu. Koddaki google.com adreslerini ve sayfa isimlerini kodun başlarından değiştirebilirsiniz.

<!-- Koddostu Animasyonlu HTML Menü Kodu START --> 
  <!--Telif sahibi:koddostu.com--> 
   
  <div id="koddostu-materyalmenu"><p> 
  <a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=96089747&url=http://google.com/" data-href="http://google.com/">Ana Sayfa</a> 
  <a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=96089747&url=http://google.com/kategoriler.html" data-href="http://google.com/kategoriler.html">Kategoriler</a> 
  <a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=96089747&url=http://google.com/iletisim.html" data-href="http://google.com/iletisim.html">İletişim</a> 
  <a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=96089747&url=http://google.com/hakkimizda.html" data-href="http://google.com/hakkimizda.html">Hakkımızda</a> 
  <a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=96089747&url=http://www.koddostu.com/" data-href="http://www.koddostu.com/">Hazır Kodlar</a> 
  </p> 
   
  <b onclick="this.parentNode.className='';"><svg fill="#5677fc" fit="" height="100%" preserveAspectRatio="xMidYMid meet" style="pointer-events: none; display: block;" viewBox="0 0 24 24" width="100%"><g><polygon points="19,6.4 17.6,5 12,10.6 6.4,5 5,6.4 10.6,12 5,17.6 6.4,19 12,13.4 17.6,19 19,17.6 13.4,12 "></polygon></g></svg></b> <div onclick="this.parentNode.className='acbakalim';"><svg fill="#5677fc" fit="" height="100%" preserveAspectRatio="xMidYMid meet" style="pointer-events: none; display: block;" viewBox="0 0 24 24" width="100%"><g><path d="M3,18h18v-2H3V18z M3,13h18v-2H3V13z M3,6v2h18V6H3z"></path></g></svg></div></div><style> #koddostu-materyalmenu{position:relative;width:32px;height:32px;overflow:visible;z-index:4000;transition:all 0.25s ease-in;text-align:left;} #koddostu-materyalmenu div, #koddostu-materyalmenu b{cursor:pointer;margin:0 0 0 0;padding:0 0 0 0;position:absolute;top:4px;right:4px;display:inline-block;width:24px;height:24px;transform:rotate(0deg);-webkit-transform:rotate(0deg);transition:all 0.25s ease-in;-webkit-transition:all 0.25s ease-in;} #koddostu-materyalmenu b{width:24px;height:24px;opacity:0;} #koddostu-materyalmenu p{ display:inline-block; overflow:hidden;width:0px;height:0px;position:absolute;top:0px;left:0px;background:#fff; margin:0 0 0 0; padding:0 0 0 0; transition:all 0.25s ease-in; } .acbakalim p{ width:200px !important; height:210px !important; padding:30px 0 0 0 !important; box-shadow:0 2px 5px 0 rgba(0, 0, 0, 0.26) !important; } #koddostu-materyalmenu p a{text-decoration:none !important; font-family:Arial, sans-serif; font-size:14px; color:#455ede; padding-left:15px; display:block; height:40px; line-height:40px; width:200px; } #koddostu-materyalmenu p a:hover{ background:#d0d9ff; } .acbakalim b{ transform:rotate(270deg) !important; -webkit-transform:rotate(270deg) !important; opacity:1 !important; } .acbakalim div{ transform:rotate(360deg) !important; -webkit-transform:rotate(360deg) !important; opacity:0; width:1px !important; height:1px !important; } </style> 
   
  <!--Telif sahibi:koddostu.com--> 
  <!--Bu çalışma Creative Commons Attribution-Gayriticari-NoDerivs 3.0 Unported Lisansı ile lisanslanmıştır.--> 
  <!-- Koddostu Animasyonlu HTML Menü Kodu STOP -->