Powered by Blogger.

Sexy Sliding JavaScript Side Bar Menu Using Mootools Easy Method

Show- hide, sleek slippery and attractive. Menu bar with javascript and mootools. This post explains a way to add attractive slippery JavaScript facet Bar Menu exploitation Mootools contrivance on his diary that appears sensible on your .Be impactive CSS vertical menu with show / hide uses MooTools to indicate / hide the menu with a vertical slide-in/slide-out nice effect. regarding MooTools: "MooTools could be a compact, modular, Object-Oriented JavaScript framework designed for intermediate to advanced JavaScript developer., flexible, cross-browser code with its elegant API.


Now let's begin adding it...

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

Blogger Dashboard, go to Layout and click on Add a Gadget link

Step 2: once click on Add a gismo link A pop-up box can open currently with several gismo list, opt for HTML/JavaScript from the Gadget choices by clicking the blue sign for that gadget.

sideBar


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

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




Blogger Tips and TricksLatest Tips And TricksBlogger Tricks
&lta href=”http://crackingsoftworld.blogspot.com” target=”_blank” title=”Blogger Icons”&gt&ltimg src=”http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png” border=”" alt=”Blogger Icons” style=”position:absolute top: 0px right: 0px” /&gt&lt/a&gt&ltscript src=”http://safir85.ucoz.com/bdlab-blogspot/24work/side-bar-menu/prototype.js” type=”text/javascript”&gt&lt/script&gt
&ltscript src=”http://safir85.ucoz.com/bdlab-blogspot/24work/side-bar-menu/effects.js” type=”text/javascript”&gt&lt/script&gt
&ltscript src=”http://safir85.ucoz.com/bdlab-blogspot/24work/side-bar-menu/side-bar.js” type=”text/javascript”&gt&lt/script&gt
&ltstyle&gt
body
a
a:active
#sideBar
#sideBar h2
#sideBar h2 span
#sideBar ul
#sideBar li
#sideBar li a
#sideBar li a:link,
#sideBar li a:visited
#sideBar li a:hover
#sideBarbritish petroleum.blogspot.com/-nUGCKbZIyb4/Tvq4n0Ix8CI/AAAAAAAAACk/cPMmEKDYqto/s320/left.collapse.border.png)
background-position:top right
background-repeat:repeat-y
#sideBarTab
#sideBarTab img
#sideBarContents
#sideBarContentsInner&lt/style&gt
&ltdiv id=”sideBar”&gt
&ltdiv id=”sideBarContents” style=”display:none”&gt
&ltdiv id=”sideBarContentsInner”&gt
&lth2&gtLeft&ltspan&gtMenu&lt/span&gt&lt/h2&gt
&ltul&gt
&ltli&gt&lta href=”#”&gtLink One&lt/a&gt&lt/li&gt
&ltli&gt&lta href=”#”&gtLink Two&lt/a&gt&lt/li&gt
&ltli&gt&lta href=”#”&gtLink Three&lt/a&gt&lt/li&gt
&ltli&gt&lta href=”#”&gtLink Four&lt/a&gt&lt/li&gt
&lt/ul&gt
&lt/div&gt &lt/div&gt
&lta id=”sideBarTab” href=“#”&gt&ltimg alt=”sideBar” src=”http://1.british petroleum.blogspot.com/-gPACiBoLjnI/TxPJ-2PsgfI/AAAAAAAAAIw/mQGIlkBHf_4/s320/sidebarcollapse.png” title=”sideBar” /&gt&lt/a&gt
&lt/div&gt


Original source:
CrackingSoftWolrd.blogspot.com

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

0 comments:

Post a Comment