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>
<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();
});
<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
body {margin:0; padding:0; background:#e0e0e0; }
.cb {clear:both}
.nav {font-size:2em; width:100%; padding:10px 0; color:#fff }
#box{ width: auto; }
#menu{ width: 100%; height: 45px; background-color:#464646; }
#button{ margin: 0 auto; width: 100px; padding:10px 20px; color:#fff; background-color: #900607; text-align:center; text-transform:uppercase;
font-family:Verdana, Geneva, sans-serif; font-size:11px; line-height:4px; }
#button:hover {background:#F90; border:2px solid #900607; letter-spacing:.2em; }
.cb {clear:both}
.nav {font-size:2em; width:100%; padding:10px 0; color:#fff }
#box{ width: auto; }
#menu{ width: 100%; height: 45px; background-color:#464646; }
#button{ margin: 0 auto; width: 100px; padding:10px 20px; color:#fff; background-color: #900607; text-align:center; text-transform:uppercase;
font-family:Verdana, Geneva, sans-serif; font-size:11px; line-height:4px; }
#button:hover {background:#F90; border:2px solid #900607; letter-spacing:.2em; }
Save all files and open the html file in the browser.
prasadnti
prasadnti@gmail.com