A simple drill down menu for web, ipad, iphone
Create a .html file and paste the below html code in the body location

<div id=’box’>
<div id=”menu”>
<div class=”nav”>DRILL DOWN MENU</div>
<div id=”button” class=’test’>CLICK ME</div>
<br class=”cb” />


In the .html file copy the total javascript code and place it in HEADER location.

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js” type=”text/javascript”></script>
<script type=”text/javascript”>

$(document).keypress(function(e) {
if (e.which == 27) {
$(document).click(function(event) {
if ( !$(event.target).hasClass(‘test’)) {

Create an external .css file and link it with .html file with <link> tag

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; }

Save all files and open the html file in the browser.

Leave a Reply

Some Relevent Articles

Hi, I am vara designer with over good experience in website designing and development for varadesigns. I would like to share information for the community like coding and technology. I hope this information is usefull.