<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/abbeysalvo/pen/VjvRaN?limit=all&page=50&q=nav+tabs" />
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<style class="cp-pen-styles">/*nav styles*/
body {
background:snow;
}
#intro {
background: rgba(166,204,216,.25);
min-height:500px;
margin: 0 auto;
overflow: hidden !important;
position: relative;
width: 100%;
}
.container {
max-width:1200px;
}
ul.nav-tabs {
background: transparent;
border-bottom:none;
float:left;
margin: 20px auto;
padding:0;
width: 100%;
}
ul.nav-tabs li {
list-style-type: none;
/*relative positioning for list items along with overflow hidden to contain the overflowing ripple*/
float:left;
margin:0;
padding:0;
position:relative;
text-align:center;
width:16.6666%;
}
ul.nav-tabs li a {
border:none;
border-radius:100%;
display: block;
line-height:inherit;
padding: 10px 15px;
margin:0 auto 20px auto;
text-decoration: none;
cursor: pointer; /*since the links are dummy without href values*/
/*prevent text selection*/
user-select: none;
}
/*.ink styles - the elements which will create the ripple effect. The size and position of these elements will be set by the JS code. Initially these elements will be scaled down to 0% and later animated to large fading circles on user click.*/
.ink {
display: block;
position: absolute;
border-radius: 100%;
transform: scale(0);
}
.nav-icon {
background: url('https://www.connexus.com/extra/Curriculum/interactives/widgetTutorials/images/icons/nav-01.png') no-repeat center center;
background-size:100%;
border-radius: 50%;
height:100px;
left:0px;
margin:0 auto;
margin-bottom:20px;
padding:0;
top:0px;
transition: all 0.3s ease;
width:100px;
-webkit-box-shadow:
4px 4px 16px 0px rgba(0, 0, 0, 0.1),
inset 0 0 0 0px rgba(255,255,255,0.75);
-moz-box-shadow:
4px 4px 16px 0px rgba(0, 0, 0, 0.1),
inset 0 0 0 0px rgba(255,255,255,0.75);
-o-box-shadow:
4px 4px 16px 0px rgba(0, 0, 0, 0.1),
inset 0 0 0 0px rgba(255,255,255,0.75);
box-shadow:
4px 4px 16px 0px rgba(0, 0, 0, 0.1),
inset 0 0 0 0px rgba(255,255,255,0.75);
}
.nav-icon:hover {
left:3px;
top:3px;
-webkit-box-shadow:
3px 3px 6px 0px rgba(0, 0, 0, 0.25),
inset 0 0 0 4px rgba(255,255,255,0.75);
-moz-box-shadow:
3px 3px 6px 0px rgba(0, 0, 0, 0.25),
inset 0 0 0 4px rgba(255,255,255,0.75);
-o-box-shadow:
3px 3px 6px 0px rgba(0, 0, 0, 0.25),
inset 0 0 0 4px rgba(255,255,255,0.75);
box-shadow:
3px 3px 6px 0px rgba(0, 0, 0, 0.25),
inset 0 0 0 4px rgba(255,255,255,0.75);
}
.nav-icon:active {
left:6px;
top:6px;
-webkit-box-shadow:
1px 1px 3px 0px rgba(0, 0, 0, 0.75),
inset 0 0 0 50px rgba(255,255,255,0.75);
-moz-box-shadow:
1px 1px 3px 0px rgba(0, 0, 0, 0.75),
inset 0 0 0 50px rgba(255,255,255,0.75);
-o-box-shadow:
1px 1px 3px 0px rgba(0, 0, 0, 0.75),
inset 0 0 0 50px rgba(255,255,255,0.75);
box-shadow:
1px 1px 3px 0px rgba(0, 0, 0, 0.75),
inset 0 0 0 50px rgba(255,255,255,0.75);
}
li.active .nav-icon {
left:3px;
top:3px;
-webkit-box-shadow:
3px 3px 6px 0px rgba(0, 0, 0, 0.25),
inset 0 0 0 4px rgba(10,52,62,1);
-moz-box-shadow:
3px 3px 6px 0px rgba(0, 0, 0, 0.25),
inset 0 0 0 4px rgba(10,52,62,1);
-o-box-shadow:
3px 3px 6px 0px rgba(0, 0, 0, 0.25),
inset 0 0 0 4px rgba(10,52,62,1);
box-shadow:
3px 3px 6px 0px rgba(0, 0, 0, 0.25),
inset 0 0 0 4px rgba(10,52,62,1);
}
.nav-icon.two {
background-image: url('https://www.connexus.com/extra/Curriculum/interactives/widgetTutorials/images/icons/nav-02.png');
}
.nav-icon.three {
background-image: url('https://www.connexus.com/extra/Curriculum/interactives/widgetTutorials/images/icons/nav-03.png');
}
.nav-icon.four {
background-image: url('https://www.connexus.com/extra/Curriculum/interactives/widgetTutorials/images/icons/nav-04.png');
}
.nav-icon.five {
background-image: url('https://www.connexus.com/extra/Curriculum/interactives/widgetTutorials/images/icons/nav-05.png');
}
.nav-icon.six {
background-image: url('https://www.connexus.com/extra/Curriculum/interactives/widgetTutorials/images/icons/nav-06.png');
}
.nav span {
color:rgba(34,34,34,1);
font: normal 14px/28px Montserrat;
font-family: 'Source Sans Pearson';
font-size: 14px;
font-weight: 500;
line-height:18px;
width: 100%;
}
.tab-content {
}</style></head><body>
<div id="intro">
<div class="container">
<ul class="nav nav-tabs" data-tabs="tabs">
<li class="active">
<a href="#pane1" data-toggle="tab" data-color="rgba(166,204,216,.25)" class="nav-icon one">
</a>
<span>Introduction</span>
</li>
<li>
<a href="#pane2" data-toggle="tab" data-color="rgba(245, 190, 103,.25)" class="nav-icon two">
</a>
<span>What are they?</span>
</li>
<li>
<a href="#pane3" data-toggle="tab" data-color="rgba(251, 203, 190,.25)" class="nav-icon three">
</a>
<span>What do they <br/>look like?</span>
</li>
<li>
<a href="#pane4" data-toggle="tab" data-color="rgba(166,204,216,.25)" class="nav-icon four">
</a>
<span>How do I use <br/>the menu options?</span>
</li>
<li>
<a href="#pane5" data-toggle="tab" data-color="rgba(245, 190, 103,.25)" class="nav-icon five">
</a>
<span>What features <br/>can help me?</span>
</li>
<li>
<a href="#pane6" data-toggle="tab" data-color="rgba(251, 203, 190,.25)" class="nav-icon six">
</a>
<span>General Tips</span>
</li>
</ul>
<div class="tab-content">
<div id="pane1" class="tab-pane fade in active">
<div class="video">Video 1: <em>Introduction</em></div>
<div class="inner container-fluid">
<p class="column two">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait nulla facilisi. </p>
</div>
</div>
<div id="pane2" class="tab-pane fade">
<div class="video">Video 2: <em>What are they?</em></div>
<div class="inner container-fluid">
<p class="column two">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat
nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
</div>
<div id="pane3" class="tab-pane fade">
<div class="video">Video 3: <em>What do they look like?</em></div>
<div class="inner container-fluid">
<p class="column two">Dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p>
</div>
</div>
<div id="pane4" class="tab-pane fade">
<div class="video">Video 4: <em>How do I use the menu options?</em></div>
<div class="inner container-fluid">
<p class="column two">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
<div id="pane5" class="tab-pane fade">
<div class="video">Video 5: <em>What features can help me?</em></div>
<div class="inner container-fluid">
<p class="column two">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
</div>
<div id="pane6" class="tab-pane fade">
<div class="video">Video 6: <em>General Tips</em></div>
</div>
</div>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://code.jquery.com/jquery-2.2.4.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js'></script><script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
<script >//jQuery time
var parent, ink, d, x, y, color;
$("ul li a").click(function(e){
color = $(this).data('color');
parent = $(this).parent();
parent2 = $('#intro');
//create .ink element if it doesn't exist
if(parent2.find(".ink").length == 0)
parent2.prepend("<span class='ink'></span>");
ink = parent2.find(".ink");
//incase of quick double clicks stop the previous animation
ink.removeClass("animate");
//set size of .ink
if(!ink.height() && !ink.width())
{
//use parent's width or height whichever is larger for the diameter to make a circle which can cover the entire element.
d = Math.max(parent2.outerWidth(), parent2.outerHeight());
ink.css({height: d, width: d});
}
//get click coordinates
//logic = click coordinates relative to page - parent's position relative to page - half of self height/width to make it controllable from the center;
//alert(e.pageX +', '+e.pageY);
x = e.pageX - parent2.offset().left - ink.width()/2;
y = e.pageY - parent2.offset().top - ink.height()/2;
//set the position and add class .animate
//ink.css({top: y+'px', left: x+'px'}).css('background',color).addClass("animate");
TweenMax.set(ink, {
backgroundColor: color,
x: x+'px',
opacity:1,
scale:0,
y: y+'px'
});
TweenMax.to(ink, 1, {
opacity:0,
scale:1.5
});
TweenMax.to(parent2, 1, {
backgroundColor: color
});
$('li').removeClass();
})
//# sourceURL=pen.js
</script>
</body></html>
