Join James Williamson for an in-depth discussion in this video Structuring complex menus, part of Applied Responsive Design.
- View Offline
- Exercise Files
- Code Practice
As menus become more complex, the challenges around making them responsive grow, almost exponentially.…Not only do you have to deal with a shrinking screen real estate, but you also have to deal…with changes in device functionality, things like touch screens and different user expectations…across different devices.…So in this next series of exercises, we are going to be creating a relatively simple responsive dropdown menu.…Now, as we build this, I am going to point out many of the factors that we need to consider…to get our menu functioning across different screen sizes and devices.…
And as you'll see, even simple menus like this one can require a great deal of thought.…So I'm going to start by working in the index.htm file, which is found in 03_05 directory.…Our menu is going to be fairly long structurally, so again, I'll be pasting some code in and…then kind of going along with you guys.…But we are going to be building this in stages.…So you know as I'm working, I'll explain the code, but feel free to pause the video and…
- Creating mockups
- Structuring page regions
- Defining default styles and media queries
- Building desktop, tablet, and mobile layouts
- Structuring and styling menus
- Dynamically replacing menus
- Creating a responsive image gallery
- Adding phone functionality
- Testing responsive sites
Skill Level Intermediate
1. Planning Responsive Designs
2. Building Responsive Layouts
3. Responsive Navigation
4. Creating Responsive Media
5. Enhancing Sites for Mobile
6. Managing Resources
Additional resources4m 10s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.