#tabbed content

d3tabs is a simple plain tabs plugin that allows for nested tabs (tabs in tabs) to provide a 3D experience for your tabbed content.

Demo

Download

Tab-u-Lator

Download Now

If you are having trouble with the pen, try the archived copy on GitHub

Tabbed content areas are a great way to pack sections of content into a neat, concise area with a nice user experience. This 3D cube tabbed content with the selection of the tab rotates the cube to the corresponding content area makes it super cool. Designed by  Kara Olthof

New Post has been published on http://www.htmluse.com/responsive-full-width-tabs-2/

Responsive Full Width Tabs

Download   Demo

Responsive full width tabs is 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.

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" type="text/css" href="css/component.css" /> <script src="js/cbpFWTabs.js"></script>

2. 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 -->

3. JAVASCRIPT