How to Create Side Menu Bar


  • * {
        margin: 0;
        padding: 0;
    }


    #wrap {
    margin: 0 auto;
    width: 780px;
    background: #fff;
    }


    #content {
    padding: 0 20px 20px 20px;
    }


    .left {
    float: left;
    width: 200px;
    margin-top: 10px;
    background: #004990;
    }
    .left h2 {
    margin: 10px 0 0 0;
    padding-left: 10px;
    height: 28px;
    line-height: 28px;
    color: #fff;
    font-size: 13px;
    background: #788BBD;
    }
    .left ul {
    padding: 10px 0 15px 20px;
    list-style-type: square;
    color: #788BBD;
    }
    .left ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 100;
    }
    .left ul li a:hover {
    color: #fff;
    font-weight: 600;
    }





     <form id="form1" runat="server">
       
    <div id="wrap">

    <div id="content">

    <div class="left">

    <h2>Categories :</h2>
    <ul>
    <li><a href="#">World Politics</a></li>
    <li><a href="#">Europe Sport</a></li>
    <li><a href="#">Networking</a></li>
    <li><a href="#">Nature - Africa</a></li>
    <li><a href="#">SuperCool</a></li>
    <li><a href="#">Last Category</a></li>
    </ul>

    <h2>Archives</h2>
    <ul>
    <li><a href="#">January 2007</a></li>
    <li><a href="#">February 2007</a></li>
    <li><a href="#">March 2007</a></li>
    <li><a href="#">April 2007</a></li>
    <li><a href="#">May 2007</a></li>
    <li><a href="#">June 2007</a></li>
    <li><a href="#">July 2007</a></li>
    <li><a href="#">August 2007</a></li>
    <li><a href="#">September 2007</a></li>
    <li><a href="#">October 2007</a></li>
    <li><a href="#">November 2007</a></li>
    <li><a href="#">December 2007</a></li>
    </ul>

    </div>

    </div>

    </div>
        </form>

Howdy, Stranger!

It looks like you're new here. If you want to get involved, or you want to Ask a new Question, Please Login or Create a new Account by Clicking below

Login with Facebook

Popular Posts of the Week

Optimum Creative