Slidey

The dead-simple slide-in navigation drawer


A dead-simple slide-in navigation drawer for websites, built using CSS and triggered using Javascript. Meant to only have one instance per page.

Demo

Features

Usage

Include the CSS in head:

    <link rel="stylesheet" href="Slidey.css">
        

Include JS after jQuery:

    <!-- Include jQuery here -->
    <script src="Slidey.js"></script>
        

Put this markup anywhere in the body (usually first thing in the body):

    <nav class="slidey slidey--right slidey--styled">
        <a href="#" class="slidey__brand">Brand Name</a> <!-- Optional -->
        <a href="#">Menu Item 1</a>
        <a href="#">Menu Item 2</a>
        <a href="#">Menu Item 3</a>
        <a href="#">Menu Item 4</a>
        <a href="#">Menu Item 5</a>

        <div class="slidey__toggle"></div> <!-- Optional -->
        <div class="slidey__close"></div> <!-- Optional -->
    </nav>
        

Some notes about how to use the classes

Dependencies

Compatibility