In my previous post I covered a basic example of using CSS Media Queries to create a slick left menu to auto hide when the screen is smaller than 500px. This post I want to take that a step further.

Lets say we want to show the navigation on landscape orientation with the ipad, but hide on portrait orientation. On top of that if the device is smaller than 480px lets hide as well. This should include the iPhone. Lets be honest, there is only so much space on a phone.

We start out with the same html layout as the previous post:

<!DOCTYPE html>
<html>
	<head>
		<title>Advanced CSS Media Query</title>
		<link rel="stylesheet" href="advanced.css" />
		<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$('#nav').bind('touchend', function(){
					$t = $(this);
					if($t.hasClass('focus'))
						$t.removeClass('focus');
					else $t.addClass('focus');
				});
			});
		</script>
	</head>

	<body>

		<div id="wrapper">

			<div id="nav">
				<ul>
					<li><a href="#" title="Link">Link to Home</a></li>
					<li><a href="#" title="Link">Link to There</a></li>
					<li><a href="#" title="Link">Link to Here</a></li>

					<li><a href="#" title="Link">Link to This</a></li>
				</ul>
			</div>

			<div id="content">
				<h1>This is the Title</h1>

				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

				<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
				<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
				<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

				<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
				<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
				<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</div>

		</div>

	</body>
</html>

You’ll notice I added a bit of javascript. We’ll cover that in a moment. Now for the CSS:

@charset "UTF-8";

/*
*    Mass Reset
*/
*{ margin: 0; padding: 0; border: 0; }
body{ background-color: #f4fff4; font: normal 1em/1.5em Arial, Serif; }

/*
*    Normal layout
*/
#wrapper{  }
#wrapper #nav{ width: 160px; float: left; background-color: #eeeeee; border-right: solid 20px #aaa; height: 100%; position: fixed; z-index: 1000; }
#wrapper #content{ margin-left: 180px; padding: 10px 20px; position: relative; z-index: 100; }

#wrapper #nav ul{ list-style: none; }
#wrapper #nav ul li a{ display: block; padding: 8px 5px 8px 10px; border-bottom: solid 1px #aaa; color: #548f54; text-decoration: none; }
#wrapper #content h1,
#wrapper #content p{ margin: 5px 0; }

/*
*    When screen is smaller than 480px or portrait
*/
@media (orientation:portrait), (max-device-width:480px), (max-width:480px){
		
	#wrapper #nav{ margin: 0 0 0 -160px; opacity: 0.95; }
	#wrapper #content{ margin-left: 20px; }

	#wrapper #nav:hover,
	#wrapper #nav:focus,
	#wrapper #nav.focus{
		margin: 0 -160px 0 0;

		-moz-transition-property: margin;
		-moz-transition-duration: 1s;
		-moz-transition-timing-function: ease-out;
		-webkit-transition-property: margin;
		-webkit-transition-duration: 1s;
		-o-transition-property: margin;
		-o-transition-duration: 1s;
	} 
} 

Now, we know we have a couple scenarios to consider, orientation: portrait and max-width: 480px. So as you can see I listed those conditions in my @media. Pretty straight forward addition to the basic example.

Ok, so now you’re wondering about that javascript…

$(function(){
	$('#nav').bind('touchend', function(){
		$t = $(this);
		if($t.hasClass('focus'))
			$t.removeClass('focus');
		else $t.addClass('focus');
	});
});

Unfortunately for many touch screen phones these days there is no mouse, so being able to fire the “hover” in the css is impossible. So we are simply going to add a class “focus” to the nav on the “touchend” event, where when you touch the #nav handle the menu will slide out. (if you notice we added the .focus class also in the CSS along with the “:hover” pseudoselector)

Thats all there is to it. You should now have a fully working navigation menu that slides out and hides on certain orientations or screen widths. And as always I’ve provided the working example.