Join Ray Villalobos for an in-depth discussion in this video Highlighting menu items on scroll, part of Building a Responsive Single-Page Design with Sass.
Our webpage is looking pretty good.…We have some scrolling animation effects and…we also have the pinning of this navigation at the very top.…It would be nice to give the users some visual feedback as to…where they are on this site as they scroll through the different sections.…So if we are in this essential info section,…I would like this item to somehow be highlighted.…We're going to do that by first adding another class into our navigation.…So we need to open up component sass modules and…then nav and then go all the way down to the bottom.…
And it's nice that I actually commented things.…So I want this to be part of the anchor tags.…So right in here, I'm going to create a class of active.…And in there, I'll set the background color to red.…And then the color to light, so it's going to be white.…And we'll save this and test it out by going into index.html and…just adding an active class to one of these items.…So if we save it and make sure we run the gulp command if it's not running already.…
And I'm going to refresh this page.…
- Compass, whose Sass mixins help you leverage CSS3 features like Flexbox
- Susy 2, the framework that "subtracts" the math from responsive grid design
- ScrollMagic, for adding "magical" scroll effects
- Breakpoint, which makes writing media queries in Sass a snap
But this course isn't just about the tools. It's a realistic project that epitomizes many of the design challenges website developers face in the real world. Start watching now and learn how to use HTML, jQuery, and CSS to build your own dynamic, deeply responsive designs.
- Analyzing the project before you begin
- Creating basic styles
- Building your own Sass mixins
- Coding the navigation
- Making the navigation responsive, with grids
- Using a split layout
- Creating tween animations
- Controlling scenes with scrolling
Skill Level Intermediate
1. Getting Started
2. Organizing Your Sass
3. Creating Responsive Grids with Susy
4. Animating Your Layouts
Next steps1m 38s
- 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.