A simple drill down menu for web, ipad, iphone
Create a .html file and paste the below html code in the body location
HTML CODE
<body>
<div id=’box’>
<div id=”menu”>
<div class=”nav”>DRILL DOWN MENU</div>
</div>
<div id=”button” class=’test’>CLICK ME</div>
<br class=”cb” />
</div> </body>
In the .html file copy the total javascript code and place it in HEADER location.
JAVA SCRIPT CODE
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js” type=”text/javascript”></script>
<script type=”text/javascript”>
$(function(){
$(‘#menu’).hide();
$(‘#button’).click(function(){
$(‘#menu’).slideToggle();
}); });
$(document).keypress(function(e) {
if (e.which == 27) {
$(‘#menu’).slideUp();
}
});
$(document).click(function(event) {
if ( !$(event.target).hasClass(‘test’)) {
$(‘#menu’).slideUp();
}
});
</script>
Create an external .css file and link it with .html file with <link> tag
CSS CODE
Read More
