Join Jen Kramer for an in-depth discussion in this video Adding side navigation, part of Learning Foundation 5.
…In this next chapter we're going to take…an extensive look at navigation inside of Foundation.…Foundation comes with several, navigation styling systems that…you can make use of on your websites.…The first one we're going to take a look at, is the side navigation.…So obviously, as you take a look at this web…page which is nav.html, it's available in your exercise files folder.…Copy it on into your foundation folder.…Some attention needs to be paid to the navigation at the…top of this page, but I'm not going to address that just yet.…
We will in a few, videos later.…If you take a look at the quick links over here…on the side though, this is what I'd like to address first.…So right now, you see that we have some quick links here.…And, these are just styled as an unordered list, and they look like links.…And, while this is perfectly acceptable, you might want to do slightly…different styling, to make this maybe look a little bit more like navigation.…So this is Foundation styling right out of the box.…And if you open this navigation page up in, Sublime Text, this is nav.html.…
- Downloading and installing Foundation 5
- Introducing grids
- Centering columns
- Nesting grids
- Styling text, lists, buttons, panels, and more
- Adding navigation bars and dropdown menus
- Creating a responsive lightbox
- Adding an image carousel
- Integrating responsive images
- Adding tooltips
Skill Level Beginner
CSS: Transitions and Transformswith Joseph Lowery2h 25m Intermediate
1. Overview of Foundation 5
2. The Grid System in Foundation
3. CSS Overview
4. Navigation Systems
Next steps1m 24s
- 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.