Join Morten Rand-Hendriksen for an in-depth discussion in this video Sidebar position switching, part of Advanced Responsive Layouts with CSS Flexbox.
- View Offline
- In the previous chapter I demonstrated…how easy it is to use the Flexbox order property…to change the order of elements within a Flexbox.…I used it to move the sidebar from its default position…on the right-hand side…to a new position on the left-hand side by simply…changing the order property of the sidebar from two to zero.…Now I want to attach that behavior to a button on the page…so the user can change the sidebar position dynamically…within the browser without reloading the content.…Now I'm going to tie that behavior to the button up here…on the top right-hand corner.…
In the exercise files for chapter five 05.02,…you'll find an emended version of holy-grail.html.…If you scroll down a bit you'll see I've added…a new piece of content here inside the masthead.…it's a div of the class sitdebar-switcher…that contains all the buttons that you see…in the top right-hand corner.…What's important to note here is that…each of these links point nowhere.…It's just a # in the href attribute…and that each of the links has a class…
This course shows how to use flexible boxes to create advanced responsive layouts. Morten Rand-Hendriksen takes the viewer on a tour of Flexbox and provides actionable code snippets that can be implemented safely in almost any website. He puts it all together in a holy grail site complete with card-based layout, mixed content menus, and interactive components that provide visitors with choices about what they see.
- Creating Flexbox-powered menus
- Building a responsive card layout
- Marking up and styling the holy grail layout
- Changing displays
- Showing and hiding the sidebar
- Animating content