Categories

“SlideBox” jQuery slider

Template-help.com Team March 17, 2011
Rating: 4.0/5. From 1 vote.
Please wait...

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.

Initialization script we place in the section.

.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;
}
This entry was posted in Slider, Working with jQuery scripts and tagged jQuery, slidebox, slider. Bookmark the permalink.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket