Question

我想要5个带有半径圆菜单的菜单。我发现以下位置。它有7个菜单。

https://www.jqueryscript.net/menu/radial-pie-circle-menu.html

如果我使用5，则菜单中会有空白。请看我的小提琴。我只是对此计算感到困惑。因为对于我的网站，取决于用户的菜单数有所不同。一些用户具有3个菜单或4个菜单，最多5个菜单。我想知道这个计算。

.circle, .circle:before, .circle:after { border-radius: 50%; }
.menunav {
  position: absolute;
  display: block;
  min-width: 10em; 
  width: 70%; 
  max-width: 30em;
}
.menunav ul {
  position: relative;
  padding: 50%;
  max-width: 0; max-height: 0;
  list-style: none;
}
.menunav li {
  position: absolute;
}
.slice {
  overflow: hidden;
  position: absolute;
  top: 0; 
  left: 0;
  width: 50%; 
  height: 50%;
  transform-origin: 100% 100%;
}

Answer 1

您引用的原始源包含您未在小提琴中包含的javascript。我建议您使用我认为您可能会喜欢的在CodePen上找到的这个很棒的菜单。请参考pen中的r8n5n。

这支笔包含SCSS变量，用于项数$items: 9和菜单直径$diameter: 600。您可以轻松地编辑这些值以适合您的需求。

HTML代码：

<div class="circular-menu-container">
  <ul class="circular-menu">
    <li class="" tabindex="1">
      <div class="center-section section-1">
        <div class="animated fadeInUp">
          <h2>Title</h2>
          <a href="#">Link to content</a>
        </div>
      </div>
      <span class="arrow"></span>
      <div class="bg"></div>
      <div class="label">
        <p>Menu item</p>
      </div>
    </li>
    <li class="" tabindex="2">
      <div class="center-section section-2">
        <div class="animated fadeInUp">
          <h2>Title</h2>
          <a href="#">Link to content</a>
        </div>
      </div>
      <span class="arrow"></span>
      <div class="bg"></div>
      <div class="label">
        <p>Menu item</p>
      </div>
    </li>
    <li class="" tabindex="3">
      <div class="center-section section-3">
        <div class="animated fadeInUp">
          <h2>Title</h2>
          <a href="#">Link to content</a>
        </div>
      </div>
      <span class="arrow"></span>
      <div class="bg"></div>
      <div class="label">
        <p>Menu item</p>
      </div>
    </li>
    <li class="" tabindex="4">
      <div class="center-section section-4">
        <div class="animated fadeInUp">
          <h2>Title</h2>
          <a href="#">Link to content</a>
        </div>
      </div>
      <span class="arrow"></span>
      <div class="bg"></div>
      <div class="label">
        <p>Menu item</p>
      </div>
    </li>
    <li class="" tabindex="5">
      <div class="center-section section-5">
        <div class="animated fadeInUp">
          <h2>Title</h2>
          <a href="#">Link to content</a>
        </div>
      </div>
      <span class="arrow"></span>
      <div class="bg"></div>
      <div class="label">
        <p>Menu item</p>
      </div>
    </li>
    <li class="" tabindex="6">
      <div class="center-section section-6">
        <div class="animated fadeInUp">
          <h2>Title</h2>
          <a href="#">Link to content</a>
        </div>
      </div>
      <span class="arrow"></span>
      <div class="bg"></div>
      <div class="label">
        <p>Menu item</p>
      </div>
    </li>
    <li class="" tabindex="7">
      <div class="center-section section-7">
        <div class="animated fadeInUp">
          <h2>Title</h2>
          <a href="#">Link to content</a>
        </div>
      </div>
      <span class="arrow"></span>
      <div class="bg"></div>
      <div class="label">
        <p>Menu item</p>
      </div>
    </li>
    <li class="" tabindex="8">
      <div class="center-section section-8">
        <div class="animated fadeInUp">
          <h2>Title</h2>
          <a href="#">Link to content</a>
        </div>
      </div>
      <span class="arrow"></span>
      <div class="bg"></div>
      <div class="label">
        <p>Menu item</p>
      </div>
    </li>
     <li class="" tabindex="9">
      <div class="center-section section-9">
        <div class="animated fadeInUp">
          <h2>Title</h2>
          <a href="#">Link to content</a>
        </div>
      </div>
      <span class="arrow"></span>
      <div class="bg"></div>
      <div class="label">
        <p>Menu item</p>
      </div>
    </li>
    <div class="center-section section-intro">
      <div class="animated fadeInUp">
        <h2>Choose a section</h2>
        <p>some more content</p>
      </div>
    </div>
  </ul>
