1

メニュー項目が左端から始まり、対応する位置まで右に回転する CSS3 円形アニメーション メニューを作成しました。
各メニュー項目をコンテナー内に配置し、各コンテナーをさまざまな角度に回転させてアニメーションを引き出しました。
私の問題は、各メニュー項目がコンテナー内にあるためです。メニュー項目と同じ数のコンテナーがあり:hover、コンテナーが上部にあるため、各メニュー項目内のアンカー タグのアクションを取得できません。誰かがこれの修正を提案できますか?

ここで見ることができます：

http://jsfiddle.net/blueeyes/bWWHm/4/

にはコンテナがなく、のコンテナがすべての上にあるため、リンクaaをホバーできることがわかります。 他のリンクはコンテナーの下にあるため、アクセスできません。fffaafff

4

1 に答える 1

1

あなたは物事を複雑にしすぎています。コンテナは必要ありません。すべてのメニュー項目を絶対に円の中心に配置し、それぞれを目的の角度で回転させ、円の半径だけ外側に移動させてから、反対の角度で再度回転させて、テキストを再び水平にします。このように、各メニュー項目の中心が円上になります。

デモ

HTML :

<ul class='circ-menu'>
  <li><a href='#'>aa</a></li>
  <li><a href='#'>bb</a></li>
  <!-- and so on -->
</ul>

CSS :

.circ-menu {
  position: relative;
  padding: 0;
  width: 10em; height: 10em;
  list-style: none;
}
.circ-menu li {
  position: absolute;
  top: 50%; left: 50%;
  margin: -1.5em;
  width: 3em; height: 3em;
  background: rgba(255, 0, 0, .3);
}
.circ-menu li:first-child {
  transform: rotate(-112.5deg) translateY(-5em) rotate(112.5deg);
}
.circ-menu li:nth-child(2) {
  transform: rotate(-67.5deg) translateY(-5em) rotate(67.5deg);
}
/* and so on */
于 2013-03-03T11:29:04.690 に答える