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

1. Install to your project as dependency from NPM (https://www.npmjs.com/package/jquery-dice-menu)

npm install jquery-dice-menu --save

2. 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>

3. 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

By supporting the optional attributes, you can customize the menu by:

<ul class="jq-dice-menu" default-open="false" layout="column" reverse="false" snap-to="right" offset="35%" show-hints="true" hints-order="footer"></ul>

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