Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/andrewjh271/dropdown-menu
https://github.com/andrewjh271/dropdown-menu
Last synced: 16 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/andrewjh271/dropdown-menu
- Owner: andrewjh271
- Created: 2021-05-25T23:57:01.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-08-07T01:56:39.000Z (5 months ago)
- Last Synced: 2024-12-09T09:53:50.610Z (27 days ago)
- Language: JavaScript
- Size: 369 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @andrewjh271/menu v2.0.0
A responsive dropdown menu. View example usage [here](https://andrewjh271.github.io/dropdown-menu/).
### Installation
Install package:
```shell
$ npm install @andrewjh271/menu
```
Import the `menu.scss` file in your Sass manifest file:
```sass
@import "path/to/menu.scss"
```
Alternatively, reference the `menu.css` file in your html:
```html
```
### Usage
```javascript
import '@andrewjh271/menu';
```
Follow markup structure:
```html
```
### Customization
Variables in sass/menu.scss or stylesheets/menu.css
```scss
:root {
--menu-color-main: #475480;
--dropdown-color: #f0e7ff;
--dropdown-highlight: #629cf3;
--spacing-base: 9px;
--max-height: 700px;
}
```
If you are using Sass, these variables are customizable as well:
```scss
$hamburger-padding-x: 18px !default;
$hamburger-padding-y: 5px !default;
$hamburger-layer-width: 25px !default; // default = 40px
$hamburger-layer-height: 2.5px !default; // default = 4px
$hamburger-layer-color: var(--menu-color-main) !default;
```
Customize hamburger animation by changing the class name in the html. Read more [here](https://jonsuh.com/hamburgers/).
```html
```
## Author
[Andrew Hayhurst](https://github.com/andrewjh271)
## Acknowledgments
* [Hamburgers by Jonathan Suh](https://jonsuh.com/hamburgers/)
* https://webpack.js.org/
* Inspired by https://lichess.org/