Join James Williamson for an in-depth discussion in this video Minimizing menus for small screens, part of Applied Responsive Design.
One of the biggest problems in dealing with larger menus is how to display them on smaller screens.…They take up an inordinate amount of space, and if your menu is at the top of the screen,…you could be forcing users to scroll all the way through your menu before they can get…to what they are actually there to see, which is your content.…To address that in our responsive menu, we are going to initially hide the menu from…users and give them a small menu button that will then allow them to toggle that menu either open or closed.…Now, there are a lot of different ways that you could approach this, so you know, the way…that I choose to do it within this menu isn't necessarily the way that you might choose…to do it or somebody else, and it's okay.…
I tend to lean towards using CSS to do as much as possible,…so if I switch over to my CSS and I go down to my mobile styles--so I am looking in the…main.css file in the 03_08_css directory. Say that three times as fast. It takes a while…to get down here at this point, but here we go.…
- 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.