Mobile Menu for Pickup Soccer - Exercise

Contact Us or call 1-877-932-8228
Mobile Menu for Pickup Soccer - Exercise

Mobile Menu for Pickup Soccer

Duration: 15 to 25 minutes.

In this exercise, you will add use the Slicknav jQuery plugin to configure a mobile menu for the Pickup Soccer site:

Pickup Soccer Site

  1. Open MobileMenus/Exercises/soccerslicknav.html and MobileMenus/Exercises/css/style.css in a code editor.
  2. Download from https://github.com/ComputerWolf/SlickNav the needed JavaScript and CSS files.
  3. Add Slicknav JavaScript and CSS files to soccerslicknav.html.
  4. Add jQuery to soccerslicknav.html
  5. Add jQuery code to soccerslicknav.html to call Slicknav on the appropriate menu. You may want to attach the menu to an element other than the default body element.
  6. Update style.css to show and hide menus as appropriate for desktop and mobile browsers. You may also want to update the look of the Slicknav menu: try changing the background color or other aspects of the menu.
  7. Test your work in both a desktop and mobile browser.

Solution:

MobileMenus/Solutions/soccerslicknav.html



	Soccer Pickup
	
	
	
	
	
	
	



	

Upcoming Games

Barry Park

Sundays, around 2pm; near the back of the largest field

Lakeside Park

Sundays, around 2pm; near the back of the largest field

Schiller Elementary School

Sundays, around 2pm; near the back of the largest field

Central High

Sundays, around 2pm; near the back of the largest field

Adams Park

Sundays, around 2pm; near the back of the largest field

Soccer Pickup: Your guide to finding a game.

Code Explanation:

We add references to Slicknav's CSS and JavaScript files, making sure to include jQuery before including the Slicknav JavaScript file.

Inside a script block, we call slicknav on our menu (nav ul).

We pass a parameter to slicknav, telling the plugin we want to attach the mobile menu to the header element, rather than the default body element.

In the CSS file, we set a rule to hide the mobile menu by default and use a set of rules contained in a media query to hide the desktop menu and show the mobile menu for smaller-viewport devices:

.slicknav_menu {
	display:none;
	background-color:#d0b462;
}

@media screen and (max-width: 520px) {
	.slicknav_menu {
		display:block;
	}
	nav ul {
		display:none;
	}
}

We also give .slicknav_menu a background color to match our header.

Next