Created
August 24, 2012 19:04
-
-
Save Utilitron/3454455 to your computer and use it in GitHub Desktop.
Pure CSS Tab Nav
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <head> | |
| <link rel="stylesheet" href="tabs_html5.css"/> | |
| <link rel="stylesheet" href="tabs.css"/> | |
| </head> | |
| <body> | |
| <h2>HTML 5 Nav</h2> | |
| <nav> | |
| <input type="radio" id="tab1_nav" name="tabs_nav" value="tab1_nav" checked="checked"> | |
| <label for="tab1_nav">Tab 1</label> | |
| <input type="radio" id="tab2_nav" name="tabs_nav" value="tab2_nav"/> | |
| <label for="tab2_nav">Tab 2</label> | |
| <input type="radio" id="tab3_nav" name="tabs_nav" value="tab3_nav"/> | |
| <label for="tab3_nav">Tab 3</label> | |
| <input type="radio" id="tab4_nav" name="tabs_nav" value="tab4_nav"/> | |
| <label for="tab4_nav">Tab 4</label> | |
| <input type="radio" id="tab5_nav" name="tabs_nav" value="tab5_nav"/> | |
| <label for="tab5_nav">Tab 5</label> | |
| </nav> | |
| <br/> | |
| <h2>HTML Div</h2> | |
| <div> | |
| <input type="radio" id="tab1" name="tabs" value="tab1" checked="checked"> | |
| <label for="tab1">Tab 1</label> | |
| <input type="radio" id="tab2" name="tabs" value="tab2"/> | |
| <label for="tab2">Tab 2</label> | |
| <input type="radio" id="tab3" name="tabs" value="tab3"/> | |
| <label for="tab3">Tab 3</label> | |
| <input type="radio" id="tab4" name="tabs" value="tab4"/> | |
| <label for="tab4">Tab 4</label> | |
| <input type="radio" id="tab5" name="tabs" value="tab5"/> | |
| <label for="tab5">Tab 5</label> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Navigator */ | |
| div { | |
| width: 100%; | |
| height:20px; | |
| } | |
| div input[type="radio"]{ | |
| /*hide the radio button*/ | |
| visibility: hidden; | |
| margin: 0px; | |
| } | |
| div label { | |
| float:left; | |
| display:block; | |
| cursor:pointer; cursor:hand; | |
| width:100px; | |
| font-size: 12px; | |
| display: block; | |
| text-transform: uppercase; | |
| padding: 0px; | |
| margin: 0px; | |
| background:#EEEEEE; | |
| border-top:solid 1px #AAAAAA; | |
| border-left:solid 1px #AAAAAA; | |
| border-right:solid 1px #333333; | |
| border-bottom:solid 1px #3D4A60; | |
| text-align: center; | |
| color:#333333; | |
| } | |
| div input[type="radio"]:checked + label { | |
| background:#FFFFFF; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Navigator */ | |
| nav { | |
| width: 100%; | |
| height:20px; | |
| } | |
| nav input[type="radio"]{ | |
| /*hide the radio button*/ | |
| visibility: hidden; | |
| margin: 0px; | |
| } | |
| nav label { | |
| float:left; | |
| display:block; | |
| cursor:pointer; cursor:hand; | |
| width:100px; | |
| font-size: 12px; | |
| display: block; | |
| text-transform: uppercase; | |
| padding: 0px; | |
| margin: 0px; | |
| background:#EEEEEE; | |
| border-top:solid 1px #AAAAAA; | |
| border-left:solid 1px #AAAAAA; | |
| border-right:solid 1px #333333; | |
| border-bottom:solid 1px #3D4A60; | |
| text-align: center; | |
| color:#333333; | |
| } | |
| nav input[type="radio"]:checked + label { | |
| background:#FFFFFF; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment