Neler yeni

WBN - Yan Menü Eklentisi

Ad
Soyad
Katılım
29 Kasım 2018
Konum
#
Konular
263
Mesajlar
453
Ticaret - 0%
0   0   0
  
iletişim
Meslek
webmaster
Detay  
Meslek
webmaster
1621888745906.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..


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="Webien.Net: Webmaster Forumu">Anasayfa</a></li>

            <li><a href="Webien.Net: Webmaster Forumu">Blog</a></li>

            <li><a href="Webien.Net: Webmaster Forumu">Portfolio</a></li>

            <li><a href="Webien.Net: Webmaster Forumu">Sohbet</a></li>

            <li><a href="Webien.Net: Webmaster Forumu">İletisim</a></li>

            <li><a href="Webien.Net: Webmaster Forumu">Uygulama</a></li>

        </ul>
 

Ekli dosyalar

  • WBN-yan menu.rar
    73.8 KB · Görüntüleme: 1
Moderatör tarafında düzenlendi:

Tema özelleştirme sistemi

Bu menüden forum temasının bazı alanlarını kendinize özel olarak düzenleye bilirsiniz.

Zevkine göre renk kombinasyonunu belirle

Gece/Gündüz modunu seç

Gece ve gündüz modlarından tarzınıza yada ihtiyaçlarınıza uygun olanı seçerek kullana bilirsiniz.

Tam ekran yada dar ekran

Temanızın gövde büyüklüğünü sevkiniz, ihtiyacınıza göre dar yada geniş olarak kulana bilirsiniz.

Izgara yada normal mod

Temanızda forum listeleme yapısını ızgara yapısında yada normal yapıda listemek için kullanabilirsiniz.

Forum arkaplan resimleri

Forum arkaplanlarına eklenmiş olan resimlerinin kontrolü senin elinde, resimleri aç/kapat

Sidebar blogunu kapat/aç

Forumun kalabalığında kurtulmak için sidebar (kenar çubuğunu) açıp/kapatarak gereksiz kalabalıklardan kurtula bilirsiniz.

Yapışkan sidebar kapat/aç

Yapışkan sidebar ile sidebar alanını daha hızlı ve verimli kullanabilirsiniz.

Radius aç/kapat

Blok köşelerinde bulunan kıvrımları kapat/aç bu şekilde tarzını yansıt.