New Twitter Design with CSS and JQuery.

Step 1

First create a DIV element with attribute ID value container. The layar contains of two DIV elements attribute class values right and left.

Step 2

Now create a panel-frame DIV element inside the container DIV. This layer contain a DIV element attribute class value panel (sliding or rolling).

panel-frame

">

panel

">

Step 3

Here the final HTML code ready. Now using jQuery to sliding or rolling the

...

HTML Code

// Right part

panel-frame

">

panel

">

head

"> #" class="close">Close

data

">
// jquery id




//Left Part

left

">
// Message display here

block

" id="1">1

block

" id="2">2
...............................
...............................

Javascript
$(".block").click(function(){})- block is the class name of DIV tag. Using $(this).attr('id') - calling DIV tag ID value.

CSS

#container
{
width:700px;
margin:0 auto;
background-color:#ffffff;
min-height:500px;
overflow:auto;
-moz-border-radius:5px;
-webkit-border-radius:6px;
border:solid 1px #999999;
}
.left
{
float:left;
background-color:#fff;
width:350px; min-height:300px;
position:relative;
}
.right
{
float:right; width:350px;
}
#panel-frame
{
position:relative;
max-width:700px;
position:fixed;
}
.panel
{
background-color:#f2f2f2;
width:340px;
height:550px;
margin-top:20px;
position:relative;
position:absolute;
border:solid 1px #999999;
border-left:0px;
left:0;
}
.head
{
background-color:#ffc72e;
padding:10px;
text-align:right;
}