Created
March 17, 2013 07:07
-
-
Save jcblw/5180460 to your computer and use it in GitHub Desktop.
Chrome Tabs
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
<div class=tab-container> | |
<ul class="tabs clearfix" > | |
<li> | |
<a href=# >Users</a> | |
</li> | |
<li class=active > | |
<a href=# >Pending Lots</a> | |
</li> | |
<li> | |
<a href=# >Nearby Lots</a> | |
</li> | |
<li> | |
<a href=# >Recent Lots</a> | |
</li> | |
</ul> | |
</div> | |
<div class=outer-circle></div> |
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
var tabs = $('.tabs > li'); | |
tabs.on("click", function(){ | |
tabs.removeClass('active'); | |
$(this).addClass('active'); | |
}); |
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
body{ | |
background : #efefef; | |
font : .8em sans-serif; | |
margin: 0; | |
} | |
.tab-container{ | |
background : #2BA6CB; | |
margin: 0; | |
padding: 0; | |
max-height: 35px; | |
} | |
ul.tabs{ | |
margin: 0; | |
list-style-type : none; | |
line-height : 35px; | |
max-height: 35px; | |
overflow: hidden; | |
display: inline-block; | |
padding-right: 20px | |
} | |
ul.tabs > li.active{ | |
z-index: 2; | |
background: #efefef; | |
} | |
ul.tabs > li.active:before{ | |
border-color : transparent #efefef transparent transparent; | |
} | |
ul.tabs > li.active:after{ | |
border-color : transparent transparent transparent #efefef; | |
} | |
ul.tabs > li{ | |
float : right; | |
margin : 5px -13px 0; | |
border-top-right-radius: 25px 170px; | |
border-top-left-radius: 20px 90px; | |
padding : 0 30px 0 25px; | |
height: 170px; | |
background: #ddd; | |
position : relative; | |
box-shadow: 0 10px 20px rgba(0,0,0,.5); | |
z-index: n; | |
max-width : 200px; | |
} | |
ul.tabs > li > a{ | |
display: inline-block; | |
max-width:100%; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
text-decoration: none; | |
color: #222; | |
} | |
ul.tabs > li:before, ul.tabs > li:after{ | |
content : ''; | |
background : transparent; | |
height: 20px; | |
width: 20px; | |
border-radius: 100%; | |
border-width: 10px; | |
top: 0px; | |
border-style : solid; | |
position : absolute; | |
} | |
ul.tabs > li:before{ | |
border-color : transparent #ddd transparent transparent; | |
-webkit-transform : rotate(48deg); | |
left: -23px; | |
} | |
ul.tabs > li:after{ | |
border-color : transparent transparent transparent #ddd; | |
-webkit-transform : rotate(-48deg); | |
right: -17px; | |
} | |
/* Clear Fix took for HTML 5 Boilerlate*/ | |
.clearfix:before, .clearfix:after { content: ""; display: table; } | |
.clearfix:after { clear: both; } | |
.clearfix { zoom: 1; } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment