https://github.com/biasiolo/slide-menu
Welcome to Slide Menu, a simple jQuery-based project for creating a wide color button that opens a sliding menu.
https://github.com/biasiolo/slide-menu
button-animation css javascript jquery slide slide-menu ui-design ux-design wide-button
Last synced: 2 months ago
JSON representation
Welcome to Slide Menu, a simple jQuery-based project for creating a wide color button that opens a sliding menu.
- Host: GitHub
- URL: https://github.com/biasiolo/slide-menu
- Owner: Biasiolo
- Created: 2024-01-10T02:02:10.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-01-10T02:32:45.000Z (over 1 year ago)
- Last Synced: 2025-03-23T11:19:17.362Z (3 months ago)
- Topics: button-animation, css, javascript, jquery, slide, slide-menu, ui-design, ux-design, wide-button
- Language: CSS
- Homepage: https://slide-menu-orcin.vercel.app/
- Size: 5.86 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
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:
1. Include jQuery in your HTML:
```html
```
2. Add the CSS and JavaScript files:
```html
```
3. Create a button with the class `fifth`:
```html
Open Menu
```
4. Add left and right modals with your desired content:
```html
```
5. Customize the styles in `styles.css` to fit your project's design.
6. Initialize the Slide Menu:
```javascript
$(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` and `modal 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](LICENSE).