How to build a circular navbar in bootstrap 3 - html

Question

I am trying to build an imitation of this amazing circular navbar.
Norse has done an amazing job on it
<div class="container-fluid" id="factoid-info-container">
<!-- INFO -->
<div class="row factoid-top factoid-row">
<div class="col-sm-12 factoid-info-center visible-xs" id="center-title-mobile">
<div id="factoid-title-mobile">
<h2>what we do</h2>
</div>
</div>
<div class="col-sm-5">
<div id="factoid-info-7" class="fact text-right">
<h3 class="ft fact-title-7" style="opacity: 0.2;">
47 Countries
</h3>
<p class="factoid-content" id="factoid-content-7" style="display: none;">
Norse Operates In 47 Countries Around The Globe
</p>
</div>
</div>
<div class="col-sm-5 col-sm-offset-2">
<div id="factoid-info-1" class="fact text-left">
<h3 class="ft fact-title-1" style="opacity: 0.2;">
1,500
</h3>
<p class="factoid-content" id="factoid-content-1" style="display: none;">
Norse weighs more than 1,500 actuarial variables in risk score
calculations for every IP address, and resources more than 1M addresses
every day.
</p>
</div>
</div>
</div>
<div class="row factoid-middle factoid-row">
<div class="col-sm-4">
<div id="factoid-info-6" class="fact text-right">
<h3 class="ft fact-title-6" style="opacity: 0.2;">
16,000,000
</h3>
<p class="factoid-content" id="factoid-content-6" style="display: none;">
Norse operates as a tier-1 carrier, controlling more than
16 million ipv4 addresses and operating 6 autonomous systems worldwide
</p>
</div>
</div>
<div class="col-sm-4 col-sm-offset-4">
<div id="factoid-info-2" class="fact text-left">
<h3 class="ft fact-title-2 factoid-color" style="opacity: 1;">
6,000
</h3>
<p class="factoid-content" id="factoid-content-2" style="display: block;">
Norse sensors and honeypots can emulate more than 6,000 commonly-attacked devices and applications.
</p>
</div>
</div>
</div>
<div class="row factoid-bottom factoid-row">
<div class="col-sm-4">
<div id="factoid-info-5" class="fact text-right">
<h3 class="ft fact-title-5" style="opacity: 0.2;">
8,000,000 SENSORS
</h3>
<p class="factoid-content" id="factoid-content-5" style="display: none;">
Norse receives instant attack telemetry from more than 8 million sensors
deployed everywhere in the world.
</p>
</div>
</div>
<div class="col-sm-4">
<div id="factoid-info-4" class="fact text-center">
<h3 class="ft fact-title-4" style="opacity: 0.2;">200,000 TOR NODES</h3>
<p class="factoid-content" id="factoid-content-4" style="display: none;">
Norse Tracks more than 200,000 tor exit nodes: that's
five times more than any other intelligence source
</p>
</div>
</div>
<div class="col-sm-4 col-md-4">
<div id="factoid-info-3" class="fact text-left">
<h3 class="ft fact-title-3" style="opacity: 0.2;">7 PETABYTES</h3>
<p class="factoid-content" id="factoid-content-3" style="display: none;">
Norse’s operates the world’s largest commercial attack intelligence
database, with more than 7 Petabytes of detailed attack histories.
</p>
</div>
</div>
</div>
<div class="hidden-xs" id="center-title">
<div id="factoid-title">
<h2>what we do</h2>
</div>
</div>
<!-- CIRCLE NAV -->
<div class="factoid-nav">
<div id="slider"><div class="jcs-panel noselect" style="border-width: 11px; border-radius: 506px;"><div class="jcs" style="width: 484px; height: 484px; border-radius: 484px;"><span class="jcs-value" style="width: 220px; height: 220px; font-size: 55px; top: 101px; left: 101px;">80</span></div><div class="jcs-indicator" style="width: 55px; height: 55px; top: 200.286px; left: 368.494px; transform: rotate(80deg);"> </div></div></div>
<div id="white-border-slider"></div>
<div id="slider-bg"></div>
</div>
</div>
Has anyone tried to build something like this?
If yes can you give me some direction on how to proceed

