<style>
.iphone {width:420px; height:808px; background:url(iphone.png); margin:0 auto; position:relative;}
.screen {width:320px; height:467px; position:absolute; left:30px; top:169px; background:#111; overflow:hidden;}
.cover {width:320px; height:467px; position:absolute; left:0; top:0; background:url(back.jpg); z-index:100;}
.page {width:300px; padding:10px; height:467px; background:#ffc; box-shadow: -5px 0 5px rgba(0,0,0,0.7);
-webkit-transition:0.5s;
-o-transition:0.5s;
transition:0.5s;
}
.page h4 {font:700 20px/40px 'Noto Sans', arial, sans-serif; text-align:center; padding:0; margin:0; color:#000;}
.page p { font:400 14px/20px 'Noto Sans', arial, sans-serif; padding:5px 0; margin:0; color:#000;}
input.hidden {display:none;}
.menuTrigger {width:30px; height:15px; border-top:5px solid #000; border-bottom:5px solid #000; position:relative;}
.menuTrigger:before {content:""; display:block; width:30px; height:5px; background:#000; position:absolute; left:0; top:5px;}
.menuTrigger:after {content:""; display:block; width:30px; height:5px; background:#000; position:absolute; left:0; top:5px;}
.menuTrigger label {display:block; width:30px; height:25px; background:url(trans.gif); position:absolute; left:0; top:-5px; cursor:pointer; z-index:100;
-webkit-tap-highlight-color:rgba(0,0,0,0);
tap-highlight-color:rgba(0,0,0,0);
}
.menuTrigger label span {position:absolute; left:-9999px;}
.menu {width:250px; height:467px; position:absolute; left:0; top:0; z-index:-1;}
#menuopen:checked ~ .cover .page {margin-left:240px;}
#menuopen:checked ~ .cover .page .menuTrigger .topopen {display:none;}
.menu ul {position:absolute; left:250px; top:0; padding:0; margin:0; list-style:none; opacity:0.25;
-webkit-transition:0.5s;
-o-transition:0.5s;
transition:0.5s;
}
.menu ul.sub1 {left:0; opacity:1;}
.menu ul label {display:block; color:#ddd; width:220px; padding-left:30px; font:400 14px/30px 'Noto Sans', arial, sans-serif; 
cursor:pointer; border-bottom:1px solid #000;}
.menu ul label.right {background: #121 url(right-arrow.png) no-repeat 210px center; border-top:1px solid #242;}
.menu ul label.left {background: #024 url(left-arrow.png) no-repeat 5px center; border-top:1px solid #248;}
.menu ul a {display:block; color:#ddd; width:220px; padding-left:30px; outline:0; text-decoration:none;
font:400 14px/30px 'Noto Sans', arial, sans-serif; background:#333; border-top:1px solid #666; border-bottom:1px solid #000;}
.menu ul label:hover {color:#fff;}
.menu ul a:hover {color:#fff;}
#sub2-1open:checked ~ .sub1 {margin-left:-250px; opacity:0.25;}
#sub2-1open:checked ~ .sub2.pos1 {left:0px; opacity:1;}
#sub2-2open:checked ~ .sub1 {margin-left:-250px; opacity:0.25;}
#sub2-2open:checked ~ .sub2.pos2 {left:0px; opacity:1;}
#sub2-3open:checked ~ .sub1 {margin-left:-250px; opacity:0.25;}
#sub2-3open:checked ~ .sub2.pos3 {left:0px; opacity:1;}
#sub2-4open:checked ~ .sub1 {margin-left:-250px; opacity:0.25;}
#sub2-4open:checked ~ .sub2.pos4 {left:0px; opacity:1;}
#sub3-1open:checked ~ .sub1 {margin-left:-250px; opacity:0.25;}
#sub3-1open:checked ~ .sub2.pos2 {left:-250px; opacity:0.25;}
#sub3-1open:checked ~ .sub3.pos1 {left:0px; opacity:1;}
#sub3-2open:checked ~ .sub1 {margin-left:-250px; opacity:0.25;}
#sub3-2open:checked ~ .sub2.pos2 {left:-250px; opacity:0.25;}
#sub3-2open:checked ~ .sub3.pos2 {left:0px; opacity:1;}
#sub3-3open:checked ~ .sub1 {margin-left:-250px; opacity:0.25;}
#sub3-3open:checked ~ .sub2.pos2 {left:-250px; opacity:0.25;}
#sub3-3open:checked ~ .sub3.pos3 {left:0px; opacity:1;}
#sub3-4open:checked ~ .sub1 {margin-left:-250px; opacity:0.25;}
#sub3-4open:checked ~ .sub2.pos4 {left:-250px; opacity:0.25;}
#sub3-4open:checked ~ .sub3.pos4 {left:0px; opacity:1;}
#sub3-5open:checked ~ .sub1 {margin-left:-250px; opacity:0.25;}
#sub3-5open:checked ~ .sub2.pos4 {left:-250px; opacity:0.25;}
#sub3-5open:checked ~ .sub3.pos5 {left:0px; opacity:1;}
#sub4-1open:checked ~ .sub1 {margin-left:-250px; opacity:0.25;}
#sub4-1open:checked ~ .sub3.pos1 {left:-250px; opacity:0.25;}
#sub4-1open:checked ~ .sub4.pos1 {left:0px; opacity:1;}
#sub4-2open:checked ~ .sub1 {margin-left:-250px; opacity:0.25;}
#sub4-2open:checked ~ .sub3.pos4 {left:-250px; opacity:0.25;}
#sub4-2open:checked ~ .sub4.pos2 {left:0px; opacity:1;}
</style>
<div class ="iphone">
    <div class ="screen" onclick="">
	   <input checked="checked" class ="hidden" name="menu" id="menuclose" type="radio">
	   <input class ="hidden" name="menu" id="menuopen" type="radio">
	   <div class ="cover">
		  <div class ="page">
			 <h4>Smartphone Mini-Menu</h4>
			 <br>
			 <div class ="menuTrigger">
				<label class ="topclose" for="menuclose"><span>Close</span></label>
				<label class ="topopen" for="menuopen"><span>Open</span></label>
			 </div>
			 <div class ="menu">
				<input class ="hidden" name="m2" id="sub2-1open" type="radio">
				<input checked="checked" class ="hidden" name="m2" id="sub2-1close" type="radio">
				<input class ="hidden" name="m2" id="sub2-2open" type="radio">
				<input class ="hidden" name="m2" id="sub2-2close" type="radio">
				<input class ="hidden" name="m2" id="sub2-3open" type="radio">
				<input class ="hidden" name="m2" id="sub2-3close" type="radio">
				<input class ="hidden" name="m2" id="sub2-4open" type="radio">
				<input class ="hidden" name="m2" id="sub2-4close" type="radio">

				<input class ="hidden" name="m3" id="sub3-1open" type="radio">
				<input class ="hidden" name="m3" id="sub3-1close" type="radio">
				<input class ="hidden" name="m3" id="sub3-2open" type="radio">
				<input class ="hidden" name="m3" id="sub3-2close" type="radio">
				<input class ="hidden" name="m3" id="sub3-3open" type="radio">
				<input class ="hidden" name="m3" id="sub3-3close" type="radio">
				<input class ="hidden" name="m3" id="sub3-4open" type="radio">
				<input class ="hidden" name="m3" id="sub3-4close" type="radio">
				<input class ="hidden" name="m3" id="sub3-5open" type="radio">
				<input class ="hidden" name="m3" id="sub3-5close" type="radio">

				<input class ="hidden" name="m4" id="sub4-1open" type="radio">
				<input class ="hidden" name="m4" id="sub4-1close" type="radio">
				<input class ="hidden" name="m4" id="sub4-2open" type="radio">
				<input class ="hidden" name="m4" id="sub4-2close" type="radio">

				<ul class ="sub1">
				    <li><a href="#">Home</a></li>
				    <li><label class ="right" for="sub2-1open">Contact Us</label></li>
				    <li><label class ="right" for="sub2-2open">Resort</label></li>
				    <li><label class ="right" for="sub2-3open">Surrounding Area</label></li>
				    <li><label class ="right" for="sub2-4open">Information</label></li>
				    <li><a href="#">Privacy</a></li>
				</ul>

				    <ul class ="sub2 pos1">
					   <li><label class ="left" for="sub2-1close">Contact Us</label></li>
					   <li><a href="#">Email</a></li>
					   <li><a href="#">Telephone</a></li>
					   <li><a href="#">Online Form</a></li>
					   <li><a href="#">Snail Mail Address</a></li>
				    </ul>

				    <ul class ="sub2 pos2">
					   <li><label class ="left" for="sub2-2close">Resort</label></li>
					   <li><a href="#">Ski Hire Facilities</a></li>
					   <li><label class ="right" for="sub3-1open">Main Ski Slopes</label></li>
					   <li><a href="#">Night Life</a></li>
					   <li><label class ="right" for="sub3-2open">Restaurants</label></li>
					   <li><label class ="right" for="sub3-3open">Car Hire</label></li>
				    </ul>
					   <ul class ="sub3 pos1">
						  <li><label class ="left" for="sub3-1close">Main Ski Slopes</label></li>
						  <li><a href="#">Beginners Slopes</a></li>
						  <li><a href="#">Intermediate Slopes</a></li>
						  <li><label class ="right" for="sub4-1open">Advanced Skill Levels</label>
						  </li><li><a href="#">Expert</a></li>
					   </ul>
						  <ul class ="sub4 pos1">
						  <li><label class ="left" for="sub4-1close">Advanced Skill Levels</label></li>
						  <li><a href="#">Local</a></li>
						  <li><a href="#">Nearby</a></li>
						  <li><a href="#">With instructor</a></li>
						  <li><a href="#">Snow boarding</a></li>
						  </ul>
					   <ul class ="sub3 pos2">
						  <li><label class ="left" for="sub3-2close">Restaurants</label></li>
						  <li><a href="#">Snow Hotel</a></li>
						  <li><a href="#">The Snowman</a></li>
						  <li><a href="#">Ice Cavern</a></li>
						  <li><a href="#">Ski Inn</a></li>
					   </ul>
					   <ul class ="sub3 pos3">
						  <li><label class ="left" for="sub3-3close">Car Hire</label></li>
						  <li><a href="#">From Airport</a></li>
						  <li><a href="#">In Resort</a></li>
						  <li><a href="#">Multiple Resorts</a></li>
					   </ul>


				    <ul class ="sub2 pos3">
					   <li><label class ="left" for="sub2-3close">Surrounding Area</label></li>
					   <li><a href="#">Where to go</a></li>
					   <li><a href="#">What to do</a></li>
					   <li><a href="#">Places of interest</a></li>
					   <li><a href="#">National parks &amp; Museums</a></li>
				    </ul>

				    <ul class ="sub2 pos4">
					   <li><label class ="left" for="sub2-4close">Information</label></li>
					   <li><a href="#">Money Exchange</a></li>
					   <li><label class ="right" for="sub3-4open">Resort Information</label></li>
					   <li><label class ="right" for="sub3-5open">Language</label>
					   </li><li><a href="#">Short Breaks</a></li>
				    </ul>
					   <ul class ="sub3 pos4">
						  <li><label class ="left" for="sub3-4close">Resort Information</label></li>
						  <li><a href="#">Lift Passes</a></li>
						  <li><a href="#">Insurance</a></li>
						  <li><label class ="right" for="sub4-2open">Gear Rental</label>
						  </li><li><a href="#">Ski Schools</a></li>
						  <li><a href="#">Snow Report</a></li>
					   </ul>
						  <ul class ="sub4 pos2">
							 <li><label class ="left" for="sub4-2close">Gear Rental</label></li>
							 <li><a href="#">Boots</a></li>
							 <li><a href="#">Skis</a></li>
							 <li><a href="#">Ski Wear</a></li>
							 <li><a href="#">Goggles</a></li>
						  </ul>
					   <ul class ="sub3 pos5">
						  <li><label class ="left" for="sub3-5close">Language</label></li>
						  <li><a href="#">Austrian</a></li>
						  <li><a href="#">German</a></li>
						  <li><a href="#">French</a></li>
						  <li><a href="#">English</a></li>
					   </ul>
			 </div>
		  <br>
		  <p>This is a slide-in, multi-level menu suitable for smartphones as well as tablets and widescreen monitors.</p>
		  <p>Just 'click / tap' the three bar menu icon above to slide this 
page right and reveal the top level of the multi-level menu beneath.</p>
		  <p>The menu is then self explanatory, just 'click / tap' the 
selections with arrows to slide forwards and backwards through the 
various levels.</p>
		  <p>Click the three bar menu icon again to close the menu and slide the top panel left again.</p>
		  <p>All done using just CSS3, no jQuery / javascript.</p>
		  </div>
	   </div>
    </div>
</div>