如何将菜单 go 放在旁边并在其右侧显示文本？

Question

Kinda like this:有点像这样：

I've gotten the code for the menu in the right format.我已经获得了正确格式的菜单代码。

I've tried to get the code to make an animation to the right.我试图获取代码以在右侧制作 animation。 Although, it doesn't work the way I want it to.虽然，它没有按照我想要的方式工作。

Here's the code I have written thus far:这是我到目前为止编写的代码：

HTML: 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: 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; }

JS:记者：

const menu = document.getElementById("menu")

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

I've been unable to get the menu to slide to the side.我一直无法让菜单滑到一边。 And make room for the text to the right without it ruining the zooming in animation and background animation. The idea is for it to keep being zoomed out the same way whilst showing the text.并为右侧的文本腾出空间，而不会破坏 animation 和背景 animation 中的缩放。这个想法是让它在显示文本的同时以相同的方式缩小。

Answer 1

Here is the solution how to create a drawer with a multi page system using vanilla HTML, CSS & JavaScript这是如何使用香草 HTML、CSS 和 JavaScript 创建带多页系统的抽屉的解决方案

1. First create a HTML file named index.html 1.首先创建一个HTML的文件，命名为index.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. Second create a CSS file named main.css 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. Finally create sa JS file named app.js 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);
});

如何将菜单 go 放在旁边并在其右侧显示文本？

问题描述

1 个解决方案

解决方案1
0 2022-11-23 16:02:04

如何将菜单 go 放在旁边并在其右侧显示文本？

问题描述

1 个解决方案

解决方案1 0 2022-11-23 16:02:04

解决方案1
0 2022-11-23 16:02:04