Question

我正在使用纯CSS和HTML以及最小JS的径向菜单，我找到了一个很好的模板来解构CodePen。我意识到，通过像这样的极简主义菜单，如果链接在图标艺术中变得更加通用（例如注册，登录，捐赠按钮），就会感到困惑。

有没有办法可以将文本元素干净地粘贴到每个按钮上并随之移动？类似于悬停在图标类上一定距离的文本。

和/或创建一个最有效的方式：悬停文本会显示在每个按钮的统一位置。例如，每个按钮/图标的文字标题出现在悬停时屏幕顶部。

非常感谢，我期待着您的想法！

HTML：

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

SCSS：

@import "compass/css3";

*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html, body {
  height: 100%;
  overflow: hidden;
}
body {
  background:
    linear-gradient(45deg, hsla(352, 96%, 45%, 1) 0%, hsla(352, 96%, 45%, 0) 70%),
    linear-gradient(135deg, hsla(253, 95%, 42%, 1) 10%, hsla(253, 95%, 42%, 0) 80%),
    linear-gradient(225deg, hsla(179, 91%, 45%, 1) 10%, hsla(179, 91%, 45%, 0) 80%),
    linear-gradient(315deg, hsla(119, 96%, 49%, 1) 100%, hsla(119, 96%, 49%, 0) 70%);
}
.absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.menu {
  @extend .absolute-center;
  width: 5em;
  height: 5em;

  .btn {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(255,255,255, 0.15);
    opacity: 0;
    z-index: -10;
    cursor: pointer;
    transition: opacity 1s, z-index 0.3s, transform 1s;
    transform: translateX(0);

    .fa {
      @extend .absolute-center;
      font-size: 3em;
      transition: color 0.3s;
    }

    &:hover .fa {
      color: rgba(255,255,255, 0.7);
    }

    &.trigger {
      opacity: 1;
      z-index: 100;
      cursor: pointer;
      transition: transform 0.3s;

      &:hover {
        transform: scale(1.2);

        .line {
          background-color: rgba(255,255,255, 0.7);

          &:before, &:after {
            background-color: rgba(255,255,255, 0.7);
          }
        }
      }

      .line {
        @extend .absolute-center;
        width: 60%;
        height: 6px;
        background: #000;
        border-radius: 6px;
        transition: background-color 0.3s, height 0.3s, top 0.3s;

        &:before, &:after {
          content: "";
          display: block;
          position: absolute;
          left: 0;
          width: 100%;
          height: 6px;
          background: #000;
          border-radius: 6px;
          transition: background-color 0.3s, transform 0.3s;
        }
        &:before {
          top: -12px;
          transform-origin: 15% 100%;
        }
        &:after {
          top: 12px;
          transform-origin: 25% 30%;
        }
      }
    }
  }

  .rotater {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: 50% 50%;
  }

  &.active {

    .btn-icon {
      opacity: 1;
      z-index: 50;
    }

    .trigger {

      .line {
        height: 0px;
        top: 45%;

        &:before {
          transform: rotate(45deg);
          width: 110%;
        }
        &:after {
          transform: rotate(-45deg);
          width: 110%; 
        }
      }
    }
  }
}

$numOfElems: 8;

@for $i from 1 through $numOfElems {
  $deg: 360deg / $numOfElems;
  .rotater:nth-child(#{$i}) {
    transform: rotate($deg/-2 + $deg * ($i - 1));
  }

  .menu.active {
    .rotater:nth-child(#{$i}) .btn-icon {
      transform: translateY(-10em) rotate($deg/2 - $deg * ($i - 1)); 
    }
  }
}

JS：

$(document).ready(function() {
  $(".trigger").click(function() {
    $(".menu").toggleClass("active"); 
  });
});

Answer 1

如果您不介意，我可以使用JQuery解决方案：

工作示例： Codepen

这里是HTML（我添加了一个包含菜单上方所有标题的div。请注意，顺序必须与按钮顺序相同）：

      <div class="text">
        <span>Codepen</span>
        <span>Facebook</span>
        <span>Google+</span>
        <span>Twitter</span>
        <span>Dribble</span>
        <span>LinkedIn</span>
        <span>GitHub</span>
        <span>Behance</span>
      </div>
      <div class="menu">
       .... [Buttons..] .... 
      </div>

该范围最初位于display:none;，当设置了活动类（JQuery）时，其display:inline-block;。如果你不喜欢跨度，你可以使用不同的元素。

JQuery中的悬停函数为标题元素添加了一个类，其索引与悬停按钮相同：

  $('.icons .rotater').hover(function(){
    var index = $(this).index();
    var span = $('.text span:eq('+ index + ')');

    if($('.menu').hasClass('active')){
    span.addClass('active');
    span.siblings().removeClass('active');
      }

}, function() {
    var span = $('.text span');
    span.removeClass('active');
  });

当您不悬停任何按钮时，悬停功能内的第二个功能会删除活动类。

编辑：要保存1行代码，最后可以直接执行此操作：

$('.text span').removeClass('active');

Answer 2

以下是一种方法：CodePen Demo

一种方法是用文本替换菜单按钮。我通过在菜单div中放置一个div来实现它。

<div class="linktext">
<span>Codepen</span>
<span>Facebook</span>
<span>Google+</span>
<span>Twitter</span>
<span>Dribble</span>
<span>LinkedIn</span>
<span>GitHub</span>
<span>Behance</span>

然后设置它以匹配主题。

.linktext {
  text-align: center;
  margin-left: -2.5em;
  width: 7.5em;
  height: 2.5em;
  line-height: 2.5em;
  vertical-align: middle;
  border-radius: 2.5em;
  background: rgba(255, 255, 255, 0.15);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2em;
  visibility: hidden;
  span {
    display: none;
    &.active {
      display: inline-block;
    }
  }
}

然后使用jQuery使其工作。

  $('.icons .rotater').hover(function(){
    var index = $(this).parent().index();
    var span = $('.linktext span:eq('+ index + ')');

    if($('.menu').hasClass('active')){
    span.addClass('active');
    span.siblings().removeClass('active');
    $(".trigger").css("visibility","hidden");
    $(".linktext").css("visibility","visible");
      }

}, function() {
    var span = $('.linktext span');
    span.removeClass('active');
    $(".trigger").css("visibility","visible");
    $(".linktext").css("visibility","hidden");
  });
});

如何修复html元素以跟随类或div？

2 个答案: