Grow your CSS skills. Land your dream job.

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

  • # February 10, 2010 at 11:08 pm

    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>

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".