Join Jen Kramer for an in-depth discussion in this video Formatting the side nav, part of Up and Running with Foundation 4.
- View Offline
- Exercise Files
Now that our breadcrumbs are styled the next thing I'd like to try is styling the …side navigation. So this is the navigation that appears on …the left side of the web page. Mostly we're going to be talking about …this set of links right here about Mission, Vision and Organizers. …This set of navigation above looks like site navigation. …It's actually the main navigation for the website and it will stretch across the …page horizontally. I'm not going to talk about that just yet. …That's going to be in a video that's coming up. …Side navigation is really a common addition to a lot of websites.…
It's a great place to park your secondary navigation or you might just have a …series of quick links or some other kind of links over in a group that you would …like to include in a sidebar like this and you want them to be vertically oriented. …Its very simple to format this. Just as simple as it was to do the breadcrumbs. …If you scroll on down here to right around line 39. …That is our bulleted list for our side navigation and what we would like to do …
- 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?
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.