Animated Speech Bubble Nav

animated-speech-bubble-nav.markdown

Animated Speech Bubble Nav

Navigation underline transforms into speech bubble-ish. Inspired by: http://codepen.io/FWeinb/pen/hlEke/

A Pen by schadeck on CodePen.

License.

index.html

<header>
	Animated Speech Bubble Nav
</header>

<div class="speak one active"><span>item one</span></div>
<div class="speak two"><span>item two</span></div>
<div class="speak three"><span>item three</span></div>
<div class="speak four"><span>item four</span></div>
	
<footer>
 	Inspired by <a href="https://twitter.com/FWeinb" class="red">Fabrice Weinberg</a>
</footer>

script.js

// adding click events
var els = document.querySelectorAll('.speak');
[].forEach.call(els, function(el) {
	el.addEventListener('click', function() {
		[].forEach.call(els, function(clk) {
			clk.classList.remove('active');
		});
		el.classList.add('active');
	});
});

style.css

body {
	font-family: sans-serif;
	max-width: 40em;
	margin: 0 auto;
	padding: 3em 0;
	color: #333;
}
header {
	font-size: 1.5em;
	margin: 1em 0;
}
footer {
	margin-top: 4em;
	text-align: right;
	font-size: .8em;
}

.speak {
	position: relative;
	display: inline-block;
	min-width: 2.7em;
	margin: 1em;
	text-align: center;
	cursor: pointer;
}

.speak span {
	transition: color 0.3s ease-out;
	color: inherit;
}

.speak:after,
.speak:before,
.speak span:after,
.speak span:before {
	color: #333333;
	background-color: currentColor;
}

.one:before,
.one:after,
.one span:before,
.one span:after {
	background-color: #CEDD3E;
}

.two:before,
.two:after,
.two span:before,
.two span:after {
	background-color: #F27132;
}

.three:before,
.three:after,
.three span:before,
.three span:after {
	background-color: #85C3E9;
}

.four:before,
.four:after,
.four span:before,
.four span:after {
	background-color: #FDBE2A;
}

.speak:after,
.speak:before,
.speak span:before,
.speak span:after {
	position: absolute;
	content: '';
	border-radius: 4px;
}

.speak:after,
.speak:before {
	bottom: -6px;
	height: 4px;
}

.speak:after {
	left: 0;
	right: 39px;
}

.speak:before {
	right: -2px;
	width: 13px;
}

.speak span:before {
	height: 0;
	width: 4px;
	bottom: -2px;
	right: 7px;
	transition: height .3s, bottom .3s;
}

.speak span:after {
	height: 4px;
	width: 34px;
	bottom: -6px;
	right: 8px;
	transform: rotate(0deg);
	transform-origin: left top;
	transition: transform .3s, right .3s, width .3s;
}

.speak.active span:before {
	height: 22px;
	bottom: -24px;
}

.speak.active span:after {
	right: 1px;
	width: 40px;
	transform: rotate(30deg);
}

.speak.active,
.speak.active {
	outline: 0;
}