<html>
<head>
    <title>SideBar Menu</title>
</head>

<body>
    <div class="sidebar">
        <img alt="logo" height="200" src=
        "http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/512/Plants-Trees-Leaf-icon.png"
        width="200">

        <ul>
            <li class="listItemA"><a href="#"><img alt="icon" height="40" src=
            "http://www.iconsdb.com/icons/preview/black/circle-xxl.png" width=
            "40">HOME</a></li>

            <li class="listItemT" style="left:0px; background:none;">
            PROJECTS</li>

            <li class="listItemA"><a href="#"><img alt="icon" height="40" src=
            "http://www.iconsdb.com/icons/preview/black/circle-xxl.png" width=
            "40">BEGINNER</a></li>

            <li class="listItemA"><a href="#"><img alt="icon" height="40" src=
            "http://www.iconsdb.com/icons/preview/black/circle-xxl.png" width=
            "40">ELEMENTS</a></li>

            <li class="listItemA"><a href="#"><img alt="icon" height="40" src=
            "http://www.iconsdb.com/icons/preview/black/circle-xxl.png" width=
            "40">GAMES</a></li>

            <li class="listItemA"><a href="#"><img alt="icon" height="40" src=
            "http://www.iconsdb.com/icons/preview/black/circle-xxl.png" width=
            "40">PAGES</a></li>
        </ul>
    </div>
</body>
</html>
/* GENERAL */
body {
    margin: 0;
}

/*SIDEBAR*/
.sidebar {
    position: absolute;
/* Change :absolute; to :fixed; to keep the sidebar in place when scolling. */
    background: #c1c1c1;
/* Sidebar Background */
    width: 200px;
/* Width of side bar. WARNING: If you change this, change .listItemA:width */
    height: 100%;
    padding-top: 10px;
/* Padding above the sidebar image. */
    font-family: helvetica;
/* Font for the sidebar (Remove to keep the same font as the rest of the document) */
}

.sidebar a {
    text-decoration: none;
/* Removes the underline from links. */
    color: #e9e7e7;
/* Text color of the menu items */
}

.sidebar img {
    margin-right: auto;
    margin-left: auto;
    vertical-align: middle;
    margin-top: -2px;
    margin-right: 20px;
}

.sidebar ul {
    line-height: 40px;
    overflow: hidden;
    margin-left: 0;
    padding-left: 0;
}

.sidebar ul li {
    list-style-type: none;
    background: #FF712C;
/* Background colour of the menu items. */
    color: #695D46;
/* Text colour of the side bar titles. (Not the links). */
}

.listItemA {
    height: 40px;
    width: 240px;
/* Alter this to be the .sidebar:width PLUS 40 */
    transition: .3s;
/* Speed of the hover animation */
    position: relative;
    left: -40px;
}

.listItemA:hover {
    left: 0;
}

.listItemT {
    text-align: center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.