</div>

SCSS代码：

body {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  line-height: 3;
}


* {
  Box-sizing: Border-box;
}



/* 
    Created on : 22-Jun-2015, 13:00:20
    Author     : probinson
    Based on    : https://codepen.io/schoenwaldnils/pen/JnIKA
*/
/*
    Following functions are from
    https://unindented.org/articles/trigonometry-in-sass/
*/
@function pow($number, $exp) {
    $value: 1;
    @if $exp > 0 {
        @for $i from 1 through $exp {
            $value: $value * $number;
        }
    }
    @else if $exp < 0 {
        @for $i from 1 through -$exp {
            $value: $value / $number;
        }
    }
    @return $value;
}

@function fact($number) {
    $value: 1;
    @if $number > 0 {
        @for $i from 1 through $number {
            $value: $value * $i;
        }
    }
    @return $value;
}

@function pi() {
    @return 3.14159265359;
}

@function rad($angle) {
    $unit: unit($angle);
    $unitless: $angle / ($angle * 0 + 1);
    // If the angle has 'deg' as unit, convert to radians.
    @if $unit == deg {
        $unitless: $unitless / 180 * pi();
    }
    @return $unitless;
}

@function sin($angle) {
    $sin: 0;
    $angle: rad($angle);
    // Iterate a bunch of times.
    @for $i from 0 through 10 {
        $sin: $sin + pow(-1, $i) * pow($angle, (2 * $i + 1)) / fact(2 * $i + 1);
    }
    @return $sin;
}

@function cos($angle) {
    $cos: 0;
    $angle: rad($angle);
    // Iterate a bunch of times.
    @for $i from 0 through 10 {
        $cos: $cos + pow(-1, $i) * pow($angle, 2 * $i) / fact(2 * $i);
    }
    @return $cos;
}


// how many menu items do you wish to display? //
// minimum: 2 
// maximum: 10

$items: 9;
$diameter: 600;
$radius: $diameter*0.5;
$centerSectionDiameter : $diameter*0.6;
$labelWidth: $centerSectionDiameter*0.5;
$arrowWidth: $diameter/20;

$colour-list: #11703C, #8A8D53, #B6238E, #5FC3BA, #9303ED, #1FF8F2, #58CE62 ,#119451    ,#2B0EEC;



.circular-menu-container{
    margin-top: 20px;
    margin-bottom: 20px;
  max-width: none;
  width: auto;
}
.circular-menu {
    width: $diameter + px;
    height: $diameter + px;
    position: relative;
    left: 50%;
    margin: 0;
    margin-left: -$radius + px;
    overflow: hidden;
    border-radius: 500px;
    border-radius: 50%;
    z-index: 1;
    list-style: none;
    box-shadow: 0px 0px 15px #333;
}

.center-section {
    width: $centerSectionDiameter + px;
    height: $centerSectionDiameter + px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -$centerSectionDiameter/2 + px;
    margin-left: -$centerSectionDiameter/2 + px;
    padding:55px;
    border-radius: 500px;
    border-radius: 50%;
    text-align: center;
    background: #fff;
    box-shadow: inset 0px 0px 15px #333;
    display: none;
    z-index: 1;
}
.center-section.section-intro{
    display: block;
}

