Join Jen Kramer for an in-depth discussion in this video Solution: Navigation and sections, part of Learning Foundation 4.
Okay. So, how did you do? …Take starting challenge file. And you're going to have to add quite a …bit of HTML to this in order to make this work inside a Foundation. …So, here I've got my starting row, here on line 17. …Followed by my class of large 3, large centered columns. …Obviously, I could have put this elsewhere inside of a grid, and had other …content on the page if I wished. But I just decided to keep it simple, and …focus on just this navigation piece. Then after that, the HTML that I gave you …had this p with the artist inside of it, followed by this unordered list.…
So, we added a DIV with a class of section-container, and horizontal-nav. …And we also added one of those data-attributes. …In this case, it's data-section, horizontal nav. …That is the start of that DIV, and the end of that DIV doesn't happen until …almost down here at the bottom. And I have commented all this for you. …So we have the ending of the row, the ending of the large 3, then that …horizontal nav doesn't end until down here. …
- What is Foundation?
- Exploring the grid system
- Working with lists
- Styling buttons, thumbnail images, and more
- Including flexible video
- Adding breadcrumbs to the navigation
- Working with Clearing, the responsive lightbox
- Creating accordion panels and tabs for in-page navigation
Skill Level Beginner
1. Foundation Introduction and Download
2. The Grid System in Foundation
3. CSS Overview
4. Navigation Systems
Next steps2m 12s
- 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.