A First Example

Contact Us or call 1-877-932-8228
A First Example

A First Example

CSS media queries will be, of course, at the center of our work here: we can detect features of our visitor's devices - viewport width in particular. We already present the menu on our Jazz Calendar site differently for mobile users: a CSS media-query rule

@media screen and (max-device-width: 480px) {
	nav ul li a {
		display:block;
		padding:4% 0;
		border-bottom:1px solid #000;
	}
}

displays navigation vertically with borders for folks coming to our site from a device with max viewport width of 480 pixels:

Mobile Jazz Calendar Menu

By sprinkling in a bit of jQuery code and updating our CSS slightly, we can present users with the toggle menu icon, hiding the navigation initially but allowing users to tap to see the nav. We do so in the next example.

Code Sample:

MobileMenus/Demos/jazzresponsivemenu/index.html

Code Explanation:

Open MobileMenus/Demos/jazzresponsivemenu/index.html in a mobile browser and in a code editor to view the code. Also open the associated CSS file, MobileMenus/Demos/jazzresponsivemenu/css/style.css, in a code editor.

Users who visit this page from a phone initially see the navigation element hidden:

Hidden Navigation Element

Tapping the menu icon toggles the navigation, pushing the other content down:

Toggled Navigation

Conveniently, there exists an HTML character, ☰, that gives exactly the three-horizontal-bars icon we want here. Of course, we could have used a small graphic for this instead.

We use some CSS to style the menu icon and to hide the navigation for small viewports:

#mobilemenutoggle {
	display:none;
	text-decoration: none;
	color:#fff;
	font-size:22px;
}

#mobilemenutoggle span {
	font-size:14px;
}

@media screen and (max-device-width: 480px) {
	#mobilemenutoggle {
		display:block;
	}
	nav ul {
		display:none;
	}
	nav ul li a {
		display:block;
		padding:4% 0;
		border-bottom:1px solid #000;
	}
}

The #mobilemenutoggle link is hidden for large viewports (greater than 480 pixels) and, via the media query, displayed for smaller viewports. We use the same media query to hide the unordered list contained within the nav element.

We use jQuery (just jQuery, that is, not jQuery Mobile) code to handle click events on the #mobilemenutoggle link: users who tap the "menu" icon trigger the click method which, in turn, toggles the visibility of the unordered list inside of the nav element. jQuery's toggle does exactly what we want: each successive tap hides or shows the navigation element.

Next