Expanding Menu - Fixed

Expanding menu using jQuery and Fixed Positioning

by Chris LaFrombois

HTML

<div class="menu">
    <ul class="nav">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
    <!-- .nav -->
     <h1 class="click"></h1>

</div>
<!-- .menu -->
<div class="content">
    <p>Nostra lectus sed. Integer faucibus enim neque lobortis mauris. Lacinia gravida id aenean ipsum vestibulum rhoncus urna dolor. Donec erat posuere. Lorem suscipit vel ut wisi cupiditate at vel nunc.</p>
    <p>Wisi vel quo. Ac eros dictum velit odio et eros ultricies pellentesque. Nunc velit lacus. Nascetur vel vivamus sit eu magna. Sed leo iaculis. Magna nec aliquam. Pulvinar volutpat elit. Pellentesque nullam torquent. Morbi diam morbi. Velit sapien ultrices commodo est nulla. Nibh sapien ornare mattis eu torquent aliquam tempus a. Suspendisse vitae eu amet sollicitudin nostra ipsum nisl mauris metus arcu ridiculus aliquam elit maecenas. Quis tellus in. Donec ut duis. Nec faucibus imperdiet fermentum phasellus donec imperdiet sodales sem aliquam sed sed. Duis necessitatibus curabitur sed venenatis quam. Venenatis adipiscing ut erat et neque faucibus turpis aliquam nec mauris velit. At lobortis fermentum. Leo sed ante leo integer et et animi proin. Eros eu nulla et eu integer.</p>
    <p>Suspendisse integer ornare neque metus cras. Tellus accumsan morbi. Dui iaculis scelerisque. Nostra luctus scelerisque. Pulvinar dolor volutpat. Tellus fusce lectus. Curae tristique viverra ut wisi molestie sapien pellentesque nisl magna placerat eleifend. Sem lacus quisque mi tincidunt per euismod sed magna labore elit quam. Ligula egestas arcu. Vel molestie ultricies sit sed mauris donec facilisi rhoncus lacinia vestibulum est. Convallis id diam pede egestas elementum. Sodales tempus massa pede cras fringilla. Risus bibendum dolor ex aliquam elit. Dolor fusce erat pellentesque nesciunt ligula. Erat orci est semper ligula libero suspendisse mollis praesent sit sagittis quisque id urna ornare ligula et metus. Sit amet ipsum. A a dui....

CSS

html, body {
    font-family:sans-serif;
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
.menu {
    width:200px;
    height:inherit;
    position:fixed;
    z-index:9;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    border-right:#ccc solid 1px;
    transition: width .5s;
}

.menu.narrow {
    width:25px;
}

.menu.narrow .nav {
    top:40px
}

.nav {
    list-style:none;
    margin:0;
    padding:0;
    position:relative;
    top:100px;
    text-align:center;
    transition:top .5s;
}
.nav li {
    display:block;
    padding:14px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    border-bottom:#CCC solid 1px;
    transition:font-size .5s;
}

.menu.narrow {
    height:0;
}

.menu.narrow .nav li {
    display:none;
    border:none;
    padding:0;
}

.content {
    width:100%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    position:relative;
    padding:20px;
    line-height:1.7;
    transition: all .5s;
    font-size:14px;
    padding-left:220px;
}

.content.wide {
    padding-left:45px;
}

.menu h1 {
    cursor:pointer;
    position:absolute;
    color:red;
    background:#FFF;
    width:25px;
    height:25px;
    font-size:13px;
    text-align:center;
    line-height:2;
    right:0;
    top:-7px;
}

.menu h1::before {
    content:'X';
    display:inline;
}

.menu.narrow h1::before {
    content:'O';
}
}

JavaScript

$(document).ready(function () {
    $(".click").click(function () {
        $(".menu").toggleClass('narrow');
        $(".content").toggleClass('wide');
    });
});