Last active
September 27, 2021 17:44
-
-
Save ikonikre/710ef3bc8915b787bf506d803374ae67 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
<script> | |
var tabs = $('.tabs > li'); | |
tabs.on("click", function(){ | |
tabs.removeClass('active'); | |
$(this).addClass('active'); | |
}); | |
</script> | |
<link rel="stylesheet" href="style.css" title="le tabs" type="text/css" media="screen" charset="utf-8"> | |
<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
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
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; | |
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{ */ | |
ul.tabs > li.active:after{ | |
border-color : transparent #efefef transparent transparent; | |
} | |
ul.tabs > li.active:after{ | |
border-color : transparent transparent transparent #efefef; | |
} | |
ul.tabs > li{ | |
float : right; | |
margin : 5px -10px 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); | |
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