Nice Sliding Hamburger Navigation With jQuery And CSS
File Size: | 5.28 KB |
---|---|
Views Total: | 2231 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A pretty nice sliding menu written in jQuery/CSS that slides out from the toggle button and transforms the hamburger button into a close button when toggled.
How to use it:
1. Insert the hamburger toggle button and menu items into the page.
<div class="menu-block"> <nav class="menu-nav"> <a class="menu-nav__link" href="#">Home</a> <a class="menu-nav__link" href="#">Portfolio</a> <a class="menu-nav__link" href="#">About</a> <a class="menu-nav__link" href="#">Contacts</a> </nav> <a href="#" class="menu-btn"> <span></span> </a> </div>
2. The main CSS/CSS3 styles for the sliding menu.
.menu-block { display: flex; justify-content: center; align-items: center; overflow: hidden; border-top-right-radius: 50px; border-bottom-right-radius: 50px; } .menu-nav { background-color: #fff; height: 50px; line-height: 50px; padding-left: 20px; padding-right: 40px; margin-right: -25px; border-top-left-radius: 50px; border-bottom-left-radius: 50px; /*--| animation |--*/ transition: 0.5s; transform-origin: right center; transform: translateX(100%); opacity: 0; } .menu-nav_active { transform: translateX(0); opacity: 1; } .menu-nav__link { display: inline-block; color: #222; margin-right: 20px; }
3. The main CSS/CSS3 styles for the hamburger toggle button.
.menu-btn { display: block; width: 50px; height: 50px; background-color: #fff; border-radius: 50%; position: relative; } .menu-btn span, .menu-btn span:before, .menu-btn span:after { position: absolute; top: 50%; margin-top: -1px; left: 50%; margin-left: -10px; width: 20px; height: 2px; background-color: #222; } .menu-btn span:before, .menu-btn span:after { content: ''; display: block; transition: 0.2s; } .menu-btn span:before { transform: translateY(-5px); } .menu-btn span:after { transform: translateY(5px); } .menu-btn_active span { height: 0; } .menu-btn_active span:before { transform: rotate(45deg); } .menu-btn_active span:after { transform: rotate(-45deg); }
4. Include the needed jQuery library at the bottom of the page.
<script src="/path/to/jquery.min.js"></script>
5. The jQuery script to activate the sliding menu.
$('.menu-btn').on('click', function(e) { e.preventDefault; $(this).toggleClass('menu-btn_active'); $('.menu-nav').toggleClass('menu-nav_active'); })
This awesome jQuery plugin is developed by LesiukO. For more Advanced Usages, please check the demo page or visit the official website.