<h1>{ ... }</h1>
<nav class="main-nav">
<!--
==================
==================
Main nav
==================
==================
-->
<div class="nav-part">
<!-- Nav info -->
<div class="nav-info">
<span>{...}</span>
</div>
<!-- Nav buttons -->
<ul class="nav-buttons">
<li>
<a href="#" data-tab="Some">
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="nav-icon">
<path fill="none" d="M0 0h24v24H0V0z"/>
<path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12zm3-4C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5S15.33 8 14.5 8zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/>
</svg>
</span>
</a>
</li>
<li>
<a href="#" data-tab="Really">
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="nav-icon">
<path fill="none" d="M0 0h24v24H0V0z"/>
<path d="M12.6 18.06c-.36.28-.87.28-1.23 0l-6.15-4.78c-.36-.28-.86-.28-1.22 0-.51.4-.51 1.17 0 1.57l6.76 5.26c.72.56 1.73.56 2.46 0l6.76-5.26c.51-.4.51-1.17 0-1.57l-.01-.01c-.36-.28-.86-.28-1.22 0l-6.15 4.79zm.63-3.02l6.76-5.26c.51-.4.51-1.18 0-1.58l-6.76-5.26c-.72-.56-1.73-.56-2.46 0L4.01 8.21c-.51.4-.51 1.18 0 1.58l6.76 5.26c.72.56 1.74.56 2.46-.01z"/>
</svg>
</span>
</a>
</li>
<li>
<a href="#" data-tab="Random">
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="nav-icon">
<path fill="none" d="M0 0h24v24H0V0z"/>
<path d="M22 16V4c0-1.1-.9-2-2-2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2zm-10.6-3.47l1.63 2.18 2.58-3.22c.2-.25.58-.25.78 0l2.96 3.7c.26.33.03.81-.39.81H9c-.41 0-.65-.47-.4-.8l2-2.67c.2-.26.6-.26.8 0zM2 7v13c0 1.1.9 2 2 2h13c.55 0 1-.45 1-1s-.45-1-1-1H5c-.55 0-1-.45-1-1V7c0-.55-.45-1-1-1s-1 .45-1 1z"/>
</svg>
</span>
</a>
</li>
<li>
<a href="#" data-tab="Stuff">
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="nav-icon">
<path fill="none" d="M0 0h24v24H0V0z"/>
<path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-1.29 1.29c-.63.63-.19 1.71.7 1.71h13.17c.89 0 1.34-1.08.71-1.71L18 16z"/>
</svg>
</span>
</a>
</li>
</ul>
</div>
<!-- Main Nav End. -->
<!--
==================
==================
Side button
==================
==================
-->
<div class="nav-part">
<ul class="nav-buttons">
<li>
<a href="#" id="color-toggle"> <!-- data-tab="Toggle!" -->
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="nav-icon">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M6.76 4.84l-1.8-1.79-1.41 1.41 1.79 1.79 1.42-1.41zM4 10.5H1v2h3v-2zm9-9.95h-2V3.5h2V.55zm7.45 3.91l-1.41-1.41-1.79 1.79 1.41 1.41 1.79-1.79zm-3.21 13.7l1.79 1.8 1.41-1.41-1.8-1.79-1.4 1.4zM20 10.5v2h3v-2h-3zm-8-5c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm-1 16.95h2V19.5h-2v2.95zm-7.45-3.91l1.41 1.41 1.79-1.8-1.41-1.41-1.79 1.8z"/>
</svg>
</span>
</a>
</li>
</ul>
</div>
<!-- Side button End. -->
</nav>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:100,300,400,700" rel="stylesheet">
/*
==================
==================
Global
==================
==================
*/
/* Reset */
*,
*:before,
*:after {
box-sizing: border-box;
box-sizing: border-box;
box-sizing: border-box;
}
/* Variables */
:root {
--c-bg: #E8EAF6; /* Background. */
--c-txt: #9FA8DA; /* Font. */
--c-i: #7E57C2; /* Icon. */
--c-btn: #FFF176; /* Button. */
}
/* Document */
html {
margin: 0;
padding: 6px; /* [!] Security margin. */
}
html:before {
content: "";
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
padding: 6px; /* [!] Security margin. */
border: 3px solid var(--c-i); /* [!] Security margin. */
}
body {
margin: 0;
font-family: 'Roboto Slab', serif;
background: var(--c-bg);
color: var(--c-txt);
}
/* Title */
h1 {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
font-size: 3.25rem;
font-weight: 100;
letter-spacing: .2rem;
}
/*
==================
==================
Nav
==================
==================
*/
/* Nav container */
.main-nav {
display: flex;
position: fixed;
bottom: 1rem;
right: 1rem;
z-index: 100;
/* Size reference */
font-size: 1rem;
}
.nav-part {
display: flex;
margin-left: .5rem;
background: #FFFFFF;
border-radius: 3.4em;
}
/* Nav buttons */
.nav-buttons {
display: flex;
margin: 0;
padding: .2em;
background: #FFFFFF;
border-radius: 3.4em;
box-shadow: 0 .1em .3em rgba(0,0,0,.1);
box-shadow: 0 .1em .3em rgba(0,0,0,.1);
/*z-index: 1;*/
}
.nav-buttons li {
margin: .2em;
list-style: none;
}
.nav-buttons li a {
display: flex;
justify-content: center;
align-items: center;
width: 2.6em;
height: 2.6em;
background: #FFFFFF;
border-radius: 50%;
}
.nav-buttons li a:hover {
background: var(--c-btn);
box-shadow: 0 .1em .3em rgba(0,0,0,.25);
box-shadow: 0 .1em .3em rgba(0,0,0,.25);
}
.nav-buttons li a:active {
transform: scale(.95);
transform: scale(.95);
box-shadow: none;
box-shadow: none;
}
/* Icons */
.nav-icon {
fill: var(--c-i);
}
.nav-buttons li a:hover .nav-icon {
fill: #FFFFFF;
}
/* Nav info */
.nav-info {
display: flex;
justify-content: center;
align-items: center;
/* Hidden by default */
width: 0;
opacity: 0;
transition:
width .2s ease-in-out 0s,
opacity .2s ease-in-out 0s;
}
.nav-info > span {
padding: .2em .8em;
pointer-events: none;
transform: translateX(.725rem);
transform: translateX(.725rem);
transition: transform 1.2s ease;
pointer-events: none;
}
/* Desktop */
@media screen and (min-width:920px){
.nav-part {
bottom: auto;
top: 1em;
right: 1em;
}
}
/*
===============================================================
Hi! Welcome to my little playground!
My name is Tobias Bogliolo. 'Open source' by default and always 'responsive',
I'm a publicist, visual designer and frontend developer based in Barcelona.
Here you will find some of my personal experiments. Sometimes usefull,
sometimes simply for fun. You are free to use them for whatever you want
but I would appreciate an attribution from my work. I hope you enjoy it.
===============================================================
*/
//==================
//==================
//Label animation
//==================
//==================
$("a[data-tab]").on({
'mouseover': function(){
//Tab text:
var dT = $(this).attr("data-tab");
$(".nav-info span").text(dT);
//Tab animation:
$(".nav-info").css({
"width": "6.85em",
"opacity": "1",
"transition": "width .2s ease-in-out 0s, opacity .2s ease-in-out 0s" //Different transition on mouseenter and on mouseout.
});
$(".nav-info span").css({
"-webkit-transform": "translateX(0)",
"transform": "translateX(0)"
});
},
'mouseout': function(){
//Tab animation:
$(".nav-info").css({
"width": "0",
"opacity": "0",
"transition": "width .6s ease-in-out .4s, opacity .2s ease-in-out .4s" //Different transition on mouseenter and on mouseout.
});
$(".nav-info span").css({
"-webkit-transform": "translateX(.725rem)",
"transform": "translateX(.725rem)"
});
}
});
//==================
//==================
//CSS variables toggle (OPTION A)
//==================
//==================
var bool = true; //Boolean.
$("#color-toggle").click(function(){
if (bool){
$("html").css({
"--c-bg": "#512DA8",
"--c-i": "#FDD835",
"--c-btn": "#E8EAF6"
});
}
else {
$("html").css({
"--c-bg": "#E8EAF6",
"--c-i": "#7E57C2",
"--c-btn": "#FFF176"
});
};
bool = !bool; //Boolean switch.
});
External CSS
This Pen doesn't use any external CSS resources.