This is html div tab design usign pure css. this tab design demo without javascript or other plugins. this is pure css tab desing demo. when you click on tab then is tab also selected after open. In this demo we create horizontal tab design. this work smotly and fast. it can not take time into load.

We allows to free snippets of tabs in html using css example , you can download full code of html tabs example with code layout. Here in this post i will give you example of simple css tabs snippet and you will get simple code of html, css and jquery. In html tabs without javascript snippet i give you three tab with html, css and js, you can easily get code of tab menu in html layout.


<!DOCTYPE html> <html lang="en"> <head> <link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet"> </head> <body> <div class="tabs"> <ul role="tablist"> <li> <input type="radio" name="tabs" id="tab1" checked /> <label for="tab1" role="tab" aria-selected="true" aria-controls="panel1" tabindex="0">Step 1</label> <div id="tab-content1" class="tab-content" role="tabpanel" aria-labelledby="description" aria-hidden="false"> <p> 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> </li> <li> <input type="radio" name="tabs" id="tab2" /> <label for="tab2" role="tab" aria-selected="false" aria-controls="panel2" tabindex="0">Step 2</label> <div id="tab-content2" class="tab-content" role="tabpanel" aria-labelledby="specification" aria-hidden="true"> <p> 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> </li> <li> <input type="radio" name="tabs" id="tab3" /> <label for="tab3" role="tab" aria-selected="false" aria-controls="panel2" tabindex="0">Step 3</label> <div id="tab-content2" class="tab-content" role="tabpanel" aria-labelledby="specification" aria-hidden="true"> <p> 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> </li> </ul> </div> </body> </html>
*{ margin:0px; padding: 0px; font-family: 'Abel', sans-serif; color:#fff; } body{ background: #9b59b6; } .tabs{ position: relative; text-align: left; width:80%; margin: 0 auto; margin-top:30px; } .tabs li { float: left; display: block; } .tabs input[type="radio"] { position: absolute; top: 0; left: -9999px; } .tabs label { position: relative; display: block; padding: 14px 21px; border-radius: 2px 2px 0 0; font-size: 20px; background: #8e44ad; cursor: pointer; top:5px; transition: all 0.2s ease-in-out; } .tabs label:hover { background: #703688; } .tabs .tab-content { position: absolute; z-index: 2; display: none; line-height: 25px; padding: 25px; top: 53px; left: 0; background: #612e76; } .tabs [id^="tab"]:checked + label { top: 0; padding-top: 17px; background: #612e76; } .tabs [id^="tab"]:checked ~ [id^="tab-content"] { display: block; }

Please Subscribe Your Email Address, We Will Notify You When Add New Snippet:





Random Post