Expandable and Fixed location side menu bar.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
src
test
.babelrc
.gitattributes
.gitignore
LICENSE
README.md
demo.html
gulpfile.js
package-lock.json
package.json

README.md

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

  1. Install to your project as dependency from NPM (https://www.npmjs.com/package/jquery-dice-menu)
npm install jquery-dice-menu --save
  1. 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>
  1. 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:donotreply@github.com" 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