html - 如何在Bootstrap 3中构建圆形导航栏

我正在尝试模仿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>

有没有人试图建立这样的东西？
如果可以，您可以给我一些指导

最佳答案

请尝试使用以下代码，它可能会对您有所帮助。

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

关于html - 如何在Bootstrap 3中构建圆形导航栏，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35744702/