Neler yeni

Ücretsiz WBN - Yan Menü Eklentisi HTML

Kayıt olun ücretsiz indirin...
WBN - Yan Menü Eklentisi
  • yanmenu.png
    yanmenu.png
    41.1 KB · Görüntüleme: 91
yanmenu.png

Bu eklenti ile oluşturacağımız menüler web sitenin en solunda sabit bir şekilde duruyorlar. Mouse ile ikonların üzerine geldiğinizde link butonu sağa doğru kayıyor. Bu kayma işleminde easeOutBounce kullanıldığı için geri tepme gibi bir animasyona sahip.

istediğiniz gibi özelleştirebilirsiniz ikonları değiştirin münü arkaplan rengini değiştirin vs..

DEMO: WBN Yan menü demo

Js dosya adresleri :

Kod:
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.easing.js"></script>
<script type="text/javascript" src="jquery.sweet-menu-1.0.js"></script>

Stil :

Kod:
        <style type="text/css">
            body
            {
                background: #000000 url('images/bg.jpg') top center no-repeat;
            }

            .sweetMenuAnchor{
                border-top: 1px solid #ffffff;
                border-right: 1px solid #ffffff;
                border-bottom: 1px solid #ffffff;
                border-top-right-radius: 4px;
                -moz-border-radius-topright: 4px;
                border-bottom-right-radius: 4px;
                -moz-border-radius-bottomright: 4px;
                color: #0071bb;
                font-size: 24px;
                font-weight: bold;
                text-align: right;
                text-transform: uppercase;
                font-family: arial;
                text-decoration: none;
                background-color: #888888;
                opacity: 0.6;
            }

            .sweetMenuAnchor span{
                display: block;
                padding-top: 10px;
            }

            h1
            {
                display: block;
                text-align: center;
                font-size: 48px;
                color: #ffffff;
                text-shadow: 0px 0px 12px #000000;
                font-family: "Trebuchet MS";
            }
        </style>

  • Body etiketleri arasına eklenmesi gereken bölüm.
Html :
Kod:
<ul id="backMenu">
        </ul>
        <ul id="exampleMenu">
            <li><a href="https://webien.net/?p=8992">Anasayfa</a></li>
            <li><a href="https://webien.net/?p=8992">Blog</a></li>
            <li><a href="https://webien.net/?p=8992">Portfolio</a></li>
            <li><a href="https://webien.net/?p=8992">Sohbet</a></li>
            <li><a href="https://webien.net/?p=8992">İletisim</a></li>
            <li><a href="https://webien.net/?p=8992">Uygulama</a></li>
        </ul>
  • Beğen
Tepkiler: tekim
Yazar
webien
İndirilme
1
Görüntüleme
412
İlk yayınlama
Son güncelleme
Oy
1.00 yıldız(lar) 1 oylama

webien ait diğer tasarımlar

Son incelemeler

Hata! Bazı sorunlarla karşılaştık.
İstenilen sayfa bulunamadı.
Üst