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. --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- jquery-dice-menu, css(default) - provide default rendering --> <link rel="stylesheet" href="/node_modules/jquery-dice-menu/dist/jq.dice-menu.min.css"> <!-- // BODY --> <!-- jquery-dice-menu - put below script tag above the close tag of 'body' --> <script src="/node_modules/jquery-dice-menu/dist/jq.dice-menu.js"></script>

Construct your dice menu

<!-- Dice Menu, we use font-awesome 4 here --> <ul class="jq-dice-menu" default-open="false" layout="column" reverse="false" snap-to="right" offset="35%" show-hints="true" hints-order="footer"> 	<div class="jq-items"> 		<!-- first element as a switch button --> 		<li state="close"><span class="fa fa-th-large"></span></li> 		<!-- page anchor to paragraph 2 --> 		<li><span class="fa fa-header" href="#para2" hint="para2"></span></li> 		<!-- page anchor to paragraph 3 --> 		<li><span class="fa fa-arrows-v" href="#para3" hint="para3"></span></li> 		<!-- open a page in a new window --> 		<li><span class="fa fa-google-plus" href="https://plus.google.com/discover" target="_blank" hint="Google Plus"></span></li> 		<!-- open a page in current window --> 		<li><span class="fa fa-github" href="https://github.com" hint="Github"></span></li> 		<!-- page link without hint --> 		<li><span class="fa fa-yahoo" href="https://hk.yahoo.com"></span></li> 		<!-- link to phone number --> 		<li><span class="fa fa-phone" href="tel:+85299887766" hint="Call to hotline"></span></li> 		<!-- link to email address --> 		<li><span class="fa fa-envelope" href="mailto:[email protected]" hint="Email for support"></span></li> 		<!-- page anchor to the top of the page --> 		<li><span class="fa fa-angle-double-up" href="#top"></span></li> 	</div> 	<!-- hints of button --> 	<div class="jq-hints"> 		<div class="hint">&nbsp;</div> 	</div> </ul>

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 -g cd /project_root && lite-server

Customization