Join Jen Kramer for an in-depth discussion in this video Adding dropdown navigation to the top nav bar, part of Learning Foundation 4.
The next thing I'd like to add to my Navigation bar are some drop-downs. …Everybody loves drop-downs. They're actually relatively simple to add …inside of Foundation. The Navigation bar we built to this point …had a single level of navigation. So, you could combine that with one of …the other navigation types to make the secondary navigation appear in the left …side of the page. You'd click on about to go to the about …part of the webpage. And then over on the left side, you'd …have your links appear to all the subnavigation to the about part of the website.…
We used to do webpages that way for years and years and years, but these days more …and more websites are using these drop downs. …So, Foundation comes with a very simple system for adding drop downs to your page …and they can go as many levels deep as you wish. …The first thing I'm going to need to do is alter the code that I've got on my …page so far. Down here, probably around line 32, is …the code that formats the top bar. I'm working in the document called 4-dropdowns. …
- 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.