<!-- TAB TEMPLATE -->
<svg style="position: absolute; margin-left: -200%; fill:transparent; stroke: none" >
<polygon id="tab-shape-left" class="tab-shape tab-shape-left" points="900,30 0,30 10,0 900,0 " />
<polygon id="tab-shape-right" class="tab-shape tab-shape-right" points="20,30 0,30 0,0 " />
</svg>
<div class="container">
<nav role="navigation" class="main-navigation">
<ul>
<li class="tab-1 active" data-bg-color="hsl(190, 100%, 35%)">
<a href="#home">
<span>Home</span>
<svg class="tab-left">
<use xlink:href="#tab-shape-left"></use>
</svg>
<svg class="tab-right">
<use xlink:href="#tab-shape-right"></use>
</svg>
</a>
</li>
<li class="tab-2" data-bg-color="hsl(205, 80%, 45%)">
<a href="#about">
<span>About</span>
<svg class="tab-left">
<use xlink:href="#tab-shape-left"></use>
</svg>
<svg class="tab-right">
<use xlink:href="#tab-shape-right"></use>
</svg>
</a>
</li>
<li class="tab-3" data-bg-color="hsl(228,80%,60%)">
<a href="#clients">
<span>Tabwithmanyletters</span>
<svg class="tab-left">
<use xlink:href="#tab-shape-left"></use>
</svg>
<svg class="tab-right">
<use xlink:href="#tab-shape-right"></use>
</svg>
</a>
</li>
<li class="tab-4" data-bg-color="hsl(255,80%,65%)">
<a href="#contact">
<span>Contact</span>
<svg class="tab-left">
<use xlink:href="#tab-shape-left"></use>
</svg>
<svg class="tab-right">
<use xlink:href="#tab-shape-right"></use>
</svg>
</a>
</li>
</ul>
</nav>
<div class="main-content">
<article class="article">
<h2><a href="https://codepen.io/atelierbram/pen/JfKmH">Flexible tabsizes with SVG</a></h2>
<p>These SVG navtabs combine the concept behind Douglas Bowman’s “Sliding doors”, and SVG template technique. It requires two SVG shapes: one very wide one for the left side, and one small just for the right corner.
</p>
<footer>
<h3>Resources</h3>
<ul>
<li><a href="https://codepen.io/chriscoyier/pen/LixbE">Original demo created by Chris Coyier</a></li>
<li><a href="https://css-tricks.com/svg-tabs-using-svg-shape-template/">SVG Tabs (Using an SVG Shape as Template) - article on CSS-Tricks by Chris Coyier</a></li>
<li><a href="https://tympanus.net/codrops/2013/11/27/svg-icons-ftw/">SVG icons for the win - article on Codrops by Oleg Solomka</a></li>
<li><a href="http://alistapart.com/article/slidingdoors">Sliding Doors of CSS - article on A List Apart by Douglas Bowman</a></li>
</ul>
</footer>
</article>
</div>
</div><!-- /.container -->
*,
*::before,
*::after {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
box-sizing: border-box;
/* outline: 1px dotted salmon; */
outline: 0;
}
html {
font-size: 16px;
}
html,
body {
min-height: 100%;
background-color: #adf1ff;
}
body {
font: 100%/1.375 AvenirNext-Regular, "Lucida Grande", Corbel, "Trebuchet Ms", sans-serif;
color: #111;
}
.container {
max-width: 40em;
margin: 0 auto;
}
a {
text-decoration: none;
color: #1942e6;
}
h2 a {
color: #4768eb;
}
a,
a:focus {
outline: 0;
}
.main-navigation {
overflow: auto;
position: relative;
margin: 3em auto 0;
ul {
list-style: none;
overflow: auto;
}
li {
float: left;
position: relative;
&.active {
z-index: 6;
}
}
a {
display: block;
position: relative;
height: 30px;
color: rgba(0,0,0,.75);
text-transform: uppercase;
padding: 0 10px 0 20px;
&:hover {
color: rgba(255,255,255,.85);
}
}
svg {
height: 100%;
position: absolute;
top: 0;
bottom:0;
z-index: 1;
pointer-events: none;
/* transition: all .25s; */
}
.tab-left {
width: 100%;
left: 0;
}
.tab-right {
width: 20px;
/* weird gap in Firefox */
/* right: -20px; */
right: 0;
transform: translateX(20px);
}
span {
position: relative;
font-size: .8125em;
z-index: 2;
display: inline-block;
padding-top: 8px;
/* background: rgba(0,0,0,.5); */
overflow: hidden;
vertical-align: top;
}
.active a {
color: #fff;
}
.tab-1 {
z-index: 4;
svg {
fill: hsla(190, 100%, 35%, 0.5);
}
a:hover svg {
fill: hsla(190, 100%, 35%, 0.75);
}
}
.tab-2 {
z-index: 3;
svg {
fill: hsla(205, 80%, 45%, 0.5);
}
a:hover svg {
fill: hsla(205, 80%, 45%, 0.75);
}
}
.tab-3 {
z-index: 2;
svg {
fill: hsla(228, 80%, 60%, 0.5);
}
a:hover svg {
fill: hsla(228, 80%, 60%, 0.75);
}
}
.tab-4 {
z-index: 1;
svg {
fill: hsla(255, 80%, 65%, 0.5);
}
a:hover svg {
fill: hsla(255, 80%, 65%, 0.75);
}
}
.tab-1.active svg {
fill: hsla(190, 100%, 35%, 1);
}
.tab-2.active svg {
fill: hsla(205, 80%, 45%, 1);
}
.tab-3.active svg {
fill: hsla(228, 80%, 60%, 1);
}
.tab-4.active svg {
fill: hsla(255, 80%, 65%, 1);
}
}
/* general styles */
.main-content {
position: relative;
z-index: 10;
background-color: hsl(190, 100%, 35%);
padding-top: .25em;
margin-bottom: 3em;
}
.article {
background: hsla(0,0%,100%,0.95);
padding: 2em 3em;
h2 {
text-transform: uppercase;
font-size: 2em;
margin-bottom: 0.5em;
}
h3 {
font-size: 1.5em;
margin-top: 0.25em;
margin-bottom: 0.125em;
color: #01697e;
}
}
h1, h2, h3, .main-navigation span {
font-family: AvenirNextCondensed-DemiBold, "Lucida Grande", Corbel, "Trebuchet Ms", sans-serif;
}
p {
padding: .5em 0;
}
footer ul {
list-style: square;
color: #97a9f3;
}
footer li {
text-indent: -.125em;
margin-left: .125em;
}
footer a {
display: block;
padding: .125em 0;
}
@media (max-width: 639px) {
.article {
padding-left: 2em;
padding-right: 2em;
}
}
@media (max-width: 440px) {
.main-navigation svg {
width: 0;
height: 0;
display: none;
}
.main-navigation li {
width: 50%;
}
.main-navigation a {
padding-left: 10px;
}
.tab-1 {
a {
background-color: hsla(190, 100%, 35%, 0.5);
}
a:hover {
background-color: hsla(190, 100%, 35%, 0.75);
}
}
.tab-2 {
a {
background-color: hsla(205, 80%, 45%, 0.5);
}
a:hover {
background-color: hsla(205, 80%, 45%, 0.75);
}
}
.tab-3 {
a {
background-color: hsla(228, 80%, 60%, 0.5);
}
a:hover {
background-color: hsla(228, 80%, 60%, 0.75);
}
}
.tab-4 {
a {
background-color: hsla(255, 80%, 65%, 0.5);
}
a:hover {
background-color: hsla(255, 80%, 65%, 0.75);
}
}
.tab-1.active a {
background-color: hsla(190, 100%, 35%, 1);
}
.tab-2.active a {
background-color: hsla(205, 80%, 45%, 1);
}
.tab-3.active a {
background-color: hsla(228, 80%, 60%, 1);
}
.tab-4.active a {
background-color: hsla(255, 80%, 65%, 1);
}
.article {
padding-left: 1.5em;
padding-right: 1.5em;
}
}
@media (max-width: 350px) {
.main-navigation li {
width: 100%;
}
}
var menuItems = $('.main-navigation li');
menuItems.on("click", function(event) {
menuItems.removeClass("active");
$(this).addClass("active");
$(".main-content").css({
"background": $(this).data("bg-color")
});
event.preventDefault();
});
Also see: Tab Triggers