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