CSS Menu

Pure CSS MENU

by Harsh Bhatnagar

HTML

<div class="tabGroup">
    <input type="radio" name="tabGroup1" id="rad1" class="tab1" checked="checked" />
    <label for="rad1">Tab 1</label>
    <input type="radio" name="tabGroup1" id="rad2" class="tab2" value="2" />
    <label for="rad2">Tab 2</label>
    <input type="radio" name="tabGroup1" id="rad3" class="tab3" />
    <label for="rad3">Tab 3</label>
    <br/>
    <div class="tab1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet tempor ex, in congue arcu. Curabitur rutrum dapibus turpis quis convallis. Morbi et enim lacinia, iaculis nunc sed, viverra sapien. Vivamus pulvinar, ligula et auctor pellentesque, urna nisi malesuada mi, ac scelerisque magna erat pulvinar enim. Nam imperdiet tincidunt convallis. Quisque sed condimentum urna. Nulla dapibus dui et dignissim egestas. Pellentesque aliquet dignissim quam et blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi egestas molestie rhoncus. Vivamus egestas eu lacus eleifend sollicitudin. Vestibulum at purus est. Nulla a hendrerit dolor.</div>
    <div class="tab2">Tab 2 content</div>
    <div class="tab3">Tab 3 content</div>
</div>
</div>

CSS

/* Set the size and font of the tab widget */
 .tabGroup {
    width: 95%;
    ;
    margin-top:10px;
}
/* Configure the radio buttons to hide off screen */
 .tabGroup > input[type="radio"] {
    position: absolute;
    left:-100px;
    top:-100px;
}
/* Configure labels to look like tabs */
 .tabGroup > input[type="radio"] + label {
    font-size:medium;
    font-weight:bold;
    color:#fff;
    background-color: #0096D6;
    border-radius:0 6px 0 6px;
    padding:10px;
}
/* Focused tabs need to be highlighted as such */
 .tabGroup > input[type="radio"]:focus + label {
    /*    border:1px dashed black;
*/
}
/* Checked tabs must be white with the bottom border removed */
 .tabGroup > input[type="radio"]:checked + label {
    background:#fff;
    cursor:default;
    color:#0096D6;
}
/* The tab content must fill the widgets size and have a nice border */
 .tabGroup > div {
    display: none;
    background-color: white;
    padding: 10px 10px;
    overflow: auto;
}
/* This matchs tabs displaying to thier associated radio inputs */
 .tab1:checked ~ .tab1, .tab2:checked ~ .tab2, .tab3:checked ~ .tab3 {
    display: block;
    margin-top:9px;
    min-height:300px;
    background-color:#eee;
}

JavaScript

$(document).ready(function () {
     $("#tabs").tabs({
         active: document.tabTest.currentTab.value
     });

     $('#tabs a').click(function (e) {
         var curTab = $('.ui-tabs-active');
         curTabIndex = curTab.index();
         document.tabTest.tabGroup1.value = curTabIndex;
     });
 });