- Web templates
- E-commerce Templates
- CMS & Blog Templates
- Facebook Templates
- Website Builders
“SlideBox” jQuery slider
March 17, 2011
A simple script which allows us to achieve an effect of a sliding box with content in it.
JavaScript
We should include jQuery framework by pointing src attribute in the script tag to those .js files.<script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script>Initialization script we place in the section.
<script type="text/javascript"> $(function() { $("#link").click(function(event) { event.preventDefault(); $(this).toggleClass("link2"); $("#dropdown_box").slideToggle(); }); }); </script>.header-banner-right this class defines height of the box in the hidden position #link this is the button element with an image which hides the content #dropdown_box this id is the box content area
HTML
Below you can see general HTML script representation:CSS
#link { background:url(images/button_go_box.png) no-repeat 0 0; display:block; height:39px; width:39px; z-index:180000; margin:0 0 0 471px; position:absolute; } .dropdown_box { z-index:1; } .dropdown_box { zoom:0; z-index:1; } .all .dropdown_box { zoom:0; z-index:1; }