Answer 1

Try with this below code it may help you.
$(document).ready(function() {
$(".trigger").click(function() {
$(".menu").toggleClass("active");
});
});
.absolute-center,
.menu,
.menu .btn .fa,
.menu .btn.trigger .line {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.menu {
width: 5em;
height: 5em;
}
.menu .btn {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background: rgba(255, 015, 255, 0.15);
opacity: 0;
z-index: -10;
cursor: pointer;
-webkit-transition: opacity 1s, z-index 0.3s, -webkit-transform 1s;
transition: opacity 1s, z-index 0.3s, transform 1s;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.menu .btn .fa {
font-size: 3em;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
.menu .btn:hover .fa { color: rgba(255, 255, 255, 0.7); }
.menu .btn.trigger {
opacity: 1;
z-index: 100;
cursor: pointer;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
.menu .btn.trigger:hover {
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
.menu .btn.trigger:hover .line { background-color: rgba(255, 255, 255, 0.7); }
.menu .btn.trigger:hover .line:before,
.menu .btn.trigger:hover .line:after { background-color: rgba(255, f15, 255, 0.7); }
.menu .btn.trigger .line {
width: 60%;
height: 6px;
background: #000;
border-radius: 6px;
-webkit-transition: background-color 0.3s, height 0.3s, top 0.3s;
transition: background-color 0.3s, height 0.3s, top 0.3s;
}
.menu .btn.trigger .line:before,
.menu .btn.trigger .line:after {
content: "";
display: block;
position: absolute;
left: 0;
width: 100%;
height: 6px;
background: #000;
border-radius: 6px;
-webkit-transition: background-color 0.3s, -webkit-transform 0.3s;
transition: background-color 0.3s, transform 0.3s;
}
.menu .btn.trigger .line:before {
top: -12px;
-webkit-transform-origin: 15% 100%;
-ms-transform-origin: 15% 100%;
transform-origin: 15% 100%;
}
.menu .btn.trigger .line:after {
top: 12px;
-webkit-transform-origin: 25% 30%;
-ms-transform-origin: 25% 30%;
transform-origin: 25% 30%;
}
.menu .rotater {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.menu.active .btn-icon {
opacity: 1;
z-index: 50;
}
.menu.active .trigger .line {
height: 0px;
top: 45%;
}
.menu.active .trigger .line:before {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
width: 110%;
}
.menu.active .trigger .line:after {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
width: 110%;
}
/* horrible things are happening here
for some reason nth-child(1) is always busy and elements starting from 2 */
.rotater:nth-child(1) {
-webkit-transform: rotate(-22.5deg);
-ms-transform: rotate(-22.5deg);
transform: rotate(-22.5deg);
}
.menu.active .rotater:nth-child(1) .btn-icon {
-webkit-transform: translateX(-10em) rotate(22.5deg);
-ms-transform: translateX(-10em) rotate(22.5deg);
transform: translateX(-10em) rotate(22.5deg);
}
.rotater:nth-child(2) {
-webkit-transform: rotate(22.5deg);
-ms-transform: rotate(22.5deg);
transform: rotate(22.5deg);
}
.menu.active .rotater:nth-child(2) .btn-icon {
-webkit-transform: translateX(-10em) rotate(-22.5deg);
-ms-transform: translateX(-10em) rotate(-22.5deg);
transform: translateX(-10em) rotate(-22.5deg);
}
.rotater:nth-child(3) {
-webkit-transform: rotate(67.5deg);
-ms-transform: rotate(67.5deg);
transform: rotate(67.5deg);
}
.menu.active .rotater:nth-child(3) .btn-icon {
-webkit-transform: translateX(-10em) rotate(-67.5deg);
-ms-transform: translateX(-10em) rotate(-67.5deg);
transform: translateX(-10em) rotate(-67.5deg);
}
.rotater:nth-child(4) {
-webkit-transform: rotate(112.5deg);
-ms-transform: rotate(112.5deg);
transform: rotate(112.5deg);
}
.menu.active .rotater:nth-child(4) .btn-icon {
-webkit-transform: translateX(-10em) rotate(-112.5deg);
-ms-transform: translateX(-10em) rotate(-112.5deg);
transform: translateX(-10em) rotate(-112.5deg);
}
.rotater:nth-child(5) {
-webkit-transform: rotate(157.5deg);
-ms-transform: rotate(157.5deg);
transform: rotate(157.5deg);
}
.menu.active .rotater:nth-child(5) .btn-icon {
-webkit-transform: translateX(-10em) rotate(-157.5deg);
-ms-transform: translateX(-10em) rotate(-157.5deg);
transform: translateX(-10em) rotate(-157.5deg);
}
.rotater:nth-child(6) {
-webkit-transform: rotate(202.5deg);
-ms-transform: rotate(202.5deg);
transform: rotate(202.5deg);
}
.menu.active .rotater:nth-child(6) .btn-icon {
-webkit-transform: translateX(-10em) rotate(-202.5deg);
-ms-transform: translateX(-10em) rotate(-202.5deg);
transform: translateX(-10em) rotate(-202.5deg);
}
.rotater:nth-child(7) {
-webkit-transform: rotate(247.5deg);
-ms-transform: rotate(247.5deg);
transform: rotate(247.5deg);
}
.menu.active .rotater:nth-child(7) .btn-icon {
-webkit-transform: translateX(-10em) rotate(-247.5deg);
-ms-transform: translateX(-10em) rotate(-247.5deg);
transform: translateX(-10em) rotate(-247.5deg);
}
.rotater:nth-child(8) {
-webkit-transform: rotate(292.5deg);
-ms-transform: rotate(292.5deg);
transform: rotate(292.5deg);
}
.menu.active .rotater:nth-child(8) .btn-icon {
-webkit-transform: translateX(-10em) rotate(-292.5deg);
-ms-transform: translateX(-10em) rotate(-292.5deg);
transform: translateX(-10em) rotate(-292.5deg);
}
.rotater:nth-child(9) {
-webkit-transform: rotate(337.5deg);
-ms-transform: rotate(337.5deg);
transform: rotate(337.5deg);
}
.menu.active .rotater:nth-child(9) .btn-icon {
-webkit-transform: translateX(-10em) rotate(-337.5deg);
-ms-transform: translateX(-10em) rotate(-337.5deg);
transform: translateX(-10em) rotate(-337.5deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<div class="menu">
<div class="btn trigger">
<span class="line"></span>
</div>
<div class="icons">
<div class="rotater">
<div class="btn btn-icon">
<i class="fa fa-codepen"></i>
</div>
</div>
<div class="rotater">
<div class="btn btn-icon">
<i class="fa fa-facebook"></i>
</div>
</div>
<div class="rotater">
<div class="btn btn-icon">
<i class="fa fa-google-plus"></i>
</div>
</div>
<div class="rotater">
<div class="btn btn-icon">
<i class="fa fa-twitter"></i>
</div>
</div>
<div class="rotater">
<div class="btn btn-icon">
<i class="fa fa-dribbble"></i>
</div>
</div>
<div class="rotater">
<div class="btn btn-icon">
<i class="fa fa-linkedin"></i>
</div>
</div>
<div class="rotater">
<div class="btn btn-icon">
<i class="fa fa-github"></i>
</div>
</div>
<div class="rotater">
<div class="btn btn-icon">
<i class="fa fa-behance"></i>
</div>
</div>
</div>
</div>