Join James Williamson for an in-depth discussion in this video Converting menus to select elements, part of Applied Responsive Design.
Sometimes there just isn't a very elegant way to do what you are trying to do.…In the case of our Archive Galleries menu, we want to replace it on smaller screens with…a select element. Although we could have two versions of the menu in our HTML and then…use CSS to either hide or show them based on screen size,…this would not be a very accessible or a semantic solution,…so let's take a look at how we can do this dynamically through the use of jQuery.…So I am working in the index.htm file found in the 03_15 folder, and you can see I have…already scrolled all the way down to our small screen function.…
Now, what I am going to do probably won't as popular with lot of you guys that are following…along with me, but there is a lot of code involved in this, and rather than trying to…type every single line of this in, what I am going to do is I am going to paste the function in.…Now, I am going to go through it line by line and talk about what it's doing.…So at certain point, you can just sort of pause the screen and sort of type what you see here. Now,…
- 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.