如何制作类似GeeksforGeeks的带动画垂直下拉菜单并修复子菜单截断问题

垂直下拉菜单修复方案 #

你要复刻的垂直下拉菜单出现子菜单内容截断、灵活性不足的问题，是因为三处配置遗漏，修复后的代码如下：

<style>
body {
    background-color: #fff;
    font-size: 14px;
}
nav {
    position: relative;
    min-width: 180px;
    overflow: visible;
}
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
nav ul li a {
    display: block;
    background: #ebebeb;
    padding: 10px 15px;
    color: #333;
    text-decoration: none;
    transition: 0.2s linear;
}
nav ul li a:hover {
    background: #f8f8f8;
    color: #515151;
}
nav ul li a .fa {
    width: 16px;
    text-align: center;
    margin-right: 5px;
    float:right;
}
nav ul ul {
    background-color:#ebebeb;
    width: 100%;
}
nav ul li ul li a {
    background: #f8f8f8;
    border-left: 4px solid transparent;
    padding: 10px 20px;
}
nav ul li ul li a:hover {
    background: #ebebeb;
    border-left: 4px solid #3498db;
}
</style>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<nav class='animated bounceInDown'>
    <ul>
        <li><a href='#profile'>Profile</a></li>
        <li><a href='#message'>Messages</a></li>
        <li class='sub-menu'>
            <a href='#settings'>Settings<div class='fa fa-caret-down right'></div></a>
            <ul>
                <li><a href='#settings'>Account</a></li>
                <li><a href='#settings'>Profile</a></li>
            </ul>
        </li>
        <li class='sub-menu'>
            <a href='#Somethin'>Something<div class='fa fa-caret-down right'></div></a>
            <ul>
                <li><a href='#settings'>Account</a></li>
                <li><a href='#settings'>Profile</a></li>
            </ul>
        </li>
        <li class='sub-menu'>
            <a href='#message'>Help<div class='fa fa-caret-down right'></div></a>
            <ul>
                <li><a href='#settings'>FAQ's</a></li>
                <li><a href='#settings'>Submit a Ticket</a></li>
                <li><a href='#settings'>Network Status</a></li>
            </ul>
        </li>
    </ul>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$('.sub-menu ul').hide();
$(".sub-menu a").click(function (e) {
    e.preventDefault();
    $(this).parent(".sub-menu").children("ul").slideToggle("100");
    $(this).find(".right").toggleClass("fa-caret-up fa-caret-down");
});
</script>

核心修改点 #

• 导航容器nav将固定宽度改为最小宽度，新增overflow: visible规则，避免子菜单内容被裁剪
• 子菜单ul新增宽度100%规则，和父级菜单宽度保持一致，避免内容溢出
• 点击事件新增e.preventDefault()阻止a标签默认跳转行为，点击菜单标题只会触发展开收起逻辑不会跳转页面
• 移除了过渡属性的浏览器前缀，现代浏览器已支持标准transition属性

内容的提问来源于stack exchange，提问作者user16375592