css3手风琴下拉菜单

CSS3 手风琴下拉菜单是一种常用的设计样式，可以为网页增添独特的视觉效果。其原理就是在鼠标或用户操作时，通过 CSS3 的 transition 和 transform 属性实现内容展开或收缩。

!-- HTML 结构 -->
    div class="accordion-menu">
    ul>
    li>
    a href="#">
    一级标题1/a>
    ul>
    li>
    a href="#">
    二级标题1/a>
    /li>
    li>
    a href="#">
    二级标题2/a>
    /li>
    li>
    a href="#">
    二级标题3/a>
    /li>
    /ul>
    /li>
    li>
    a href="#">
    一级标题2/a>
    ul>
    li>
    a href="#">
    二级标题1/a>
    /li>
    li>
    a href="#">
    二级标题2/a>
    /li>
    li>
    a href="#">
    二级标题3/a>
    /li>
    /ul>
    /li>
    li>
    a href="#">
    一级标题3/a>
    ul>
    li>
    a href="#">
    二级标题1/a>
    /li>
    li>
    a href="#">
    二级标题2/a>
    /li>
    li>
    a href="#">
    二级标题3/a>
    /li>
    /ul>
    /li>
    /ul>
    /div>

以上是 HTML 结构，接下来是 CSS 代码：

.accordion-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.accordion-menu li {
    background-color: #f7f7f7;
    border-bottom: 1px solid #e7e7e7;
    position: relative;
}
.accordion-menu a {
    color: #333;
    display: block;
    font-size: 16px;
    font-weight: bold;
    padding: 15px 20px;
    text-decoration: none;
}
.accordion-menu li ul {
    border-top: none;
    max-height: 0;
    overflow: hidden;
    padding: 0;
    transition: max-height 0.5s ease-in-out;
}
.accordion-menu li:hover ul {
    max-height: 1000px;
}
.accordion-menu li:hover {
    background-color: #f1f1f1;
}
    

在 CSS 代码中，我们为一级标题和二级标题设置了默认样式，其次是设置下拉菜单的样式，将菜单高度设为 0 并使用 overflow: hidden; 来隐藏内容，同时设置了 transition: max-height 0.5s ease-in-out; 来控制菜单的展开和收缩动画。当鼠标移动到菜单上方时，通过 li:hover 选择器来触发菜单的展开和一级标题的样式变化。

最后，我们在 JavaScript 中使用了 jQuery 的 slideUp() 和 slideDown() 方法，控制菜单的展开和隐藏。具体实现请见下方代码：

$(document).ready(function(){
$('.accordion-menu li').click(function(){
    $(this).siblings().children('ul').slideUp();
    $(this).children('ul').slideToggle();
}
    );
}
    );
    

至此，CSS3 手风琴下拉菜单就完成了，希望本文对大家有所帮助。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！