From our sponsor: Elevate all your marketing with Mailchimp Smarts.
A full width tab component with some example media queries for adjusting the icons of the tabs and the content layout. The main idea is to show only icons for the mobile view and allow the text to appear when there’s enough space. The content columns and the containing media boxes have three different layouts.
The food shapes in the content images are from PsdBlast. The icons used in the tabs are by DesignModo and the icon font was created using the Icomoon App.
The HTML
<div id="tabs" class="tabs"> <nav> <ul> <li><a href="#section-1" class="icon-shop"><span>Shop</span></a></li> <li><a href="#section-2" class="icon-cup"><span>Drinks</span></a></li> <li><a href="#section-3" class="icon-food"><span>Food</span></a></li> <li><a href="#section-4" class="icon-lab"><span>Lab</span></a></li> <li><a href="#section-5" class="icon-truck"><span>Order</span></a></li> </ul> </nav> <div class="content"> <section id="section-1"> <div class="mediabox"> <img src="img/01.png" alt="img01" /> <h3>Sushi Gumbo Beetroot</h3> <p>Sushi gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.</p> </div> <div class="mediabox"> <img src="img/02.png" alt="img02" /> <h3>Pea Sprouts Fava Soup</h3> <p>Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.</p> </div> <div class="mediabox"> <img src="img/03.png" alt="img03" /> <h3>Turnip Broccoli Sashimi</h3> <p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip.</p> </div> </section> <section id="section-2"> <div class="mediabox"> <img src="img/04.png" alt="img04" /> <h3>Asparagus Cucumber Cake</h3> <p>Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. </p> </div> <div class="mediabox"> <img src="img/05.png" alt="img05" /> <h3>Magis Kohlrabi Gourd</h3> <p>Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard.</p> </div> <div class="mediabox"> <img src="img/06.png" alt="img06" /> <h3>Ricebean Rutabaga</h3> <p>Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. </p> </div> </section> <section id="section-3"> <div class="mediabox"> <img src="img/02.png" alt="img02" /> <h3>Noodle Curry</h3> <p>Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.Sushi gumbo beet greens corn soko endive gumbo gourd.</p> </div> <div class="mediabox"> <img src="img/06.png" alt="img06" /> <h3>Leek Wasabi</h3> <p>Sushi gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.</p> </div> <div class="mediabox"> <img src="img/01.png" alt="img01" /> <h3>Green Tofu Wrap</h3> <p>Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut wasabi tofu broccoli mixture soup.</p> </div> </section> <section id="section-4"> <div class="mediabox"> <img src="img/03.png" alt="img03" /> <h3>Tomato Cucumber Curd</h3> <p>Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. </p> </div> <div class="mediabox"> <img src="img/01.png" alt="img01" /> <h3>Mushroom Green</h3> <p>Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard.</p> </div> <div class="mediabox"> <img src="img/04.png" alt="img04" /> <h3>Swiss Celery Chard</h3> <p>Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. </p> </div> </section> <section id="section-5"> <div class="mediabox"> <img src="img/02.png" alt="img02" /> <h3>Radish Tomato</h3> <p>Catsear cauliflower garbanzo yarrow salsify chicory garlic bell pepper napa cabbage lettuce tomato kale arugula melon sierra leone bologi rutabaga tigernut.</p> </div> <div class="mediabox"> <img src="img/06.png" alt="img06" /> <h3>Fennel Wasabi</h3> <p>Sea lettuce gumbo grape kale kombu cauliflower salsify kohlrabi okra sea lettuce broccoli celery lotus root carrot winter purslane turnip greens garlic.</p> </div> <div class="mediabox"> <img src="img/01.png" alt="img01" /> <h3>Red Tofu Wrap</h3> <p>Green horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut wasabi tofu broccoli mixture soup.</p> </div> </section> </div><!-- /content --> </div><!-- /tabs --> <script src="js/cbpFWTabs.js"></script> <script> new CBPFWTabs( document.getElementById( 'tabs' ) ); </script>
The CSS
@font-face { font-family: 'icomoon'; src:url('../fonts/icomoon/icomoon.eot?pvm5gj'); src:url('../fonts/icomoon/icomoon.eot?#iefixpvm5gj') format('embedded-opentype'), url('../fonts/icomoon/icomoon.woff?pvm5gj') format('woff'), url('../fonts/icomoon/icomoon.ttf?pvm5gj') format('truetype'), url('../fonts/icomoon/icomoon.svg?pvm5gj#icomoon') format('svg'); font-weight: normal; font-style: normal; } /* Icons created with icomoon.io/app */ .tabs { position: relative; width: 100%; overflow: hidden; margin: 1em 0 2em; font-weight: 300; } /* Nav */ .tabs nav { text-align: center; } .tabs nav ul { padding: 0; margin: 0; list-style: none; display: inline-block; } .tabs nav ul li { border: 1px solid #becbd2; border-bottom: none; margin: 0 0.25em; display: block; float: left; position: relative; } .tabs nav li.tab-current { border: 1px solid #47a3da; box-shadow: inset 0 2px #47a3da; border-bottom: none; z-index: 100; } .tabs nav li.tab-current:before, .tabs nav li.tab-current:after { content: ''; position: absolute; height: 1px; right: 100%; bottom: 0; width: 1000px; background: #47a3da; } .tabs nav li.tab-current:after { right: auto; left: 100%; width: 4000px; } .tabs nav a { color: #becbd2; display: block; font-size: 1.45em; line-height: 2.5; padding: 0 1.25em; white-space: nowrap; } .tabs nav a:hover { color: #768e9d; } .tabs nav li.tab-current a { color: #47a3da; } /* Icons */ .tabs nav a:before { display: inline-block; vertical-align: middle; text-transform: none; font-weight: normal; font-variant: normal; font-family: 'icomoon'; line-height: 1; speak: none; -webkit-font-smoothing: antialiased; margin: -0.25em 0.4em 0 0; } .icon-food:before { content: "e600"; } .icon-lab:before { content: "e601"; } .icon-cup:before { content: "e602"; } .icon-truck:before { content: "e603"; } .icon-shop:before { content: "e604"; } /* Content */ .content section { font-size: 1.25em; padding: 3em 1em; display: none; max-width: 1230px; margin: 0 auto; } .content section:before, .content section:after { content: ''; display: table; } .content section:after { clear: both; } /* Fallback example */ .no-js .content section { display: block; padding-bottom: 2em; border-bottom: 1px solid #47a3da; } .content section.content-current { display: block; } .mediabox { float: left; width: 33%; padding: 0 25px; } .mediabox img { max-width: 100%; display: block; margin: 0 auto; } .mediabox h3 { margin: 0.75em 0 0.5em; } .mediabox p { padding: 0 0 1em 0; margin: 0; line-height: 1.3; } /* Example media queries */ @media screen and (max-width: 52.375em) { .tabs nav a span { display: none; } .tabs nav a:before { margin-right: 0; } .mediabox { float: none; width: auto; padding: 0 0 35px 0; font-size: 90%; } .mediabox img { float: left; margin: 0 25px 10px 0; max-width: 40%; } .mediabox h3 { margin-top: 0; } .mediabox p { margin-left: 40%; margin-left: calc(40% + 25px); } .mediabox:before, .mediabox:after { content: ''; display: table; } .mediabox:after { clear: both; } } @media screen and (max-width: 32em) { .tabs nav ul, .tabs nav ul li a { width: 100%; padding: 0; } .tabs nav ul li { width: 20%; width: calc(20% + 1px); margin: 0 0 0 -1px; } .tabs nav ul li:last-child { border-right: none; } .mediabox { text-align: center; } .mediabox img { float: none; margin: 0 auto; max-width: 100%; } .mediabox h3 { margin: 1.25em 0 1em; } .mediabox p { margin: 0; } }
The JavaScript
/** * cbpFWTabs.js v1.0.0 * http://www.codrops.com * * Licensed under the MIT license. * http://www.opensource.org/licenses/mit-license.php * * Copyright 2014, Codrops * http://www.codrops.com */ ;( function( window ) { 'use strict'; function extend( a, b ) { for( var key in b ) { if( b.hasOwnProperty( key ) ) { a[key] = b[key]; } } return a; } function CBPFWTabs( el, options ) { this.el = el; this.options = extend( {}, this.options ); extend( this.options, options ); this._init(); } CBPFWTabs.prototype.options = { start : 0 }; CBPFWTabs.prototype._init = function() { // tabs elemes this.tabs = [].slice.call( this.el.querySelectorAll( 'nav > ul > li' ) ); // content items this.items = [].slice.call( this.el.querySelectorAll( '.content > section' ) ); // current index this.current = -1; // show current content item this._show(); // init events this._initEvents(); }; CBPFWTabs.prototype._initEvents = function() { var self = this; this.tabs.forEach( function( tab, idx ) { tab.addEventListener( 'click', function( ev ) { ev.preventDefault(); self._show( idx ); } ); } ); }; CBPFWTabs.prototype._show = function( idx ) { if( this.current >= 0 ) { this.tabs[ this.current ].className = ''; this.items[ this.current ].className = ''; } // change current this.current = idx != undefined ? idx : this.options.start >= 0 && this.options.start < this.items.length ? this.options.start : 0; this.tabs[ this.current ].className = 'tab-current'; this.items[ this.current ].className = 'content-current'; }; // add to global namespace window.CBPFWTabs = CBPFWTabs; })( window );
That’s great! But how can i change the icons?
make your own font set (use the Icomoon app) and edit the the CSS file.
Just Amazing Mary
Github link is down.
nope the post needs to be updated
the github link is pointing at wrong link
should be
https://github.com/codrops/FullWidthTabs
Super. Awesome..
This is simple, sleek and slick Flat design. I wished there was a way to “fade out and fade in” the different tab sections upon selection. Any Ideas?
I was wondering the same thing! Is there a way to adjust the javascript to allow it to fade in / out?
Solid!
Awesomely simple! I’m planning to use this for a microsite and have a question. If I want to open tab 2 or 3 from a text link inside the body content of tab one, how can I do that? I tried using their respective IDs but it doesn’t work. Basically, I want to cross link every tab via images and text links. Any help?
here you can crack this issue:
CBPFWTabs.prototype.options = {
start : 2 /* give here number and that tab will open */
};
Hi!! it’s a gorgeous effect! But i have a question, if I need to insert this gallery into two different section in my web site, how can I do it? thanks a lot!
Mary, this script is awesome! I have some questions or favor (perhaps a better word for it 😉 ) for you :
1. I am planning to use the icons on top right (prev , next etc) for “about”, “privacy policy” links, how can I show the content below the tabs without having a tab selected (if you already have an active tab) ?
2. I would like to integrate your “tooltip menu” to be used in this script for the tabs when hovering , can you please share the code for this?
Thanks for a great script once again and hope you can solve/answer my questions
Forgot the last question:
3. The previous asked question regarding linking to other tabs/content you answered :
CBPFWTabs.prototype.options = {
start : 2 /* give here number and that tab will open */
};
How do I implement this in a ?
How do I implement this in a “a href” tag
Hi, Amelia,
did you solve this?
I’d like to link from extern to a tab, too.
e.g. my-website.com/index.html#tab3
any ideas? anyone???
thanks in advance.
aah , yet another question and that is :
4. How to import icon set from Icomoon app, I have created my own set but I only have options of json, svg etc. and do not get the content in your folders, for instance in the bpicons folder :
bpicons.eot
bpicons.svg
bpicons.ttf
bpicons.woff
I dont mind using the same font as you , all I want to do is change the icons and text (and that is made in the html file of course).
How do I put an end to slide from left to right?
Hi all.. one question, i can’t seem to click the tabs in IE. What’s the problem?
Doesn’t support IE8, I am using the same concept for my site but there is no IE8 support, It says ‘Jscript object expected’ In your .js at line 37, I find it difficult to understand the problem. Please if you could help.
Thank you.
Hi Mary,
How to change icon. Please give me one example.
Is there a way I use these tabs more than once? Every time I try to use it again, it does’t work and it doesn’t show the content in the divs… please help!
I am using this on a one page website. Thanks!
Great Script very simple and elegant .. but what if I want to change the color of active tab for each tab?
Awesome, Simple and elegant…