移动端Toggle Menu圆角样式调整求助（附代码）

根据需求，要让下拉菜单右上角与用户头像形成衔接的缺口样式，以下是调整后的代码：

修改后的HTML代码 #

<!DOCTYPE html>
<!-- Creadted by Coding Pakistan Youtube Channel -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Menu</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="hero">
        <nav>
            <div class="p">
                <div onclick="toggleMenu()" class="user-pic">
                    <span>CK</span>
                </div>
            </div>
            <div class="sub-menu-wrap" id="subMenu">
                <div class="sub-menu">
                    <a href="#" class="sub-menu-link">
                        <img src="images/profile.png">
                        <p>User Profile</p>
                    </a>
                    <a href="#" class="sub-menu-link">
                        <img src="images/help.png">
                        <p>Privacy and Safety</p>
                    </a>
                    <a href="#" class="sub-menu-link">
                        <img src="images/setting.png">
                        <p>Settings</p>
                    </a>
                    <a href="#" class="sub-menu-link">
                        <img src="images/logout.png">
                        <p>Sign Out</p>
                    </a>
                </div>
            </div>
        </nav>
    </div>
    <script>
        let subMenu = document.getElementById("subMenu");
        function toggleMenu(){
            subMenu.classList.toggle("open-menu");
        }
    </script>
</body>
</html>

修改后的CSS代码 #

*{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    box-sizing: border-box;
}
.hero{
    width: 100%;
    min-height: 100vh;
    background: #eceaff;
    color: #525252;
}
nav{
    padding: 20px 10%;
    align-items: center;
    justify-content: space-between;
    position: relative;
    display: flex; /* 让nav弹性布局，对齐更精准 */
}
.user-pic{
    padding: 15px;
    border-radius: 50rem;
    cursor: pointer;
    background-color: white;
    position: relative;
    z-index: 2; /* 确保头像在下拉菜单上方 */
}
.sub-menu-wrap{
    position: absolute;
    top: calc(100% + 5px); /* 调整与头像的间距 */
    right: 10%;
    width: 320px;
    max-height: 0px;
    overflow: hidden;
    transition: max-height 0.3s ease; /* 添加展开收起动画 */
}
.sub-menu-wrap.open-menu{
    max-height: 400px;
}
.sub-menu{
    background: rgb(245, 7, 7);
    padding: 20px;
    border-radius: 1rem;
    border-top-right-radius: 0; /* 去掉右上角圆角，用于衔接缺口 */
    position: relative;
}
/* 用伪元素实现与头像衔接的缺口 */
.sub-menu::before{
    content: "";
    position: absolute;
    top: -10px;
    right: 0;
    width: 20px;
    height: 20px;
    background-color: rgb(245, 7, 7);
    border-bottom-left-radius: 20px;
}
.sub-menu::after{
    content: "";
    position: absolute;
    top: -30px;
    right: 0;
    width: 60px;
    height: 60px;
    background-color: white;
    border-radius: 50%;
}
.sub-menu-link{
    display: flex;
    align-items: center;
    text-decoration: none;
    color: white; /* 红色背景上用白色文字更清晰 */
    margin: 12px 0;
    padding: 8px;
    border-radius: 0.5rem; /* 给链接添加圆角优化视觉 */
    transition: background-color 0.2s;
}
.sub-menu-link:hover{
    background-color: rgba(255,255,255,0.2);
}
.sub-menu-link p{
    width: 100%;
}
.sub-menu-link img{
    width: 40px;
    background: #e5e5e5;
    border-radius: 50%;
    padding: 8px;
    margin-right: 15px;
}
.sub-menu-link span{
    font-size: 22px;
    transition: transform 0.5s;
}
.sub-menu-link:hover span{
    transform: translate(5px);
}
.sub-menu-link:hover p{
    font-weight: 600;
}
/* 移动端适配 */
@media (max-width: 768px){
    .sub-menu-wrap{
        right: 5%;
        width: calc(100% - 10%); /* 下拉菜单占满大部分屏幕宽度 */
    }
    nav{
        padding: 20px 5%;
    }
}

关键修改说明 #

• 移除冗余的.sub元素，改用CSS伪元素实现下拉菜单与头像的衔接缺口，结构更简洁
• 给nav添加弹性布局，确保元素对齐精准
• 调整下拉菜单的位置与圆角，配合伪元素实现目标样式
• 优化链接的交互效果，添加背景过渡提升体验
• 新增媒体查询，适配移动端的宽度与间距

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