Hello! After a couple of months, here is another tutorial again! A sliding panel!
Forum Version: PunBB and Phpbb2 (for Phpbb3 and Invision, put #1 code on Homepage Message)
Demo: https://coding-spot.darkbb.com/h5-sliding-panel-demo

So lets start!

1. Go to your overall_header template, find the body part () and paste this below it: (Just edit the text inside the div id panel tag)

Code:

<div class="boddy"><div id="panel">
<center>Hello hello hello! E-Mark! Aaaa! Teeeeest!</center>
</div>

<p class="slide"><a href="#" class="btn-slide">Slide Panel</a></p>
</div>

2. Inside the same template (overall_header), find the ending head tag (), then paste this before the ending tag:

Code:

<script type="text/javascript">
$(document).ready(function(){

   $(".btn-slide").click(function(){
      $("#panel").slideToggle("slow");
      $(this).toggleClass("active"); return false;
   });
  
    
});
</script>


NOTE!: If you'll put this on a new HTML Page (creating new HTML page then setting it as new homepage, please put this one):

Code:

<script type="text/javascript" src="http://www.webdesignerwall.com/demo/jquery/jquery.js"></script>

3. Put this on your CSS:

Code:

.boddy {
   margin: -8px auto;
   padding: 0;
   width: 570px;
   font: 75%/120% Arial, Helvetica, sans-serif;
}
#panel {
   background: #c3c3c3;
   height: 200px;
   display: none;
}
.slide {
   margin: 0;
   padding: 0;
   border-top: solid 4px #373737;
   background: url(http://img638.imageshack.us/img638/5051/tabwo.png) no-repeat center top;
}
.btn-slide {
   background: url(http://img21.imageshack.us/img21/8233/whitearrown.gif) no-repeat right -50px;
   text-align: center;
   width: 144px;
   height: 31px;
   padding: 10px 10px 0 0;
   margin: 0 auto;
   display: block;
   font: bold 120%/100% Arial, Helvetica, sans-serif;
   color: #fff;
   text-decoration: none;
}
.active {
   background-position: right 12px;
}


Then you're done!! :D

Nice n Cool Tutorial :)

Cool mark!