منو کشویی برای سایت و وبلاگ

در این پست منو کشویی جاوا اسکریپت با استفاده از فریم ورک   mootools  برای شما اماده کردیم ، که ایدوارم مورد استفاده شما قرار گیرد

منو  /  meno

 

منو کشویی برای سایت و وبلاگ

منو کشویی برای سایت

منو کشویی برای  وبلاگ

کد را فقط کافیست در قسمت تنظیمات سایت ( کدهای اختصاصی ) یا در قسمتی از ویرایش قالب وبلاگ خود قرار دهید تا عمل کند

 

برای قرار دادن لینک های خود به جای لینک های موجود در این کد فقط کافیست ادرس های خود را جایگزین ادرس های زیر موجود در کد نمایید

 

<li><a href=”#”>Link One</a></li>
<li><a href=”#”>Link Two</a></li>
<li><a href=”#”>Link Three</a></li>
<li><a href=”#”>Link Four</a></li>
به جای Link  …. اسم وب خود را قرار دهید  و به جای # ادرس وب خود را قرار دهید
<script src=”http://dl.dropboxusercontent.com/s/dxv8pj5mvc74vyw/prototype.js” type=”text/javascript”></script>
<script src=”http://dl.dropboxusercontent.com/s/wvyae56sr0hic2n/effects.js” type=”text/javascript”></script>
<script src=”http://dl.dropboxusercontent.com/s/8t6uvuz6r1xzpnz/side-bar.js” type=”text/javascript”></script>
<a href=”http://24work.blogspot.com/” target=”_blank” title=”Blogger Tips and Tricks”><img src=”http://www.behtarinabzar.ir/” alt=”behtarinabzar Tips and Tricks” border=”0″ style=”position: fixed; bottom: 10%; right: 0%; top: 0px;” /></a><a href=”http://www.behtarinabzar.ir/” target=”_blank” title=”Latest Tips And Tricks”><img src=”http://www.behtarinabzar.ir/” alt=”Latest Tips And Tricks” border=”0″ style=”position: fixed; bottom: 10%; right: 0%;” /></a><a href=”http://www.behtarinabzar.ir/” target=”_blank” title=”behatrinabzar “><img src=”http://www.behtarinabzar.ir/” alt=”Blogger Tricks” border=”0″ style=”position: fixed; bottom: 10%; left: 0%;” /></a>
<style>
body{
font-size:75%;
}
a{
outline: none;
}
a:active{
outline: none;
}
#sideBar{
text-align:left;
}
#sideBar h2{
color:#F0FFFF;
font-size:110%;
font-family:arial;
margin:10px 10px 10px 10px;
font-weight:bold !important;
}
#sideBar h2 span{
font-size:125%;
font-weight:normal !important;
}
#sideBar ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
#sideBar li{
margin:0px 5px 5px 10px;
padding: 0 0 0 10px;
list-style-type:none;
display:block;
background-color:#DA1074;
width:177px;
color:#FFFFFF;
}
#sideBar li a{
width:100%;
}
#sideBar li a:link,
#sideBar li a:visited{
color:#FFFFFF;
font-family:verdana;
font-size:100%;
text-decoration:none;
display:block;
margin:0px 0px 0px 0px;
padding:0 0 0 20px;
width:100%;
}
#sideBar li a:hover{
color:#FFFF00;
text-decoration:underline;
}
#sideBar{
position: fixed;
width: auto;
height: auto;
top: 140px;
left:0px;
background-image:url(http://www.behtarinabzar.ir/files/uploads/1397713663.left.collapse.border.png);
background-position:top right;
background-repeat:repeat-y;
}
#sideBarTab{
float:left;
height:137px;
width:28px;
}
#sideBarTab img{
border:0px solid #FFFFFF;
}
#sideBarContents{
float:left;
overflow:hidden !important;
width:200px;
height:320px;
}
#sideBarContentsInner{
width:200px;
}</style>
<div id=”sideBar”>
<div id=”sideBarContents” style=”display:none;”>
<div id=”sideBarContentsInner”>
<h2>Left<span>Menu</span></h2>
<ul>
<li><a href=”#”>Link One</a></li>
<li><a href=”#”>Link Two</a></li>
<li><a href=”#”>Link Three</a></li>
<li><a href=”#”>Link Four</a></li>
</ul>
</div> </div>
<a id=”sideBarTab” href=”#”><img alt=”sideBar” src=”http://1.bp.blogspot.com/-gPACiBoLjnI/TxPJ-2PsgfI/AAAAAAAAAIw/mQGIlkBHf_4/s320/sidebarcollapse.png” title=”sideBar” /></a>
</div>

پاسخی بگذارید

بالا