html - Simulating stackoverflow like Tab effect -
i trying same effect tab in site.
here tried: jsfiddle
i unable desired effect.
can tell me missing.
.mytabs { display: block; height: 24px; text-decoration: none; border: 1px solid rgba(0, 0, 0, 0); border-bottom: 1px solid #ccc; } .mytabs a:hover { border: 1px solid #ccc; border-bottom-color: #fff; } a.youarehere { border: 1px solid #ccc; border-bottom-color: #fff; height: 30px; }
html
<div class="tabs-container"> <nav class="mytabs"> <ul> <li><a class="youarehere" href="#">menu 1</a></li> <li><a href="#">menu 2</a></li> <li><a href="#">menu 3</a></li> </ul> </nav> </div>
css
.tabs-container{ border-bottom: 1px solid #cccccc; height: 34px; clear: both; margin-bottom: 15px; } .mytabs ul { list-style: none; padding: 0; margin: 0; } .mytabs ul li { display: inline-block; } .mytabs { border: 1px solid transparent; color: #777; display: block; float: left; font-size: 90%; height: 24px; line-height: 20px; margin: 9px 8px 0 0; padding: 0 11px 0 11px; text-decoration: none; border-bottom: 1px solid #ccc; } .mytabs a:hover { border: 1px solid #ccc; } .mytabs a.youarehere { background: #fff; border: 1px solid #ccc; border-bottom-color: #ffffff; color: black; font-size: 120%; height: 30px; line-height: 28px; margin-top: 3px; padding: 0px 11px 0px 11px; }
Comments
Post a Comment