如何实现侧边菜单右滑并在右侧显示文本（保留原有动画）

需要实现菜单向右滑动至侧边，为右侧文本留出空间，同时保留现有的菜单缩放、背景动画效果，但当前代码无法达成该需求。期望菜单滑到侧边后右侧能显示文本，且不破坏原有动画表现。

通过调整菜单容器的位置过渡动画、补充布局结构，可在保留原有效果的基础上实现需求：

修改后的HTML #

<link rel="stylesheet" href="index.css">
<script src="jason.js"></script>
<div id="menu">
    <div id="menu-items">
        <a href="/" class="menu-item">About</a>
        <a href="/" class="menu-item">Team</a> 
        <a href="/" class="menu-item">Contact us</a> 
    </div>
    <!-- 新增右侧内容容器 -->
    <div id="menu-right-content">
        <h2>右侧展示文本</h2>
        <p>菜单滑动后即可看到这段内容</p>
    </div>
    <div id="menu-background-pattern"></div>
    <div id="menu-background-image"></div>
</div>

修改后的CSS #

body {
    background-color: rgb(20, 20, 20);
    margin: 0px;
    overflow-x: hidden; /* 避免滑动时出现横向滚动条 */
}

#menu {
    height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
}

.menu-item {
    color: white;
    font-size: clamp(3rem, 8vw, 8rem);
    font-family: "Ibarra Real Nova", serif;
    display: block;
    text-decoration: none;
    padding: clamp(0.25rem, 0.5vw, 1rem) 0rem;
    transition: opacity 400ms ease; /* 修正原拼写错误 */
}

#menu-items {
    margin-left: clamp(4rem, 20vw, 48rem);
    position: relative;
    z-index: 2;
    transition: margin-left 800ms ease; /* 添加滑动过渡动画 */
    flex-shrink: 0; /* 防止菜单被压缩 */
}

/* 鼠标悬停时菜单滑向左侧 */
#menu:hover #menu-items {
    margin-left: clamp(1rem, 5vw, 8rem);
}

#menu-items:hover > .menu-item {
    opacity: 0.3;
}

#menu-items:hover > .menu-item:hover {
    opacity: 1;
}

/* 右侧内容样式，跟随菜单滑动显示 */
#menu-right-content {
    color: white;
    margin-left: clamp(2rem, 5vw, 10rem);
    opacity: 0;
    transition: opacity 800ms ease;
    z-index: 2;
    position: relative;
}

#menu:hover #menu-right-content {
    opacity: 1;
}

/* 补充背景图案基础样式 */
#menu-background-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 10vmin 10vmin;
    background-image: repeating-linear-gradient(
        to right,
        rgba(255,255,255,0.05),
        rgba(255,255,255,0.05) 1vmin,
        transparent 1vmin,
        transparent 10vmin
    );
    opacity: 0;
    transition: opacity 800ms ease, background-size 800ms ease, background-position 800ms ease;
    z-index: 1;
}

#menu-items:hover ~ #menu-background-pattern {
    background-size: 11vmin 11vmin;
    opacity: 0.5;
}

#menu[data-active-index="0"] > #menu-background-pattern {
    background-position: 0% -25%;
}

#menu[data-active-index="1"] > #menu-background-pattern {
    background-position: 0% -50%;
}

#menu[data-active-index="2"] > #menu-background-pattern {
    background-position: 0% -75%;
}

#menu[data-active-index="3"] > #menu-background-pattern {
    background-position: 0% -100%;
}

#menu[data-active-index="0"] > #menu-background-image {
    background-position: 0% 45%;
}

#menu[data-active-index="1"] > #menu-background-image {
    background-position: 0% 50%;
}

#menu[data-active-index="2"] > #menu-background-image {
    background-position: 0% 55%;
}

#menu[data-active-index="3"] > #menu-background-image {
    background-position: 0% 60%;
}

#menu-background-image {
    height: 100%;
    width: 100%;
    background-image: url('logo.png');
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 0;
    background-position: center 40%;
    background-size: 110vmax;
    opacity: 0.15;
    transition: opacity 800ms ease,
                background-size 800ms ease,
                background-position 800ms ease;
}

#menu-items:hover ~ #menu-background-image {
    background-size: 100vmax;
    opacity: 0.10;
}

修改后的JS #

const menu = document.getElementById("menu");

Array.from(document.getElementsByClassName("menu-item"))
.forEach((menuItem, index) => {
    menuItem.onmouseover = () => {
        menu.dataset.activeIndex = index;
    };
});

核心改动说明 #

• 为#menu-items添加margin-left过渡属性，实现鼠标悬停时的滑动效果；
• 新增右侧内容容器，通过opacity过渡实现菜单滑动后的内容显示；
• 修正原CSS中的拼写错误opacicity，补充背景图案的基础样式；
• 添加overflow-x: hidden到body，避免滑动时出现横向滚动条。

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