以下是一个使用半径圆形菜单的代码示例:
HTML代码:
CSS代码:
.menu {
position: relative;
display: inline-block;
}
.menu-button {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #333;
color: #fff;
text-align: center;
cursor: pointer;
}
.menu-items {
position: absolute;
top: 60px;
left: -100px;
list-style: none;
text-align: center;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.menu-items li {
margin-bottom: 10px;
}
.menu-items li a {
display: block;
padding: 5px 10px;
background-color: #333;
color: #fff;
text-decoration: none;
}
.menu:hover .menu-items {
opacity: 1;
visibility: visible;
left: -50px;
}
JavaScript代码(可选):
// 如果需要通过JavaScript来控制菜单的显示和隐藏,可以添加以下代码:
var menuButton = document.querySelector('.menu-button');
var menuItems = document.querySelector('.menu-items');
menuButton.addEventListener('click', function() {
menuItems.classList.toggle('active');
});
请注意,这只是一个简单的示例,实际应用中可能需要根据具体需求进行调整和扩展。
上一篇:半经验质量公式
下一篇:半径在导航栏中不适应