slide-menu-jquery
v1.0.1
Published
Welcome to Slide Menu, a simple jQuery-based project for creating a wide color button that opens a sliding menu.
Downloads
8
Maintainers
Readme
Slide Menu
Welcome to Slide Menu, a simple jQuery-based project for creating a wide color button that opens a sliding menu.
Getting Started
To use Slide Menu in your project, follow these steps:
Include jQuery in your HTML:
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
Add the CSS and JavaScript files:
<link rel="stylesheet" href="styles.css"> <script src="script.js"></script>
Create a button with the class
fifth
:<button class="fifth">Open Menu</button>
Add left and right modals with your desired content:
<div class="modal left"> <!-- Left Modal Content --> </div> <div class="modal right"> <!-- Right Modal Content --> </div>
Customize the styles in
styles.css
to fit your project's design.Initialize the Slide Menu:
$(document).ready(function() { $(".fifth").click(function() { $(".modal.left").toggleClass("show-left"); $(".modal.right").toggleClass("show-right"); }); $(document).mouseup(function(e) { var modal = $(".modal"); if (!modal.is(e.target) && modal.has(e.target).length === 0) { modal.removeClass("show-left show-right"); } }); });
Options
fifth
: The button class to trigger the sliding menu.modal left
andmodal right
: Classes for left and right modals, respectively.
Feel free to explore and customize the project to suit your needs!
License
This project is licensed under the MIT License.