jQuery slider is now so easy to create and looks cool to see


stylesheet


<style type="text/css">
#main-div{
  width:100%;
  margin-left:25px;
  height:100%;
}
#content{
 padding:10px;
 display:none;
 clear:both;
 color:black;
}
#top-slider{
 border:1px solid lightgreen;
 padding:10px;
 text-align:center;
 background-color:#CCC;
 color:black;
 font-weight:bold;
 display:none;
}
#nav{
 float:left;
 width:15%;
 height:auto;
}
#nav ul li{
 text-decoration: none;
 border:1px solid black;
 color:white;
 background-color:gray;
 padding:10px;
 text-align:center;
 list-style-type:none;
 margin-right:10px;
}
#nav ul li a{
 text-decoration: none;
 color:white;
}
</style>

Script

You need to add following two scripts

1.http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js
2.http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js


<script type="text/javascript">
 $(document).ready(function(){
   $("#nav ul li a").click(function(){
     var indexx =  $("#nav ul li a").index(this);
     if( indexx == 0 ){
       $('#top-slider').show("slide", { direction: "left" },'slow', function(){
          $('#content').slideDown('slow');
       });
     }else if(indexx == 1 ){
       $('#content').slideUp('slow',function(){
          $('#top-slider').hide( 'slide', {direction: 'left'}, 'slow');
       });
     }
   });
})
</script>

And finally the desire div with nav to show slider


<div id="main-div">
  <div id="nav">
    <ul>
      <li><a href="javascript:void(0)">Slide On</a></li>
      <li><a href="javascript:void(0)">Slide Off</a></li>
    </ul>
  </div>
  <div style="float:left;width:65%;height:auto">
  <div id="top-slider">jQuery Slider<div>
  <div id="content">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
  Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
  when an unknown printer took a galley of type and scrambled it to make a type 
  specimen book. It has survived not only five centuries, but also the leap 
  into  electronic typesetting, remaining essentially unchanged. It was 
  popularised in the 1960s with the release of Letraset sheets containing 
  Lorem Ipsum passages,and more recently with desktop publishing software 
  like Aldus PageMaker including versions of Lorem Ipsum.<p>
  </div>
  </div>
</div>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s