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.
By supporting the optional attributes, you can customize the menu by:
Menu items will be arranged on a row or column.
Menu items can be arranged in reverse order.
Menu can be sticked on top, right, bottom or left.
If the menu is sticked on left/right, then the offset is used in the top: ?(px|%). Otherwise, it's left: ?(px|%)
Hints can be enabled or disabled.
The location of the hints.
Is the menu opened by default?
https://codepen.io/ssmak/pen/jKMaeV
- 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"> </div>
</div>
</ul>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-serverBy 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>Menu items will be arranged on a row or column.
Menu items can be arranged in reverse order.
Menu can be sticked on top, right, bottom or left.
If the menu is sticked on left/right, then the offset is used in the top: ?(px|%). Otherwise, it's left: ?(px|%)
Hints can be enabled or disabled.
The location of the hints.
Is the menu opened by default?
MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent