在Jekyll网站上实现可折叠菜单,可以通过以下步骤实现:
以下是一个简单的示例代码:
HTML结构:
<ul class="menu">
<li>
<a href="#">菜单项1</a>
<ul class="submenu">
<li><a href="#">子菜单项1</a></li>
<li><a href="#">子菜单项2</a></li>
</ul>
</li>
<li>
<a href="#">菜单项2</a>
<ul class="submenu">
<li><a href="#">子菜单项3</a></li>
<li><a href="#">子菜单项4</a></li>
</ul>
</li>
</ul>
CSS样式:
.menu {
list-style: none;
padding: 0;
}
.menu li {
position: relative;
}
.menu li a {
display: block;
padding: 10px;
background-color: #f0f0f0;
color: #333;
text-decoration: none;
}
.menu li:hover > .submenu {
display: block;
}
.submenu {
display: none;
position: absolute;
top: 100%;
left: 0;
padding: 0;
background-color: #f0f0f0;
}
.submenu li {
width: 200px;
}
.submenu li a {
padding: 10px;
color: #333;
text-decoration: none;
}
.submenu li:hover {
background-color: #ccc;
}
JavaScript代码:
var menuItems = document.querySelectorAll('.menu li');
menuItems.forEach(function(item) {
var submenu = item.querySelector('.submenu');
if (submenu) {
item.addEventListener('click', function() {
submenu.style.display = (submenu.style.display === 'block') ? 'none' : 'block';
});
}
});
这样,当用户点击菜单项时,对应的子菜单将展开或折叠显示。
腾讯云相关产品和产品介绍链接地址:
请注意,以上链接仅为示例,具体产品选择应根据实际需求进行评估和决策。
领取专属 10元无门槛券
手把手带您无忧上云