Make a horizontal-scrolling Menu
Our web app on desktop may use elements that use great deal of width. On many occasions we can’t simply turn these elements into columns so that they fit on a small screen. Such elements may not only fit inadequately on small screens, they could ruin the entire layout of our page if we’re not careful. In many cases, we can use a horizontal-scrolling menu to preserve the width, but keep it easily usable.
Instructor: [00:00] let's start by making a main section. Inside the section, we'll have a header and a paragraph, both with some placeholder text. Here's our content. Now, above this content we're going to insert a nav, which is going to have links to parts of our site.
[00:22] In our code above our section, we'll set up our nav. Inside the nav, we'll set up some placeholder links. We're going to have Home, My Profile, Favorites, Links, Tasks, Promotions, and Settings. Let's save and refresh. Here's our nav at the top of the page. The links are beginning to wrap onto two lines, because there isn't enough horizontal space.
[00:55] We're going to make our menu so that any overflow is horizontally scrollable. To do this, let's head over to our CSS file. We want to target the nav. In our nav, we're going to use display flex, which is automatically going to apply flex direction row. We're going to give it overflow-x auto so that the other flow can be scrolled.
[01:21] We'll give it some margin. Let's save and refresh. Now, we have a row of our options. They're fitting the space exactly as they should be. Currently, there's actually no need for overflow-x auto, because there's no overflow-x. What we need to do is space these options out because they're too close to each other.
[01:47] We need to ensure that each option sits on its own line. In the case of my profile, the text is wrapping onto a second line. Let's target all the links in our nav. Let's give them margin right 20 pixels and margin bottom 10 pixels. We'll apply white space, no wrap. Let's save now and refresh. Now, our menu is overflowing.
[02:20] It's going across the end of the page here. We can scroll it from side to side. Let's give our body some padding so that our content isn't all the way to the edge of the page. Our nav is now working as we expect it to. We can place as many items as we want in this menu, and it will overflow off the page.
[02:42] The scroll behavior feels a bit strange at the moment. It's not smooth, and there's no movement after releasing. To get around this, on our nav we can use webkit-overflow-scrolling touch. Now, our menu feels much smoother and nicer to use...