ilink circle

<div dir="ltr" style="text-align: left;" trbidi="on">
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVQYhpbVFbAuJ4MmLJXzuut35LlBTNVJidL1Wnpjs7EQdpqKj7LvduuoZlwG93z-1qJzLG-zr6zxbfFF_SWYGVRIkP_zJUHga_DOOndRVMaAQEUfaTSBDenv6nKzKoMopfdZDd9xq0-H4/s1600/Beautiful+Sliding+JavaScript+Side++Bar+Menu.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVQYhpbVFbAuJ4MmLJXzuut35LlBTNVJidL1Wnpjs7EQdpqKj7LvduuoZlwG93z-1qJzLG-zr6zxbfFF_SWYGVRIkP_zJUHga_DOOndRVMaAQEUfaTSBDenv6nKzKoMopfdZDd9xq0-H4/s200/Beautiful+Sliding+JavaScript+Side++Bar+Menu.png" width="161" /></a></div>
<h2 style="text-align: left;">
Beautiful Sliding JavaScript Side  Bar Menu</h2>
<div class="MsoNormal" style="margin-bottom: 0.0001pt; text-align: justify;">
Show- hide, Smooth sliding and beautiful.
Menu bar with javascript and mootools. This post explains how to add
beautiful Sliding JavaScript Side Bar Menu Using Mootools Widget on his blog
that looks good on your blogspot blog. Be effective CSS vertical menu with show
/ hide uses MooTools to show / hide the menu with a vertical slide-in/slide-out
nice effect.<o:p></o:p></div>
<div style="text-align: justify;">
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
 </div>
<div class="MsoNormal" style="line-height: 14.4pt; margin-bottom: 0.0001pt;">
About MooTools: "MooTools is a solid, flexible,
Object-Oriented JavaScript framework designed for intermediate to advanced
JavaScript developer. It lets you write great, flexible, cross-browser code
with its stylish API, well known and consistent. <o:p></o:p></div>
</div>
 
How to Install Beautiful Sliding JavaScript Side 
 Bar Menu Using Mootools 
 
Now let's start adding side bar.  
 
<h2 style="text-align: left;">
Step 1: </h2>
<h2 style="text-align: left;">
Login to Your Blogger Account.Go to your Blogger Dashboard.Click on Layout tab from left pane and click on Add a Gadget link. </h2>
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvh_ErN_YG3jTsWxc1asngJjOs-OZa8n-teR1F2dKvAanK6CYsfRtqSSziPZhyphenhyphentBI1Dpok1z88hGbcQravdd_iEdPrrKyLhlu16HKaLnMFs1kYfEk1XiGodOye-GV2a5PgY2n1KWiuPO4/s1600/ilinkheader.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="" border="0" height="412" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvh_ErN_YG3jTsWxc1asngJjOs-OZa8n-teR1F2dKvAanK6CYsfRtqSSziPZhyphenhyphentBI1Dpok1z88hGbcQravdd_iEdPrrKyLhlu16HKaLnMFs1kYfEk1XiGodOye-GV2a5PgY2n1KWiuPO4/s640/ilinkheader.jpg" title="" width="640" /></a></div>
 
<h2 style="text-align: left;">
Step 2:</h2>
<h2 style="text-align: left;">
<div style="text-align: justify;">
After click on Add a Gadget link A pop-up box will open now with many gadget list, Choose HTML/JavaScript from the gadget options by clicking the blue plus sign for that gadget. </div>
</h2>
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5Kut2x3ULoXLAGh9QBvOOl1ZGSwOxjflc_BjuRSQi_-f4Q108ItyBR8JaH5uGn-UH5CTbUXaCYv4JjyZJKMVoBYmC9K9NE1Z_Q3_0YvKF5H_oA1kL00TdiVFHroXf-XQxE_GRC9_F0k4/s1600/javascript.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="252" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5Kut2x3ULoXLAGh9QBvOOl1ZGSwOxjflc_BjuRSQi_-f4Q108ItyBR8JaH5uGn-UH5CTbUXaCYv4JjyZJKMVoBYmC9K9NE1Z_Q3_0YvKF5H_oA1kL00TdiVFHroXf-XQxE_GRC9_F0k4/s400/javascript.jpg" width="400" /></a></div>
 
<h2 style="text-align: left;">
Step 3:</h2>
<h2 style="text-align: left;">
Select 'HTML/JavaScript'. </h2>
<h2 style="text-align: left;">
 Step 4:</h2>
<h2 style="text-align: left;">
 Now Copy Script and Paste on 'JavaScript'. </h2>
 
<script src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/side-bar-menu/prototype.js" type="text/javascript"></script> 
<script src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/side-bar-menu/effects.js" type="text/javascript"></script> 
<script src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/side-bar-menu/side-bar.js" type="text/javascript"></script> 
<a href="http://24work.blogspot.com/" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" target="_blank" title="Latest Tips And Tricks"><img src="https://bitly.com/24workpng1" alt="Latest Tips And Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgapkWB1cTyZPZzMOTkxZypZeAP1aOnVGX32vk3Uxwh_TRtjMxnsVdT2XEmDL6fKW1GXgKMMlTJVM4bSDAn5qWOqa1v5rLCkstrMI85N7mE258oJfVbqG_6Ga4InUE-AS8yXgDh-Fw6LxHW/s320/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>LeftMenu</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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3DDW29EzYOL4RtQb5fLNWnBpGXF0G0VOdveDm05WJvtQJhZb72KN2NRUPwuz0qsbenXC6b_kNNsQNq-cBLzj0MF5VgWk4fsqO74KJpjiekDXgrGz0qI4dt3BLCjWnO5Q6O_yVKXa3DrTo/s320/sidebarcollapse.png" title="sideBar" /></a> 
</div> 
 
 
 </div>

Beautiful Sliding JavaScript Side Bar Menu

Beautiful Sliding JavaScript Side Bar Menu Show- hide, Smooth sliding and beautiful. Menu bar with javascript and mootools. This po...

ilink circle

Beautiful Sliding JavaScript Side Bar Menu

Blog Archive

Contact Form