move animated side bar? am stuck, tons of thanks in advance!

[Whatpapertiger]

Hey everyone, I am trying to adapt this design..( http://www.newghost.net/TRY.html) right now the sidebar animates when you click it and goes to hiding… on the right side of the page…

I am trying to get the side bar to come from the top- so that it spans across the top and when you click it it goes to hide away up in the top. (and not the right side….) I would like to keep the function it has as it moves… Would eventually like to put some buttons on this bar; buttons etc. I played around with moving the div tag and the inline content and I know there is a connection I am missing..

Any thoughts on how to make this work? I feel like I have hit a wall..I am really new to this and am practicing and working out the kinks.. I am not looking for an easy answer but more so a direction on a specific direction I need to go with the coding I’ve been working on. Not looking for a "you are a noob, go teach yourself…" because thats something I already know and am doing…teaching myself…

any advice, or resources on the specifics that I am missing, or how-to is appreciated. Below are my css/html docs…. If I need to post the jquery docs let me know… I can do that too.. I am having difficulty understanding the connection between jquery and the css, even though I have been told that its a simple connection.

Here is my css document:

/* Reset */
html{color:#000;background:#fefefe;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,field set,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:”;}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{font-size:100%;}legend{color:#000;}

/* Global */
html {
font-size:125%;
background:#fff;
}
body {
color:#222;
font:400 50%/1 Monaco, ‘Courier New’, Courier, serif;
background:#fff;
width:100%;
}

/* Links */
a {
outline:0;
color:#000;
}
a:focus {
background:#fff;
color:#000;
}

.page .page .entry-content {
padding:1em;
display:block;
margin:80px 0 20px;
width:400px;
line-height:1.4em;
}
body.page-template-news-php {
padding:80px 0 20px;
}
.page-template-news-php .entry-content {
margin:0 0 10px !important;
width:400px;
line-height:1.4em;
}
.page-template-news-php .entry-content h2 {
text-transform:uppercase;
}
.page-template-news-php .entry-content .entry-date {
font-style:0.9em;
padding:4px 0 8px;
}

.s-category-news .entry-content {
margin:80px 0 10px !important;
width:400px;
line-height:1.4em;
}
.s-category-news #pagination {
display:none;
}

.entry-content {
padding:1em;
display:block;
margin-top:80px;
}
.entry-content img {
display:inline;
border:0;
float:left;
}
#postHeader h1 {
font-size:2em;
color:#000;
padding:6px 10px 10px;
position:fixed;
top:20px;
left:0;
background:#fff;
font-family:Helvetica Neue,Helvetica,Arial;
font-weight:700;
letter-spacing:-1px;
text-transform:titlecase;
}
#pagination {
font-size:1.4em;
color:#000;
padding:10px 10px;
position:fixed;
top:60px;
left:0;
background:#fff;
font-family:Helvetica Neue,Helvetica,Arial;
font-weight:700;
letter-spacing:-1px;
}
.nav-previous {
display:inline;
}
.nav-next {
display:inline;
}
.nav-previous a {
color:#000;
text-decoration:none;
}
.nav-next a {
color:#000;
text-decoration:none;
}

/* SIDEBAR */
#sidebar {
bottom:0;
color:#fff;
display:block;
position:fixed;
text-shadow:0 -1px 0 #000;
top:0;
width:190px;
}
#sidebar #header {
position:absolute;
top:0;
left:0;
display:block;
width:190px;
background:url(Images/logotype.png) no-repeat;
height:102px;
text-indent:-9000px;
}
#sidebar #header h1 a {
display:block;
width:190px;
height:102px;

}
#sidebar #header h1 a:focus {
background:none;
}
#sidebar .bg {
position:absolute;
top:102px;
right:0;
left:0;
bottom:0;
background:#000;
background:rgba(0, 0, 0, 0.8);
width:190px;
z-index:0;
margin-top:inherit
}
#sidebar .hide {
position:absolute;
display:block;
top:0;
left:2px;
bottom:0;
width:10px;
height:100%;
z-index:10;
cursorointer;
}
#sidebar .hide span {
position:relative;
top:50%;
display:block;
}
#sidebar .show {
position:absolute;
display:block;
top:0;
left:2px;
bottom:0;
width:10px;
height:100%;
z-index:10;
cursorointer;
}
#sidebar .show span {
position:relative;
top:50%;
display:block;
}
#sidebar .wrap {
position:relative;
z-index:1;
top:102px;
padding:0 10px 0 20px;
font-size:1em;
}
#sidebar h2 {
color:#fff;
font-weight:700;
text-transform:uppercase;
margin:20px 0 4px;
}
#sidebar ul li {
line-height:1.4em;
font-size:0.9em;
}
#sidebar ul#news li {
margin:0 0 10px;
}
#sidebar ul#news li h3 {
text-transform:uppercase;
}
#sidebar a {
color:#fff;
text-decoration:none;
}
#sidebar a:hover {
text-decoration:underline;
}
#sidebar a:focus {
background:#fff;
color:#000;
text-shadow:none;
}
#sidebar .closewrap {
margin-top:12px;
}
#sidebar .built {
position:absolute;
bottom:10px;
right:20px;
color:#fff;
color:rgba(255,255,255,0.5);
text-shadow:none;
z-index:100;
}
#sidebar .built a {
color:#fff;
color:rgba(255,255,255,0.5);
}

/* Footer */
#footer {
width:100%;
clear:both;
display:block;
}
#footer p {
padding:20px 10px;
}

