Side Bar Menu Using Mootools

Show- hide, Smooth sliding and sexy. Menu bar with javascript and mootools. This post explains how to add Sexy 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.

About MooTools: "MooTools is a compact, modular, Object-Oriented JavaScript framework designed for intermediate to advanced JavaScript developer. It lets you write powerful, flexible, cross-browser code with its elegant API, well documented and consistent. ".
MooTools Home: Home Mootools.



How to Install Beautiful Sliding JavaScript Side Bar Menu Using Mootools


Now let's start adding it...

Step 1. Login to Your Blogger Account.Go to your Blogger Dashboard.Click on Layout tab from left pane and click on Add a Gadget link.

Blogger Tips And Tricks|Latest Tips For Bloggers

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

Blogger Tips And Tricks|Latest Tips For Bloggers


Step 3. Select 'HTML/Javascript' and add the one of code given below.

Step 4. Now Click On Save 'JavaScript' You are done. ..............


<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(http://2.bp.blogspot.com/-nUGCKbZIyb4/Tvq4n0Ix8CI/AAAAAAAAACk/cPMmEKDYqto/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>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>



And now click Save



Note: Keep in mind that before a save above "#" of land and your link Link One, Link Two, Link Three Link Four, and the name of the place you need to do is save.And here is the link I used to have 4, you can link up to 10




36 comments:

  1. Is there an IE fix for this?
    Image displayed on page but not sliding open.
    Working fine in all other browsers.
    Many thanks.

    ReplyDelete
  2. @Anonymous

    Dear I have checked this Side Bar Menu in IE and it works fine for me... Something else might be wrong on your end. IE6 is not supported. (IE 6 is very old version... so don’t worry about it…)

    In IE go to tools-> internet options-> then select the advanced tab. Then click reset to reset all internet explorer settings.
    Good luck and hope this helps.

    ReplyDelete
  3. Dear Admin
    Thanks for the quick reply to my question.
    Sidebar still not sliding open (IE8) - tried the reset.
    So, not sure why it's not working, but thanks anyway for trying to resolve.

    ReplyDelete
  4. i use used this code very nice...

    ReplyDelete
  5. Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write ups thanks once again.
    html5 media player

    ReplyDelete
  6. Hi!
    Do you have the slider where I can put gadgets like friend Connect and Networked blogs?

    My community also has a lots of badges and I need ages to open their pages, do you have slider where we can paste stuff like in the HTML/text blogger field for gadgets?

    ReplyDelete
  7. THank you Very Muchh..
    my BLOG>>
    www.filipino-houses.co.cc
    :))

    ReplyDelete
  8. how can i put the backlinks code ? i put this sidebar on my blog .. :)

    ReplyDelete
  9. goodd..
    by : alharifah.blogspot.com

    ReplyDelete
  10. Post Verry gooooddd

    http://alharifan.blogspot.com/

    ReplyDelete
  11. ilmunya sangat bermanfaat sekali, thanks bro

    ReplyDelete
  12. THANKS FOR SUCH A NICE WITGETCH PLZ HAVE A LOOK AT MY BLOG http://nature-soft.blogspot.in/

    ReplyDelete

  13. THANKS FOR SUCH A NICE WITGETCH

    http://nature-soft.blogspot.in/

    ReplyDelete
  14. thanks to teams...........

    http://entakuttukaran.blogspot.in/

    ReplyDelete
  15. Hi, I applied the code and it worked well on my blog, but anytime i click on the sidebar, it automatically jumps to the top of the page. Is there anyway to fix this?

    ReplyDelete
    Replies
    1. Hello Friend Dã Hạc Lê
      load your full page JavaScript Only After Entire your sliding Sidebar Menu

      Delete
  16. Thanks for the great explanation.Mootools is amazing.

    prathap
    javascript training in chennai

    ReplyDelete
  17. androidgamesatbest.blogspot.com
    it works

    ReplyDelete
  18. Good it works.
    http://xn--72c1ana6bfr6da0cb4tzd.blogspot.com

    ReplyDelete
  19. It's worki g Nice with my http://www.technogupshup.com

    ReplyDelete
  20. Thanks man, very simple to set up

    ReplyDelete
  21. That's an excellent slider. It is best for adding social media icons I guess!!

    ReplyDelete

 
Top