Menu Slide-In from Left

Menu Slide-In from Left

by Nirvanachain

HTML

<div class="container">
    <nav>
        <div><a href="#">Home</a></div>
        <div><a href="#">About</a></div>
        <div><a href="#">Blog</a></div>
    </nav>
    <section>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ornare scelerisque mi, vel rhoncus lorem gravida id. Donec laoreet dolor lorem, et pretium tellus dictum feugiat. Pellentesque auctor, dolor at facilisis varius, enim tortor iaculis leo, non viverra lorem magna ut lorem. Aliquam sit amet tristique mauris, vitae imperdiet turpis. Ut sagittis id libero ut scelerisque. Vestibulum vitae urna interdum, pretium justo nec, elementum risus. Proin mollis urna quis pulvinar luctus. Sed sed mauris aliquet, semper dui vitae, placerat orci. Maecenas ullamcorper urna et elit rutrum venenatis. In congue magna eget tortor tincidunt, id pharetra felis eleifend. Sed interdum mauris id turpis dapibus adipiscing. Nunc nec ligula id nisi mattis blandit. Aliquam varius purus diam, viverra rhoncus sem dignissim a. Pellentesque et tincidunt risus. Curabitur eu interdum velit.</p>
    
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ornare scelerisque mi, vel rhoncus lorem gravida id. Donec laoreet dolor lorem, et pretium tellus dictum feugiat. Pellentesque auctor, dolor at facilisis varius, enim tortor iaculis leo, non viverra lorem magna ut lorem. Aliquam sit amet tristique mauris, vitae imperdiet turpis. Ut sagittis id libero ut scelerisque. Vestibulum vitae urna interdum, pretium justo nec, elementum risus. Proin mollis urna quis pulvinar luctus. Sed sed mauris aliquet, semper dui vitae, placerat orci. Maecenas ullamcorper urna et elit rutrum venenatis. In congue magna eget tortor tincidunt, id pharetra felis eleifend. Sed interdum mauris id turpis dapibus adipiscing. Nunc nec ligula id nisi mattis blandit. Aliquam varius purus diam, viverra rhoncus sem dignissim a. Pellentesque et tincidunt risus. Curabitur eu interdum velit.</p>
    </section>
</div>

CSS

body { padding: 1em; }
p:first-child { margin-top: 0; }

nav {
    background-color: #ececec;
    position: absolute;
    top: 0;
    left: -78px;
    height: 100%;
    border-left: 1px solid #000000;
    border-right: 10px solid #000000;
    transition: all 1s linear;
}

nav:after {
    display: block;
    content: 'Menu';
    width: auto;
    height: 20px;
    background-color: #FF0000;
    padding: 0.1em;
    
    position: absolute;
    top: 0;
    right: -47px;
}

nav:hover {
    left: 0;
}

nav > div {
   padding: 1em;
   border-top: 1px solid #000000;
   border-bottom: 1px solid #000000;
   transition: background-color 1s ease; 
}

nav > div:hover { background-color: #090909; }
nav > div:hover a { color: #FFFFFF; }

section { width: 100%; }