jquery-dice-menu
Expandable and Fixed location side menu bar.
History
It's a big challenge for the website navigation on mobile which is limited and ralatively small screen size and tapped by finger.
jquery-dice-menu targets on maxmize the screen usage by collapsing the menu to a small size dice and can be expanded to a full menu bar on demand.
Features
By supporting the optional attributes, you can customize the menu by:
1. Layout (Default: column)
Menu items will be arranged on a row or column.
2. Reverse Order (Default: false)
Menu items can be arranged in reverse order.
3. Location (Default: right)
Menu can be sticked on top, right, bottom or left.
4. Offset (Default: 35%)
If the menu is sticked on left/right, then the offset is used in the top: ?(px|%). Otherwise, it's left: ?(px|%)
5. Hints (Default: true)
Hints can be enabled or disabled.
6. Hints Order (Default: bottom)
The location of the hints.
7. Menu toggle status (Default: false)
Is the menu opened by default?
Demonstration on CodePen
https://codepen.io/ssmak/pen/jKMaeV
Installation + Use
- Install to your project as dependency from NPM (https://www.npmjs.com/package/jquery-dice-menu)
npm install jquery-dice-menu --save
- Load the dependency
<!-- // HEAD --><!-- put below stylesheets between the 'head' tag in below order --><!-- font awesome 4 - optional, but I use it in my test page. --><!-- jquery-dice-menu, css(default) - provide default rendering --><!-- // BODY --><!-- jquery-dice-menu - put below script tag above the close tag of 'body' -->
- Construct your dice menu
<!-- Dice Menu, we use font-awesome 4 here --><!-- first element as a switch button --><!-- page anchor to paragraph 2 --><!-- page anchor to paragraph 3 --><!-- open a page in a new window --><!-- open a page in current window --><!-- page link without hint --><!-- link to phone number --><!-- link to email address --><!-- page anchor to the top of the page --><!-- hints of button -->
Test
A demo page is located in the /test folder. You can test it with the live reload by using lite-server which can be installed by
npm install lite-server -gcd /project_root && lite-server
Customization
By supporting the optional attributes, you can customize the menu by:
1. Layout (Default: column, Supported: row | column)
Menu items will be arranged on a row or column.
2. Reverse Order (Default: false, Supported: true | false)
Menu items can be arranged in reverse order.
3. Location (Default: right, Supported: top | right | bottom | left)
Menu can be sticked on top, right, bottom or left.
4. Offset (Default: 35%, Supported: ?px | ?%)
If the menu is sticked on left/right, then the offset is used in the top: ?(px|%). Otherwise, it's left: ?(px|%)
5. Hints (Default: true, Supported: true | false)
Hints can be enabled or disabled.
6. Hints Order (Default: footer, Supported: header | footer)
The location of the hints.
7. Menu toggle status (Default: false, Supported: true | false)
Is the menu opened by default?
License
MIT