Neler yeni
WBN - Yan Menü Eklentisi

WBN - Yan Menü Eklentisi HTML

İndirme izni yok...
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
0
Görüntüleme
260
İlk yayınlama
Son güncelleme
Değerlendirme
1.00 yıldız(lar) 1 rating

webien ait diğer tasarımlar

Son incelemeler

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