Tgwizman.Wordpress.com

by Tgwizman

HTML

<div id="wrapper">
    <div id="head">Tgwizman's Blog</div>
    <div id="menu">
        <ul>
            <li><a id="browse">Browse</a></li>
            <li><a>Search</a></li>
            <li><a>Help</a></li>
        </ul>
    </div>
    <div id="body">
        <div id="sidebar">
            <div id="dropdown"><h3>March 2012</h3>
                <ul>
                    <li><a>25th</a></li>
                    <li><a>22nd</a></li>
                </ul>
            </div>
        </div>
        <div id="contents">
            <div id="post">
                <div id="title">Lorem Ipsum</div>
                <div id="entry">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </div>
            </div>
            <div id="post">
                <div id="title">Made my cat! :D</div>
                <div id="entry">
                    I was bored, so I decided to make a pixel art of my cat
                </div>
            </div>
            <div id="post">
                <div id="title">Hello World!</div>
                <div id="entry">
                    Welcome to my new site! This site is going to be for me to post free to use various cool web scripts and images (mainly pixel art) that I make in my spare time. Please read the license that is located here, before you go ripping images off my site. Don’t worry, you will never have to pay for images that I post to this blog. I just ask that my name is spread with the images I make.

                    Here are a few images that I made yesterday and today. Enjoy!
                </div>
    ...

CSS

html, body, * {
    margin: 0px;
    padding: 0px;
}

body {
    background-color: #333;
}

#wrapper {
    margin: 20px auto;
    width: 900px;
    background-color: #999;
}

#head {
    width: 900px;
    text-align: centered;
    background-color: #DDD;
}

#menu {
    height: 24px;
    background-color: #CCC;
}

#menu ul {
    display: inline-block;
}

#menu ul li {
    float: left;
}

#menu ul li a {
    padding: 2px 5px;
    display: block;
    height: 20px;
    border-left: 1px solid #666;
}

#body {
    position: relative;
    width: 900px;
    overflow: hidden;
}

#sidebar {
    position: relative;
    display: none;
    width: 199px;
    float: left;
    clear: none;
    background-color: #EEF;
    border-right: 1px solid #666;
    overflow: hidden;
}

#contents {
    display: block;
    min-height: 200px;
    position: relative;
    overflow: hidden;
}

#post {
    margin: 10px 10px;
    display: block;
    background-color: #EEF;
}

#foot {
    width: 900px;
    background-color: #DDD;
}

JavaScript

document.getElementById('browse').onclick = function() {
    var sidebar = document.getElementById('sidebar');
    var contents = document.getElementById('contents');
    if (sidebar.style.display === 'none') {
        sidebar.style.display = 'block';
        contents.style.width = '700px';
    } else {
        sidebar.style.display = 'none';
        contents.style.width = '900px';
    }
};