Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:5Length:50 minutes
Ui design practical guide to tabs 400x277
  • Overview
  • Transcript

2.2 Making Tabs Responsive

Welcome to the second lesson. In the previous lesson, we successfully created some tabs which work just fine on larger screens, but they fall short on devices with smaller screens. We need to fix that, so in this video we’ll cover two methods for creating responsive tabs.

Related Links

2.2 Making Tabs Responsive

Welcome to lesson number two. In the previous lesson, we successfully created some tabs. And while they look just fine on large screens, they fall short on smaller screens, and we need to fix that. So in this video we'll cover two methods for creating responsive tabs, using overflows and using accordions. The first method is the easiest, because it only uses CSS modifications, while the accordions will require some extra JavaScript code. So, let's begin. I'm back here in CodePen, and we'll working on the same tab control that we created in the previous lesson. A couple of things to start with here. I'm just gonna use the jQuery version, moving forward. The HTML will remain exactly the same for this example, but we'll do some changes in CSS. So first things first, here's what we'll do. Notice that when we, Resize our page here, the tabs will kind of wrap on the next line. One thing we can do is, we can set the display of the ul, or this list of links, to flex. So what that will do is create a flex container for these items, and it will allow the text to wrap, to break, here. So that will give us a little bit of extra room to work with, before we actually implement the overflow method. And to make these full height, let's go to the anchor tags, and we'll set height to 100%. But because we have a little bit of padding added to these links, we gotta calculate the exact height. So we'll say calc(100%- 2rem). And 2rem comes from this, because we have 1rem on the top, 1rem on the bottom. So now we have the proper height added to all of our links, and we can also align them to the center, so text-align: center. Okay, just like that. All right, now, if this isn't enough, if we go here and we still get tabs that are just overflown or they're hidden, here's what we do. We find the breakpoint where we need to start making the changes, so in my case, I think around 700 pixels will do the trick. So then, we go to the tabs and we set. We start mobile-first, max-width will be 100%. And then we'll say, media, and we'll add our breakpoint here, and min-width: 700px. So on large devices, the max-width will be 60rem. Anything below that, the width of the tabs will be 100%. Now, to fix this we'll go to the ul and we'll say, overflow-x, we'll set this auto, and we'll also use a property called overflow-scrolling: touch. This is optional, but it's used for smooth scrolling on touch devices. Okay, so what happened here? Well, the tabs that were overflowing are now hidden. And we have a scroll bar on the bottom, so we can scroll horizontally to gain access to the other tabs. And this works, On very small screens as well. And when we go back up, we get our normal tab. Okay, that's approach number one, pretty simple to do. It's gonna work on pretty much all browsers, but it's not the prettiest solution, right? Because you still have to scroll, or on mobile devices you have to tap, on mobile devices you actually swipe with your finger. And I guess that's okay, but it's not the best solution, so let's see what other solution we can find for this. And that is to use accordions. Basically, on small screens, we'll transform the tab control to an accordion control, where each each tab link will be positioned above the tab panel. So we'll have a vertical orientation for the tabs, instead of a horizontal one. Let's see how we can do that. Now, to start, we got to make a small change to the markup and that is to add a data attribute to every single anchor tag in this list. And that data attribute will say, data-tab-nav. That's it, you'll see why we need this in just a little bit. So how are we going to do this? Well, it's actually quite simple. We're going to duplicate the tab links, and we're gonna put each one above its corresponding panel. We're gonna do that from JavaScript. And then, when we click each one, we're gonna apply the same principle as we do here, we remove and apply the active class from the link in the corresponding panel. So we have to make a few changes to the JavaScript function here. We'll start by generating the accordion headings for each section, and here's how we do that. We go through each tabLink, we're gonna pass in an index there, we're gonna need that. We'll do var this = this, again, for performance reasons. And we'll do the following. this, which refers to the tabLink in the current iteration, thus .attr(href). I actually have to put this inside quotes. This line here will basically select the corresponding panel for the link in the current iteration. So then we do before($this.clone().addClass('accordion-- heading')). All right, was that a bit too complicated? Well, let me explain what I did here. And let me actually switch to a different browser, so we can inspect this page using the developer tools. All right, so let's go to debug mode. And we're gonna do an Inspect, just to see what we have here. So this is our original structure, right? We have a ul followed by a couple of sections, section tab-1, tab-2, tab-3, and so on. By doing this bit we're essentially creating an anchor tag before each section. And that anchor tag has the same href as the one here, has the same data attribute, because we're cloning it, but it has that accordion-heading class that we added here. So this is how it works. We do a each for each tabLink, let's start with the first one. Code, okay? So we have this first link here, the href is tab-1. So we're getting the href, and we're doing jQuery, tab-1, and that will select this section right here. And that we're calling the before method. And to the before method, we're passing in what element we should put before that section. So we say this.clone, which refers to this link. We're cloning it, we're basically duplicating it, and we're adding the class of accordion-heading. All right? So essentially, before each section we're putting a clone of the corresponding link here, with the only difference being this accordion-heading class. So I hope that makes sense. And also, we have to add a little something here. If this is the first item, add the active class. And here I'm actually referring to the link, okay? So we'll say, if (index === 0), this is where the index parameter comes in handy, we'll say, this.addClass('active'). Now, let's do a little bit of styling. First of all, the uls, or the tabling ul. We don't need those bits anymore, we're gonna set a display to none to hide it completely on mobile devices. And then, on larger screens, we'll set our display to flex, okay? So basically, on large screens these are visible, on the small screens they're not. Next, let's style, These accordion headings. So accordion-heading, first of all, set our display to block. This is on small screens. But on larger screens, we'll set our display to none, Just to hide it on large screens, great. Next we'll remove the underlines, and in fact, a lot of the styles from the main anchor tag can be applied here. So let's go ahead and copy those, all of them. Let's see what we don't need from here. I'm gonna increase the lateral padding here a little bit to 2.5, so it matches or it aligns with the text in the panels. Color is the same, transition is the same. We don't need this height, oops, this height property anymore. Active, let's add a font-weight to bold, background white color, hover, not active. Okay, that's about it for the styling. So essentially, we're transforming these tabs into an accordion control. Now we just have to get it working with JavaScript. So right now, when we're handling the link clicks, we're saying tabLinks.click. But actually, we're gonna do this, data-tab-nav. So we're listening for clicks for all elements that have this data attribute, and that includes our original tab links that we can see on this top but also these links that we cloned, because they also have this data attribute, okay? So now inside this function we get this, but also we'll get another variable, let's call it target, that's gonna be this.attr('href'). This will stay the same. Here we're removing the active class from the active link and section, and we're gonna add something really quickly here. So tab-links a.active, section.active. And we're also adding in accordion-heading.active. So then, finally, we're gonna add the active class to the current link corresponding section and accordion heading. So we're gonna say, target.addClass('active'). This is for the panel and target, remember, we're getting here. And then, to add the active class to all the links that have this target href, here's what we do. We're going to reference a href that contains the target. Okay, so let's see if this works. And it does not, okay. So we have, probably, an error somewhere. Okay, so let's go through this again, target = $this.attr('href'). This is correct, this is correct. Remove the active class from the active link and section. So it's doing this bit, but the problem is here, right? Let's actually see if we're getting the target correctly. Yeah, we are, okay. So target.addClass('active'). Let's see if we comment this, my mistake, excuse me. I actually have to reference that using the jQuery method. Cool. Okay, so that works. Now, when we get to the small screens, we get an accordion, basically. And what's nice about this is that because we're adding the active class to the accordion links and the tab links, when we switch between mobile to desktop the active tab is kept. So this is nice, because when we have for example a tab that's displayed on a phone, if we're looking in landscape, we see tabs. But if we flip the phone and we look in portrait, right, that's gonna be displayed as an accordion. And I can switch to a specific accordion item in portrait, switch back to landscape, and the same item will be selected as a tab. That's very cool. All right, so now we have responsive tabs. The thing is, these elements depend on JavaScript, and if for some reason JavaScript is disabled in the browser, they will not work. We'll address this problem in the next lesson, where you'll learn how to create some responsive CSS-only tabs. See you there.

Back to the top