如何在bootstrap中构建循环导航栏3

Question

我正在尝试构建一个模仿this令人惊叹的圆形导航栏。

北欧做它一个了不起的工作

<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> 

有没有人试图建立这样的事情？ 如果是的话，你可以给我一些方向如何进行

Answer 1

请尝试以下代码它可以帮助你。

$(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>