Some more information... This time we're talking about
KINDLE MENU
I packed all relevant files in a zip file. Feel free to modify them!
1) First of all you need to add a menu template in your html page:
Code:
<script id="menuTemplate" type="text/x-jquery-tmpl">
<div class='temp-dialog'>
<div class='header'>
<div class='close'/>
<div class='title'>
${titleText}
</div>
</div>
<ul class='overlaylist'>
<li id='orientation' class='action'></li>
<li id='bookmarks' class='action'></li>
<li id='deletions' class='action'></li>
<li id='options' class='action'></li>
<li id='lastread'></li>
</ul>
</div>
</script>
This contains:
- header with title and close button
- overlaylist with all menu entry you need.
You must use an unambiguous id for every entry (here we have orientation, bookmarks, deletions, options and lastread).
If you need to make one entry non-clickable, just remove the action class.
2) Then you need to link jquery.js, jquery.tmpl.js and some other js and css files (menu.js, windowing.js and menu.css):
Code:
<script type="text/javascript" src="resource/Lib/jquery.js"></script>
<script type="text/javascript" src="resource/Lib/jquery.tmpl.js"></script>
<script language="Javascript" src="resource/Javascripts/MenuDialog/menu.js"></script>
<script language="Javascript" src="resource/Javascripts/MenuDialog/windowing.js"></script>
<link rel="stylesheet" type="text/css" href="resource/CSS/MenuDialog/menu.css" />
3) And then you need to bind the onClick event to something in order to display the menu when tapping a button/image/div:
Code:
onClick="new KomicMenu().showMenu();"/>
You can change the function name, but remember to change it also in menu.js.
4) Once you set up everything, you can now enjoy yourself altering the code in menu.js to suit your needings. You can also play with menu.css!
5) Now you just need to change the path to every file according to where you placed the those files.
Download the package here!!!
EDIT: I forgot a nice screenshot!!!