文章/答案/技术大牛

发布

社区首页 >问答首页 >我如何使菜单在右边显示文本呢？

问我如何使菜单在右边显示文本呢？
EN

Stack Overflow用户

提问于 2022-11-22 21:48:39

回答 1查看 24关注 0票数 0

就像这样：

设计图解

我已经得到了正确格式的菜单代码。

我试着用代码来制作右边的动画。不过，它不像我想的那样起作用。

下面是我到目前为止编写的代码：

HTML：

> <link rel="stylesheet" href="index.css"> <link rel="stylesheet"
> href="jason.js"> <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-background-pattern"></div>
>     <div id="menu-background-image"></div> </div>

CSS：

body {
    background-color: rgb(20, 20, 20);
    margin: 0px; }

/* Menu items */

#menu {
    height: 100vh;
    display: flex;
    align-items: center; }

.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: opacicity 400ms ease; }

#menu-items {
    margin-left: clamp(4rem, 20vw, 48rem);
    position: relative;
    z-index: 2;   }

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

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

/* Background pattern */

#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; }

联署材料：

const menu = document.getElementById("menu")

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

我一直没能让菜单滑到一边。并在不破坏动画和背景动画缩放的情况下，为文字向右腾出空间。它的想法是在显示课文的同时，继续以同样的方式放大。

javascript

html

css

回答 1

Stack Overflow用户

发布于 2022-11-23 16:02:04

这里是如何使用普通的HTML、CSS和JavaScript创建一个带有多页系统的抽屉

首先创建一个名为 index.html的HTML文件。

<!DOCTYPE html>
<html>
<head>
    <link href="main.css" rel="stylesheet">
</head>
<body>
    <section id="root" class="page">
        <input type="button" value="Menu" onclick="onMenu()">
    </section>
    <section id="about" class="page">
        <h1>About</h1>
        <input type="button" value="Menu" onclick="onMenu()">
    </section>
    <section id="team" class="page">
        <h1>Team</h1>
        <input type="button" value="Menu" onclick="onMenu()">
    </section>
    <section id="contact" class="page">
        <h1>Contact us</h1>
        <input type="button" value="Menu" onclick="onMenu()">
    </section>
    <div id="menu">
        <div id="close">
            <input type="button" value="×" id="close-btn">
        </div>
        <a href="#root" class="menu-btn">Home</a>
        <a href="#about" class="menu-btn">About</a>
        <a href="#team" class="menu-btn">Team</a>
        <a href="#contact" class="menu-btn">Contact us</a>
    </div>
    <script src="app.js" type="text/javascript"></script>
</body>
</html>

2.第二，创建名为 main.css的CSS文件。

body {
    margin: 0 auto;
    padding: 0;
}

#root {
    z-index: 1;
}

.page {
    display: grid;
    justify-items: center;
    align-content: center;
    width: 100vw;
    height: 100vh;
    background-color: #FFFFFF;
    position: absolute;
    overflow-x: hidden;
    overflow-y: scroll;
}

section:target {
    opacity: 1;
    z-index: 1;
}

#menu {
    display: none;
    justify-items: center;
    align-content: flex-start;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 75vw;
    height: 100vh;
    background-color: #333333AA;
}

.menu-btn {
    margin: 1em 0 1em 0;
    text-decoration: none;
    color: #FFFFFF;
}

#close {
    display: flex;
    justify-content: center;
    align-items: center;
    width: inherit;
    height: 10vh;
}

#close::before {
    content: "";
    width: 70vw;
}

#close-btn {
    border: 0;
    width: 25vw;
    height: 10vh;
    font-size: 64px;
    color: #FFF;
    background-color: transparent;
}

@keyframes slideRight {
    from {
        width: 0;
        opacity: 0;
    } 
    to {
        width: 70vw;
        opacity: 1;
    }
}

@keyframes slideLeft {
    from {
        width: 70vw;
        opacity: 1;
    } 
    to {
        width: 0;
        opacity: 0;
    }
}

3.最后创建名为 app.js的sa JS文件

let menu = document.querySelector("#menu");
let close_btn = document.querySelector("#close-btn");

let onMenu = () => {
    menu.style.display = "grid";
    menu.style.animationName = "slideRight";
    menu.style.animationDuration = "0.5s";
};

close_btn.addEventListener("click", () => {
    menu.style.animationName = "slideLeft";
    menu.style.animationDuration = "0.5s";

    setTimeout(() => {
        menu.style.display = "none";
    }, 400);
});

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/74539352

复制

相似问题

问我如何使菜单在右边显示文本呢？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我如何使菜单在右边显示文本呢？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我如何使菜单在右边显示文本呢？
EN