//:focus for touch support only
.circular-menu li:hover ~ .center-section.section-intro, 
.touch .circular-menu li:focus ~ .center-section.section-intro{
    display: none;
}
//:focus for touch support only
.touch .circular-menu li:focus{
    outline: 0;
}
.circular-menu li div.label {
    position: absolute;
    width: $labelWidth + px;
    height: $labelWidth + px;
    z-index: 2;
}
.circular-menu li div.label p{
    //custom position of text
    text-align: center;
    max-width: $labelWidth*0.66 + px;
    margin: 0 auto;
    margin-top: $labelWidth*0.4 + px;
    color: #fff;
}


.circular-menu li span.arrow {
    position: absolute;
    width: $arrowWidth + px;
    height: $arrowWidth + px;
    display: block;
    transition: all 300ms ease-out;
    z-index: 2;
}

.circular-menu li .bg {
    width: $radius + 50 + px;
    height: $radius + px;
    position: absolute;
    transform-origin:0 $radius + px;
    margin-top: -$radius + px;
    left: 50%;
    top: 50%;
  transition: all 300ms ease-out;
}


.circular-menu li {
    position: absolute;
    text-decoration: none;
    top: 50%;
    left: 50%;
    display: none;
}

//vars for positionin elements
//should work for more menu diameters
$deg: 360deg/$items;
$arrowHoverRadius : $centerSectionDiameter/2;
$labelRadius : $arrowHoverRadius + ($radius - $arrowHoverRadius)/2;
$arrowRadius : $arrowHoverRadius + $arrowWidth;
//set rotation
@for $i from 1 through $items {  

    $xLabel: (sin(($deg * $i) - $deg - 90) * $labelRadius) - $labelWidth/2 + px;
    $yLabel: (cos(($deg * $i) - $deg - 90) * $labelRadius) - $labelWidth/2 + px;
    //
    $xArrowHover: (sin(($deg * $i) - $deg - 90) * $arrowHoverRadius) - $arrowWidth * 0.5 + px;
    $yArrowHover: (cos(($deg * $i) - $deg - 90) * $arrowHoverRadius) - $arrowWidth * 0.5 + px;
    //
    $xArrow: (sin(($deg * $i) - $deg - 90) * $arrowRadius) - $arrowWidth * 0.5 + px;
    $yArrow: (cos(($deg * $i) - $deg - 90) * $arrowRadius) - $arrowWidth * 0.5 + px;

    .circular-menu li:nth-child(#{$i}) {
        display: block;
    }

    //rotate bg
    .circular-menu li:nth-child(#{$i}) .bg {
        transform: rotate(($deg * $i - ($deg/2) - 90)) skew((90 - $deg) * -1);
        background: nth($colour-list,$i);
    }

    //bg hover
    //:focus for touch support only
    .circular-menu li:nth-child(#{$i}):hover .bg, 
    .touch .circular-menu li:nth-child(#{$i}):focus .bg{
        background: lighten(nth($colour-list,$i), 10%);
    }

    //arrow position
    .circular-menu li:nth-child(#{$i}) span.arrow{
        transform: rotate($deg * ($i - 1) - 45);
        margin: $xArrow 0 0 $yArrow;
        background: nth($colour-list,$i);
    }

    //arrow hover
    //:focus for touch support only
    .circular-menu li:nth-child(#{$i}):hover span.arrow,
    .touch .circular-menu li:nth-child(#{$i}):focus span.arrow {
        background: lighten(nth($colour-list,$i), 10%);
        margin: $xArrowHover 0 0 $yArrowHover;
    }

    //position text
    .circular-menu li:nth-child(#{$i}) div.label{
        margin: $xLabel 0 0 $yLabel;
    }

    //center sections
    //:focus for touch support only
    .circular-menu li:nth-child(#{$i}):hover div.center-section.section-#{$i},
    .touch .circular-menu li:nth-child(#{$i}):focus div.center-section.section-#{$i} {
        display: block;
    }    

}

//animate central content
//from animate.css https://daneden.github.io/animate.css/
.animated {
  animation-duration: 0.75s;
  animation-fill-mode: both;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 50%, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

.fadeInUp {
  animation-name: fadeInUp;
}

免责声明： 我没有为上面提供的代码做任何贡献。所有功劳归于我已经提到并链接了他们各自的作者来源。

半径圆菜单

1 个答案: