使用HTML和Css创建交互式半圆导航

Question

我想用html&css，方法是使用一个半圆，并将每个主题的圆圈划分为不同的部分。我脑海中有以下草稿：

https://i.stack.imgur.com/f9Oqp.png

我还没有在用动画创建自己的SVG的上下文中做过html和css。目前我使用这个例子作为起点：

<ul class="menu">
<li class="one">
<a href="#">
<span class="icon">Category 1</span>
</a>
</li>
<li class="two">
<a href="#">
<span class="icon">Category 2</span>
</a>
</li>
<li class="three">
<a href="#">
<span class="icon"> Category 3</span>
</a>
</li>
<svg height="0" width="0">
<defs>
<clipPath clipPathUnits="objectBoundingBox" id="sector">
<path fill="none" stroke="#111" stroke-width="1" class="sector" d="M0.5,0.5 l0.5,0 A0.5,0.5 0 0,0 0.75,.066987298 z"></path>
</clipPath>
</defs>
</svg>

$base: #A5E2F3;
.menu {
padding: 0;
list-style: none;
position: relative;
margin: 30px auto;
width: 70%;
height: 0;
padding-top: 70%;
}
@media all and (max-width: 320px) {
.menu {
width: 230px;
height: 230px;
padding: 0;
}
}
@media all and (min-width: 700px) {
.menu {
width: 500px;
height: 500px;
padding: 0;
}
}
.menu li { 
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
clip-path: url(#sector);
/* try this one in Chrome/Opera/Safari */
/* clip-path: polygon(50% 50%, 100% 50%, 75% 6.6%); */
a {
display: block;
width: 100%;
height: 100%;
}
&:hover {
background-color: gold;
}
}
.one {
background-color: $base;
transform: rotate(0deg);
}
.two {
background-color: darken($base, 7%);
transform: rotate(-60deg);
}
.three {
background-color: darken($base, 14%);
transform: rotate(-120deg);
}
.icon {
position: absolute;
/* exact values here depend on what you are placing inside the items (icon, image, text, etc.) */
right: 15%;
top: 30%;
/* make sure it it rotated enough; angle of rotation = angle of the sector itself */
transform: rotate(60deg);
/* style further as needed */
color: darken($base, 60%);
font-family: Indie Flower;
font-size: 25px;
}
p {
text-align: center;
width: 80%;
margin: 0 auto;
}

这是我关于这项任务的问题：
1(我如何创建交互式按钮
-点击按钮会让剩下的按钮消失
-1/3半圆会扩展到1/4半圆
2(我该如何通过动画提高点击率
-button从1/3半圆增长到1/4半圆

提前谢谢！

Answer 1

回答您的问题：

1( 。交互式按钮可以通过多种方式创建，就我个人而言，我会在HTML:中做这样的事情

<button type="button" data-toggle="menuItem">Toggle</button>

然后在JavaScript中(使用jQuery(，您可以检查何时单击此按钮：

$("button[data-toggle='menuItem']").on("click", function () {
// - Do your toggle logic in here
// - Do '.hide()' on all buttons that aren't '$(this)'.
// - Add class to '$(this)' to make it expand.
});

2( 。这实际上取决于你如何创建半圆，但我想说，你最好的跨浏览器解决方案是多研究一下CSS的"transition"属性：W3Schools CSS transition property

我希望这能有所帮助，如果你不理解我说的话，请告诉我。