Css Responsive Tabs

Posted on  by admin

A handy tabbed navigation, optimized for mobile devices, with support for both horizontal and vertical menu positioning.

Tabbed navigations are very useful when you need to organize a considerable amount of side content. It's very common to use tabs in a product page, for information like delivery options, product material info etc.

Another use of tabs is in dashboards, where users need a quick way to switch from one panel to the other.

Adding style

The code behind this snippet is very straightforward.

Mostly CSS, plus a bit of JavaScript to animate content height.

The interesting point is the way we handled the user experience on small devices: in order to allow users to have as many buttons as they want, we decided to let the navigation scroll horizontally on small devices - instead of hiding it completely or firing a drop-down menu.

Tabbed Content Section

⭐️ Icons: Nucleo, icon organizer & icon library.

👋 Important: this experiment is built using the CodyHouse Framework. The HTML is structured in 2 unordered lists (.cd-tabs__list and .cd-tabs__panels) - the first one is the navigation and the second one the content, both wrapped into the .cd-tabs div.

We used CSS media queries to change the navigation positioning from horizontal to vertical, and vice versa.

Since we embraced the mobile-first approach, the .cd-tabs__list element has an overflow-x:auto to hide part of the unordered list - whose width is bigger.

Basic Tabs

Besides we used -webkit-overflow-scrolling: touch to have a smooth scrolling on touch devices - always applied to the .cd-tabs__list element.

The rest of the CSS and the JavaScript are pretty easy, you can download the source file and experiment with them ;).

