Welcome to Slide Menu, a simple jQuery-based project for creating a wide color button that opens a sliding menu.
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"); } }); });
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!
This project is licensed under the MIT License.