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>
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.
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>