⚠️ Note: if you want the navigation to remain vertical on bigger screens, you can remove the scss code inside the md breakpoint (you'll find comments in the style.scss file to show you which parts to remove).

A tabbed interface or simply a tab is a graphical control element one can use to contain multiple panels or documents onto a single window for users to access.

CSS3 Tabs by Sorax

Because of this, it is perfect for single page web pages and applications.

It gives users not only a neat and organized UI but also makes the navigation process a whole lot easier.

So if you own a text-heavy site, or simply a content-packed website, then CSS tabs is the easiest way to appeal more to your users. Keeping that in mind, today we have made a list of the best possible options for our users today.

Simple jQuery-CSS Tabbed Panel

Hand-picked and listed according to the styling elements and best design trends, we hope this list helps you get the perfect start.

From animated to simple, from complex to minimal, we have included options for it all.

The top of our list is this premium-like CSS tab design by Allen Brady. Simple, elegant and efficient, this design is great for any type of websites whether professional or personal. It is complete with various creative icons animated to work as tabs.

Tabby Tabs

Each of these feature a designated area for contents and placeholder for media files as well.

Using simple CSS, the creator has also managed to add in a efficient hover effect as well.

And the best part here is that it does not rely on any JS, which means the overall template is pretty easy to understand and replicate.

Following a more professional approach with the design, this next variation is created with all the small details in mind.

CSS Tabs

However, unlike the previous option, this has it’s roots on the JS implementation alongside the CSS and HTML.

It starts out with a simple CSS tab with both icons and text to depict each selection.

When clicked on any one, the contents are displayed under the material based card below the tab. For an even more engaging appeal, you will find the use of vibrant color schemes all changing with the tabs.

Creating the structure

With the use of simple CSS, there are various animations and transitions implemented throughout.

All of these are fully responsive and also adjusts according to the device screens with ease. Depicting a folder like structure, this is yet another simple, minimal pure CSS tab design we have next in line for you.

Based off just CSS and HTML for the overall structure as well as the animations implemented, we can say, it is quite easy to understand and replicate.

The tabs are designed to look like folder tabs and just like with any folder, it switches the contents according to the tab selected. For that extra detailing, you will find a simple hover effect over the numeric icons on the tab as well.

CSS Tabs by Timothy M.LeBlanc

It seems to be responsive as well, which means the design automatically adjusts to all the device frames with ease.

Let’s start off with something simple, elegant and clean.

This Pure CSS tab is visually pleasing and works perfectly to display multiple posts or contents in a single screen. Calming purple and white color schemes are pretty appealing to look at.

And using just the simple HTML and CSS structure to get the result is impressive. Just like with most of the tab examples, this too uses the horizontal view showcasing the option to toggle between.

Pure CSS Tabs Programs Source Code

A simple transition of the color shading uses the radio input.

This means to highlight which section is clicked on, a darker shade of purple is used.

Creator of this design has kept it simple, however, below the demo, you can also find a link to the 3D version which also uses JS.

Talking about the 3D effect and a more advanced option to choose, this animated CSS tabs is the perfect example.

Animated CSS Tabs

Although animated in a subtle manner, this sure makes for an impressive result.

And the best part is that all of the codes are based on CSS and HTML. This ensures an easier implementation and understanding of the structure. Green and white upon a navy blue background works amazingly.

Just Another CSS Tab

When hovered over each of the tabs, it extends in a smooth animation which when clicked on changes the color scheme to highlight the selection as well.

This is a more creative approach to a CSS tab as it is complete with animation, effects and also innovative design structure.

While most of the tabs are designed as a simple navigational element, this leans more towards a unique and engaging element for your users to enjoy. Instead of the traditional fonts or texts used on the tabs, the creator has replaced that with flat icons.

UI/UX Example: Tab Switch Animation

Each of them is also designed to execute a stunning hover and click effect transitioning the highlight to the selected tab.

Even the contents appear in and out of view using the zoom in and out effect.

Overall quite interesting, get access to their full structure following the link below. Now just because it is a tab doesn’t necessarily need to be horizontal. This responsive CSS tabs and accordion is the perfect example.

CSS Tab by Chen Hui Jing

Versatile enough to be used as either an accordion or a tab, implementing it onto your site is also pretty easy.

The simple blue and white structure is clean and professional looking.

When clicked on, the tab expands vertically to showcase the content inside. Another detail added is the radio-button style effect which means that only one of the tab can be opened at a time.

All of the aspects are kept pretty minimal which also leaves the users to add in their own custom touch if they prefer.

Responsive CSS Tabs & Accordions

Talking about radio buttons and the effect, this CSS tab design is based entirely on a similar style and pattern.

Unlike the traditional tabs represented by texts or icons, here it is replaced with radio buttons.

When clicked on any one of the tabs, a dialogue box appears below where the users can view the contents.

Just like with a radio button, only one tab can be opened at once and it immediately collapses when the next option is clicked on. The color schemes are kept pretty simple with purple and white.

CSS Tabs Menu

Another small detail added for extra creativeness is the color transition on the buttons when a specific tab is clicked on.

Now coming back to a more practical and navigational purpose based design, this simple jQuery CSS tabbed panel is another great example.

The design is pretty straightforward, working to display the contents in an organized manner. Each of the tabs is determined with the tabbed panel on the top.

These tabs when hovered over changes the color from white to blue achieved with simple CSS.

Folder Tabs

However, the transition of the content inside the tabbed panel is determined with the help of JS.

This ensures a more smooth and clean transition when fading in and out of view. The content inside the panel is also extremely versatile and holds placements for all including textual content, images, and even links.

Simple CSS Tabs with Shadow

Now as the name would suggest this Pure CSS Tabs with indicator, is based off purely HTML and CSS.

It includes a material design based card which works as the base of the tab. Each of the tabs is also represented with a creative icon as well as the title.

Simple with the design, the animations are still quite impressive. Using simple CSS, the creator has managed to get a smooth transition of content with each click.

When selected the tab title also changes the color and is underlined to highlight the selection. All of the coding structure is open to access, just follow the link below to view.

A more darker version for those of you who are looking for it, this stunning example is CSS Tabs Revisited by Eric Sadowski.

The design is pretty impressive when keeping in mind that it is based purely on HTML and CSS.

Elastic Tabs

Starting off with a plain background, the creator has elevated it with all of the stylings.

On a darker shade of box, the tab is represented with a ribbon-like structure atop it all.

Each of the tabs also has text and a creative icon to represent each section. Now when clicked on the content inside uses slide up and slide down effect to get in and out of view.

jQuery and CSS Tabbed file folder

The tabs also change their color from gray to orange to display the selected item.

Add in any type of content whether you want to add in texts, links, and even images if you prefer.

A minimal and material design based CSS tab design is perfectly minimal yet flexible. The design because of the simplicity makes for the ideal base which adjusts to any type of themes or websites.

Scroll For Tabs

Adding shadows to create an almost 3D feel to it, the pure white color scheme also adds to the paper-like feel. The content area also adjusts the length and the width according to the content it holds inside.

Another great thing about this design is that it is completely responsive and automatically adjusts to every design screen size with ease.

When hovered over any of the tabs the texts also comes into view executing a smooth fade-in effect. As it is based purely on CSS without any additional JS, the whole structure is pretty easy to implement.

Now, for a more professional and purpose focused design, this CSS tab is complete with everything that you might need. From the tab design to the content holders to the smooth and clean animations and transitions, everything is well taken care of. And even though the demo is just a dummy, it is ready to go Live with just a few tweaks here and there.

The tabs using CSS effects highlight it when hovered over and completely changes color schemes when clicked on.

Pure CSS Tabs with indicator

As you can see here, adding pretty much anything is possible whether you want texts, links, images and even forms and CTA buttons.

The end result is pretty incredible and the best part of it all is that it is based entirely off of CSS and HTML. A more creative approach towards a CSS tab design, this style is based on the file and folders stacked together.