<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>
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;
}
// 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');
});
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.