Join Morten Rand-Hendriksen for an in-depth discussion in this video Creating a social media menu, part of Advanced Responsive Layouts with CSS Flexbox.
- View Offline
- The last individual menu we'll look at…is the social media menu.…Here we're going to use the exact same technique…as in the previous examples.…Set the display property of the unordered list…to flex and use justify content to position the menu items.…So there's nothing new here from a Flexbox perspective.…The reason I want to show you the…social media menu before we move on to the…mixed menus is the technique used…to display the social media icons.…Because as you can see in the Social Menu…all we're seeing is the social media icons…for each of the menu items.…
We're not seeing any text and the…social media icons are being generated automatically.…If we look at the HTML for this page…you'll see that within each list item…there is an anchor with an href that…points at a social media network…using the standard URL.…Now we could of course append something…to this and it would still work the…same way it does now.…But for simplicity's sake I've just…put in the root URL to each of the networks.…Each of these links also contains a bit of text.…
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