#ie6 {
background:black;
position:absolute;
top:0;
bottom:0;
z-index:1000;
width:100%;
height:100%;
color:#fff;
font-size:60pt;
padding:20px;
}

.newswrap{
height:90px;
}
#newsHolder{
height:90px;
}
.jScrollPaneContainer {
position: relative;
overflow: hidden;
z-index: 1;
}

.jScrollPaneTrack {
position: absolute;
cursor: pointer;
right: 0;
top: 0;
height: 100%;
background:rgba(255,255,255,0.1);
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.jScrollPaneDrag {
position: absolute;
background:rgba(255,255,255,0.5);
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
cursor: pointer;
overflow: hidden;
}
.jScrollPaneDragTop {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
.jScrollPaneDragBottom {
position: absolute;
bottom: 0;
left: 0;
overflow: hidden;
}
a.jScrollArrowUp {
display: block;
position: absolute;
z-index: 1;
top: 0;
right: 0;
text-indent: -2000px;
overflow: hidden;
*background-color: #999;
height: 9px;
}@charset "UTF-8";
/* CSS Document */

---

and here is my html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml&quot; dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11"&gt;
<title>TEST</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="description" content= "PHRASE WORDS" />
<meta name="keywords" content="PHRASE WORDS" />
<meta name="author" content= "NAME" />
<meta name="copyright" content= "NAME" />

<link rel="stylesheet" type="text/css" href="mscripts/style.css" />
<meta name="generator" content="WordPress 2.9.1" />
<link rel="shortcut icon" href="../mscript/Images/favicon.ico" />
<script type=’text/javascript’ src=’mscripts/jquery-1.3.2.min.js’></script>
<script type=’text/javascript’ src=’mscripts/jquery.load.min.js’></script>
<script type=’text/javascript’ src=’mscripts/jquery.mousewheel.js’></script>
<script type=’text/javascript’ src=’mscripts/jquery.em.js’></script>
<script type=’text/javascript’ src=’mscripts/jquery.jscrollpane.js’></script>
<script type=’text/javascript’ src=’mscripts/jquery.initialize.js’></script>
</head>

<body class="wordpress y2010 m02 d01 h02 home blog">
<!–[if lte IE 6]>
<div id="ie6">It’s yours</div>
<![endif]–>

<div id="post-6315" class="try p1 post publish author-category-images y2010 m01 d26 h16">
<div id="postHeader">
<h1>Test Site</h1>
<div id="pagination">
<div class="nav-previous"><a href="http:// /page/2/" >PAST</a></div>
/
<div class="nav-next"></div>
</div>
</div>

<div class="entry-content">
<p><img class="alignnone size-full wp-image-5140" title="IMAGE TITLE HERE" src="IMAGE JPG HERE" alt="" width="800" height="600" /></p>
</div>
</div>

<!– begin sidebar –>
<div id="sidebar">

<div id="header">

</div>

<div class="wrap">

<h2>Pages</h2>
<ul>
<li class="page_item page-item-4857"><a href="linkpapge/about-2/" title="Aboutlink here">LINK NAME</a></li>
<li class="page_item page-item-4860"><a href="linkhere" title="News link here">News LINKS HERE</a></li>
<li class="page_item page-item-6319"><a href="link here/" title="link title">LINK NAME</a></li>
</ul>

<h2>Latest News</h2>
<div class="newswrap">
<div id="newsHolder">
<ul id="news">
<li>
<h3>TEST TEST TEST</h3>
<div class="entry-date">OCTOBER 29th, 2006</div>
<p>lorem ibsum <a href="http://newghost.net class="more-link">Read More <span class="meta-nav">&raquo;</span></a></p>
</li>
<li>
<h3>TEST @ TEST2</h3>
<div class="entry-date">FEB 19th, 2004</div>
<p>TEST TES TE TST <a href="http://newghost.net/&quot; target="_blank">THIS</a> check it out <br />
<a href="newghost.net target="_blank">http://newghost.net</a></p&gt;
</li>
<li>
<h3> WORDS GO HERE</h3>
<div class="entry-date">ENTER DATE</div>
<p>WORDS WORDS<a href="link here" target="_blank">PHRASE TITLE</a>.. Good looks <a href="insert link here" target="_blank">nowww</a>.</p>
<p><a href="insert html" target="_blank">insert html</a></p>
</li>
<li>
<a href="insert archive">News archive &raquo;</a>
</li>
</ul>
</div>
</div>

<li id="linkcat-2" class="linkcat"><h2>TITLE HERE</h2>
<ul class=’ blogroll’>
<li><a href="linkhere" rel="name" target="_blank">name phrase</a></li>

</ul>
</li>

<h2>RSS</h2>
<a href="address/feed/" title=" latest posts" rel="alternate" type="application/rss+xml">Subscribe</a>

<div class="closewrap">
<a href="#close" class="close">x Close</a>
</div>
</div>
<span class="bg"></span>
<span class="hide"><span>&raquo;</span></span>
<span class="show"><span>&laquo;</span></span>
</div>
<!– end sidebar –>

<div id="footer">
</p>
</div>

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl.&quot; : "http://www.&quot;);
document.write(unescape("%3Cscript src=’" + gaJsHost + "google-analytics.com/ga.js’ type=’text/javascript’%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-12650616-1");
pageTracker._trackPageview();
} catch(err) {}
</script>

</body>
</html>

[Author]

Posts