Expanding menu using images - css

Question

I wan't to make a special menu for the iPad version of my website.
It should work like this:
http://itu.dk/people/mbul/humlum/images/ipad_menu.png
Click on IMG 1 and the menu expands (to IMG 2) and the links gets visible. When you click outside IMG 2 it disappears along with the links so only IMG 1 is visible.
I've come this far but it doesn't really do the trick:
<div class="nav_mobile_container">
<div class="nav_mobile_elements">
<div class="nav_mobile"></div>
</div>
</div>
div.nav_mobile_container{
position: fixed;
top: 0px;
left: 0px;
}
div.nav_mobile_elements{
display: inline-block;
}
div.nav_mobile_elements a{
vertical-align: top;
display: inline-block;}
div.nav_bookmark:hover{
display: inline-block;
}
.nav_mobile{
width:70px;
height:70px;
background-image:url('images/menu_small.png');
display: inline-block;
}
.nav_mobile:hover{
width:496px;
height:500px;
background-image:url('images/menu_small_expanded.png');
}
I would really appreciate a CSS solution on this if possible.
Thank you!

Answer 1

The closest you can get is
#nav_mobile:active {
width:496px;
height:500px;
background-image:url('images/menu_small_expanded.png');
}
But that does not work on an ipad.
I recommend to use a bit of javascript.
Create an onclick event that displays a div with all the navigation information you need.
With jquery:
$("#small_navigation").click(function(){
$("#big_navigation").show();
});
The css:
#big_navigation {
display: none;
width: ...
height: ...
etc...
}

Answer 2

You will need javascript for this. Using jQuery, this is how you could make it :
First, don't set an :hover in your CSS, but just make a class that you will add on click :
.nav_mobile.navopen {
width:496px;
height:500px;
background-image:url('images/menu_small_expanded.png');
}
And then a bit of jQuery to make it work :
$(document).ready(function(){
// expend the menu on click
$('.nav_mobile').on('click', function(event){
event.stopPropagation();
$(this).addClass('navopen');
});
// close menu on click outside the menu
$('html').click(function() {
$('.nav_mobile').removeClass('navopen');
});
});
The jsFiddle demo
Edit : with pure javascript
window.onload = function() {
var menu = document.getElementsByClassName('nav_mobile')[0];
menu.onclick=function(e){
e.stopPropagation();
menu.className = "nav_mobile navopen";
};
var html = document.getElementsByTagName('html')[0];
html.onclick=function(){
menu.className = "nav_mobile";
};
};