GridTab – Grid Based Responsive Tabs

GridTab is a jQuery plugin which will help you put any content in grid based responsive tabs.

If you have worked with some of the popular frameworks, you know the pain of creating responsive (and good-looking) tabs for various types of content presentations. Yes, there are some JS plugins (e.g Gridder.js) already available to assist on that issue. Unfortunately, some of them are not that done in favour of good user experience.

GridTab is a a great solution for the following UI pattern.

GridTab – Grid Based Responsive Tabs

Let’s assume that you need a way to put some images in a great looking grid, each of them to show some additional info on click. By no means, there are many ways to achieve this; from simple toggle function to complex plugins.

GridTab has various ways in terms of layouts and selection options. Let’s have a look at them:

Responsive Grid Layout

A straight-forward solution, positioning images in a grid in 4 by 3 (in the demo version). When an image is clicked, additional content is shown below.

See the Pen GridTab Demo #1 by Petia (@designify-me) on CodePen.

Don’t struggle alone with projects

Join the creative community of UX, graphic, web designers and developers to get help with any design or dev project.


Responsive Tab Layout

This example is almost the same as the grid layout, the difference is in the text tabs.

See the Pen GridTab Demo #2 by Petia (@designify-me) on CodePen.


Initially active tab & custom controls (next/prev and close)

Here the tabs are enhanced with some simple navigation which provide options to choose the tabs with next and prev arrow icons and a quick close option.

See the Pen GridTab Demo #3 by Petia (@designify-me) on CodePen.


Scroll to Active Tab

Gridtab also has the option to enable next/prev/close controls and scroll to active tab.

See the Pen GridTab Demo #4 by Petia (@designify-me) on CodePen.


Keep Tab Open

Again, user is assisted by handy tab navigation but the tabs are open at all times.

See the Pen GridTab Demo #5 by Petia (@designify-me) on CodePen.


Nested GridTabs

Nesting of tabs is possible, if you really need to implement such thing.

See the Pen GridTab Demo #6 by Petia (@designify-me) on CodePen.

Quick Setup & Use

Here is a quick way to start using GridTab. Alternatively, you can check some of the CodePen demos to help you out.

HTML

Your markup should look something like this. It’s a simple description list titles in <dt> tag and description or content to be shown on click in <dd> tag.

<dl id="gridtab-1">
<dt>Tab 1</dt>
<dd>Tab 1 Description</dd>
<dt>Tab 2</dt>
<dd>Tab 2 Description</dd>
<dt>Tab 3</dt>
<dd>Tab 3 Description</dd>
</dl>

CSS

Link the gridtab css file in your <head> tag.

<link rel="stylesheet" type="text/css" href="gridtab.min.css"/>

JS

Include the gridtab js, ideally efore your closing <body> tag.

<script type="text/javascript" src="gridtab.min.js"></script>

Initialization

Initialize the plugin as shown below:

<script>
$(document).ready(function() {
$('#gridtab-1').gridtab({
grid:3
});
});
</script>

Where grid is the number of grids/tabs in a row.

For more information on usage and options, refer to GridTab page.


You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *