How do I make the menu go to the side and show text to the right of it?

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. Although, it doesn't work the way I want it to.

Here's the code I have written thus far:

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

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.

Answer 1

Here is the solution how to create a drawer with a multi page system using vanilla HTML, CSS & JavaScript

1. First create a HTML file named 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

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

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

How do I make the menu go to the side and show text to the right of it?

Question

1 answers

solution1
0 2022-11-23 16:02:04

How do I make the menu go to the side and show text to the right of it?

Question

1 answers

solution1 0 2022-11-23 16:02:04

solution1
0 2022-11-23 16:02:04