From the course: Advanced Responsive Layouts with CSS Flexbox
Join today to access over 22,500 courses taught by industry experts or purchase this course individually.
Sidebar position switching - CSS Tutorial
From the course: Advanced Responsive Layouts with CSS Flexbox
Sidebar position switching
- 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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.