Mobile-menu NPM

Omnispear Mobile Menu

This project was built by Omnispear.

Include Using npm

npm install mobile-menu

Include Basic Files

Add necessary js files to project before the closing </body> tag.

<script src="js/mobile-menu.js"></script>

Add CSS to project in the <head> section.

<link rel="stylesheet" type="text/css" href="css/style.css">

Basic Markup

Include this markup in the header of your site. This is the basic content for the Menu, including a dropdown and the hamburger button. Be sure that all of your site content that you want to be pushed when the menu opens is included inside the .content-wrapper div.

<body class="open-right">

    <ul class="omni-mobile-menu">
        <li><a href="#">Home</a></li>
        <li>
            <a class="omni-dropdown-toggle">Dropdown</a>
            <ul class="omni-dropdown-menu">
                <li><a href="#">Sub Item</a></li>
                <li><a href="#">Another Sub Item</a></li>
                <li><a href="#">Last Sub Item</a></li>
            </ul>
        </li>
        <li><a href="#">About</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contact</a></li>
    </ul><!-- omni-mobile-menu -->

    <div class="toggle-btn">
        <div class="hamburger-icon">
            <svg class="hamburger" viewBox="0 0 100 100" id="hamburger">
                <path class="line top" d="m 30,33 h 40 c 3.722839,0 7.5,3.126468 7.5,8.578427 0,5.451959 -2.727029,8.421573 -7.5,8.421573 h -20" />
                <path class="line middle" d="m 30,50 h 40" />
                <path class="line bottom" d="m 70,67 h -40 c 0,0 -7.5,-0.802118 -7.5,-8.365747 0,-7.563629 7.5,-8.634253 7.5,-8.634253 h 20" />
            </svg>
        </div>
    </div>

    <div class="content-wrapper">
        <!--Place Site Content Here-->
    </div><!-- content-wrapper -->
</body>