View Mode Switch Layout With CSS3 and Javascript
File Size: | 52.7 KB |
---|---|
Views Total: | 3426 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

In this tutorial written by MARY LOU we're going to create a layout switch with two viewing modes (grid and list). It's useful for E-commerce Website that allows the users to switch the product view mode to improve the user experiences.
How to use it:
1. Markup html structure
<div id="cbp-vm" class="cbp-vm-switcher cbp-vm-view-grid"> <div class="cbp-vm-options"> <a href="#" class="cbp-vm-icon cbp-vm-grid cbp-vm-selected" data-view="cbp-vm-view-grid">Grid View</a> <a href="#" class="cbp-vm-icon cbp-vm-list" data-view="cbp-vm-view-list">List View</a> </div> <ul> <li> <a class="cbp-vm-image" href="#"><img src="images/1.png"></a> <h3 class="cbp-vm-title">Silver beet</h3> <div class="cbp-vm-price">$19.90</div> <div class="cbp-vm-details"> Silver beet shallot wakame tomatillo salsify mung bean beetroot groundnut. </div> <a class="cbp-vm-icon cbp-vm-add" href="#">Add to cart</a> </li> <li> <a class="cbp-vm-image" href="#"><img src="images/2.png"></a> <h3 class="cbp-vm-title">Wattle seed</h3> <div class="cbp-vm-price">$22.90</div> <div class="cbp-vm-details"> Wattle seed bunya nuts spring onion okra garlic bitterleaf zucchini. </div> <a class="cbp-vm-icon cbp-vm-add" href="#">Add to cart</a> </li> ... </ul> </div>
2. The CSS for the layout
@font-face { font-family: 'fontawesome'; src: url('../fonts/fontawesome/fontawesome.eot'); src: url('../fonts/fontawesome/fontawesome.eot?#iefix') format('embedded-opentype'), url('../fonts/fontawesome/fontawesome.woff') format('woff'), url('../fonts/fontawesome/fontawesome.ttf') format('truetype'), url('../fonts/fontawesome/fontawesome.svg#fontawesome') format('svg'); font-weight: normal; font-style: normal; } /* Main container */ .cbp-vm-switcher { padding: 20px; border: 3px solid #47a3da; } /* options/select wrapper with switch anchors */ .cbp-vm-options { text-align: right; padding-bottom: 10px; border-bottom: 3px solid #47a3da; } .cbp-vm-options a { display: inline-block; width: 40px; height: 40px; overflow: hidden; white-space: nowrap; color: #d0d0d0; margin: 2px; } .cbp-vm-options a:hover, .cbp-vm-options a.cbp-vm-selected { color: #47a3da; } .cbp-vm-options a:before { width: 40px; height: 40px; line-height: 40px; font-size: 30px; text-align: center; display: inline-block; } /* General style of switch items' list */ .cbp-vm-switcher ul { list-style: none; padding: 0; margin: 0; } /* Clear eventual floats */ .cbp-vm-switcher ul:before, .cbp-vm-switcher ul:after { content: " "; display: table; } .cbp-vm-switcher ul:after { clear: both; } .cbp-vm-switcher ul li { display: block; position: relative; } .cbp-vm-image { display: block; margin: 0 auto; } .cbp-vm-image img { display: inline-block; max-width: 100%; border: none; } .cbp-vm-title { margin: 0; padding: 0; } .cbp-vm-price { color: #c0c0c0; } .cbp-vm-add { color: #fff; background: #47a3da; padding: 10px 20px; border-radius: 2px; margin: 20px 0 0; display: inline-block; transition: background 0.2s; } .cbp-vm-add:hover { color: #fff; background: #02639d; } .cbp-vm-add:before { margin-right: 5px; } /* Common icon styles */ .cbp-vm-icon:before { font-family: 'fontawesome'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; } .cbp-vm-grid:before { content: "\f00a"; } .cbp-vm-list:before { content: "\f00b"; } .cbp-vm-add:before { content: "\f055"; } /* Individual view mode styles */ /* Large grid view */ .cbp-vm-view-grid ul { text-align: center; } .cbp-vm-view-grid ul li { width: 33%; text-align: center; padding: 25px; margin: 20px 0 0; display: inline-block; min-height: 420px; vertical-align: top; } .cbp-vm-view-grid .cbp-vm-title { font-size: 2em; } .cbp-vm-view-grid .cbp-vm-details { max-width: 300px; min-height: 70px; margin: 0 auto; } .cbp-vm-view-grid .cbp-vm-price { margin: 10px 0; font-size: 1.5em; } /* List view */ .cbp-vm-view-list li { padding: 20px 0; white-space: nowrap; } .cbp-vm-view-list .cbp-vm-image, .cbp-vm-view-list .cbp-vm-title, .cbp-vm-view-list .cbp-vm-details, .cbp-vm-view-list .cbp-vm-price, .cbp-vm-view-list .cbp-vm-add { display: inline-block; vertical-align: middle; } .cbp-vm-view-list .cbp-vm-image { width: 10%; } .cbp-vm-view-list .cbp-vm-title { font-size: 1.3em; padding: 0 10px; white-space: normal; width: 23%; } .cbp-vm-view-list .cbp-vm-price { font-size: 1.3em; width: 10%; } .cbp-vm-view-list .cbp-vm-details { width: 40%; padding: 0 15px; overflow: hidden; white-space: normal; } .cbp-vm-view-list .cbp-vm-add { margin: 0; } @media screen and (max-width: 66.7em) { .cbp-vm-view-list .cbp-vm-details { width: 30%; } } @media screen and (max-width: 57em) { .cbp-vm-view-grid ul li { width: 49%; } } @media screen and (max-width: 47.375em) { .cbp-vm-view-list .cbp-vm-image { width: 20%; } .cbp-vm-view-list .cbp-vm-title { width: auto; } .cbp-vm-view-list .cbp-vm-details { display: block; width: 100%; margin: 10px 0; } .cbp-vm-view-list .cbp-vm-add { margin: 10px; } } @media screen and (max-width: 40.125em) { .cbp-vm-view-grid ul li { width: 100%; } }
3. The javascript
/** * cbpViewModeSwitch.js v1.0.0 * http://www.codrops.com * * Licensed under the MIT license. * http://www.opensource.org/licenses/mit-license.php * * Copyright 2013, Codrops * http://www.codrops.com */ (function() { var container = document.getElementById( 'cbp-vm' ), optionSwitch = Array.prototype.slice.call( container.querySelectorAll( 'div.cbp-vm-options > a' ) ); function init() { optionSwitch.forEach( function( el, i ) { el.addEventListener( 'click', function( ev ) { ev.preventDefault(); _switch( this ); }, false ); } ); } function _switch( opt ) { // remove other view classes and any any selected option optionSwitch.forEach(function(el) { classie.remove( container, el.getAttribute( 'data-view' ) ); classie.remove( el, 'cbp-vm-selected' ); }); // add the view class for this option classie.add( container, opt.getAttribute( 'data-view' ) ); // this option stays selected classie.add( opt, 'cbp-vm-selected' ); } init(); })();
This awesome jQuery plugin is developed by MARY LOU. For more Advanced Usages, please check the demo page or visit the official website.