Join James Williamson for an in-depth discussion in this video Styling basic menus, part of Applied Responsive Design.
When you're styling navigation across multiple screen sizes, you also have to consider functionality.…At smaller sizes of the screens are likely to be touch, and since your hover styles…are won't to be working in a touchscreen, you really need to think about how effective…your styles are going to be when indicating active menu items.…You also need to consider the clickable area required on touch devices as well, to avoid…frustrating your users.…So let's take a look at styling our navigation across three different types of screen sizes:…our desktop, tablet, and mobile layouts.…
Now I have the index.htm file open from the 03_03 folder. We're also going to be working…mainly, honestly, in the main.css file, which is found in the _css directory of the same folder.…As we we're doing in the previous chapter, I'm going to be pasting some code in so that,…number one, it's going to save us some time, and it's going to save you from the torture…of having to watch me type, because we got a good bit of CSS that we're going to be writing here.…
- 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?
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.