Şimdi Ara

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

Bu Konudaki Kullanıcılar:
2 Misafir - 2 Masaüstü
5 sn
2
Cevap
0
Favori
689
Tıklama
Daha Fazla
İstatistik
  • Konu İstatistikleri Yükleniyor
0 oy
Öne Çıkar
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-->
    <!--Bu çalışma Creative Commons Attribution-Gayriticari-NoDerivs 3.0 Unported Lisansı ile lisanslanmıştır.-->
    <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 -->


    Kaynak: Animasyonlu Düşey Menü Kodu - Koddostu







  • ilginç ve işe yarar bir kod. teşekkürler
  • 
Sayfa: 1
- x
Bildirim
mesajınız kopyalandı (ctrl+v) yapıştırmak istediğiniz yere yapıştırabilirsiniz.