How to get this transition to start from specific spot-CodePudding

I've been trying to challenge myself to make an animated burger menu. I don't want to copy paste someone else's stuff and want to learn how to do this myself.

I want my menu bar to fold out from the burger menu instead of the side of the page buy can't seem to figure it out. The hamburger rotates into a single vertical line and I want my menu to fly in from that line. How do I do this? Thanks for your help.

I have my code here:

HTML:

  <!DOCTYPE html>
<html>
    <head>
        <link HREF="style.css" rel="stylesheet">

        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Roboto Serif:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
    
        <script type="text/javascript" src="script.js"></script>

        <title>TEST</title>

    </head>

    <body>
        <div >


        <div  onclick="hamburger(this)">
            
            <div >
                <div ></div>
                <div ></div>
                <div ></div>
            </div> 

            <div >
                <a>Home</a>     
                <a>Services</a>     
                <a>About</a>    
                <a>Projects</a>
            </div>


        </div>


    </body>

and my CSS:

    * {
    box-sizing: border-box;
    margin: 0 auto;
}

.page {
    height: 100vh;
    background-color: rgb(238, 212, 174);
}


.ham-container {
    position: absolute;
    top: 20px;
    left: 3vw;
    cursor: pointer;
    display: inline-block;
 

}
.hamburger-1,
.hamburger-2,
.hamburger-3 {
    width: 35px;
    height: 5px;
    background-color: red;
    margin: 5px 0;
    transition: 0.35s ease-in-out;
}

.nav-bar {
    height: 55px;
    width: 95vw;
    position: absolute;
    top: 10px;
    left: -100vw;
    display: flex;
    justify-content: space-between;
    color: white;
    font-size: 2.5rem;
    background-color: rgba(0, 0, 0, 0.3);
    transition: 0.35s ease-in-out;
}

.nav-bar a {
    font-family: 'Roboto Serif', sans-serif;
    padding: 10px;
}


.change .hamburger-1 {
    transform:  rotate(90deg) translateY(-10px);

}

.change .hamburger-2 {
    opacity: 0;
}

.change .hamburger-3 {
    transform: rotate(-90deg) translateY(10px);
}

.change .nav-bar {
    left: calc(3vw   30px);
    transition-delay: 0.35s;
}

the whole thing is triggered with JS:

    function hamburger(x) {
    x.classList.toggle("change");
  }

You can also view this on codepen

CodePudding user response：

Leveraging the .nav-container for positioning and a background color on your toggle button the code snippet below puts the .nav-bar right behind the button before animating so it looks like it comes out of it.

function hamburger(x) {
  x.classList.toggle("change");
}

* {
  box-sizing: border-box;
  margin: 0 auto;
}

.page {
  height: 100vh;
  background-color: rgb(238, 212, 174);
}

.nav-container {
  position: relative;
  top: 20px;
  margin-left: 3%;
  overflow: hidden;
}

.ham-container {
  position: relative;
  display: inline-block;
  background: rgb(238, 212, 174);
  height: 70px;
  padding-top: 18px;
  cursor: pointer;
  z-index: 1;
}

.hamburger-1,
.hamburger-2,
.hamburger-3 {
  width: 35px;
  height: 5px;
  background-color: red;
  margin: 5px 0;
  transition: 0.35s ease-in-out;
}

.nav-bar {
  height: 55px;
  width: calc(100% - 35px);
  position: absolute;
  top: 8px;
  left: calc(-100%   35px);
  display: flex;
  justify-content: space-between;
  color: white;
  font-size: 2.5rem;
  background-color: rgba(0, 0, 0, 0.3);
  transition: 0.35s ease-in-out;
}

.nav-bar a {
  font-family: 'Roboto Serif', sans-serif;
  padding: 10px;
}

.change .hamburger-1 {
  transform: rotate(90deg) translateY(-15px);
}

.change .hamburger-2 {
  opacity: 0;
}

.change .hamburger-3 {
  transform: rotate(-90deg) translateY(15px);
}

.change .nav-bar {
  left: 35px;
  transition-delay: 0.25s;
}

<!DOCTYPE html>
<html>

<head>
  <link HREF="style.css" rel="stylesheet">

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto Serif:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
    rel="stylesheet">

  <script type="text/javascript" src="script.js"></script>

  <title>TEST</title>

</head>

<body>
  <div >


    <div  onclick="hamburger(this)">

      <div >
        <div ></div>
        <div ></div>
        <div ></div>
      </div>

      <div >
        <a>Home</a>
        <a>Services</a>
        <a>About</a>
        <a>Projects</a>
      </div>


    </div>


</body>

CodePudding user response：

Your navbar is using absolute positioning. So to have the animation start where you want, you have to specify the offset with left. I changed the system increase the width of the element to achieve the sliding effect you want.

function hamburger(x) {
    x.classList.toggle("change");
}

* {
    box-sizing: border-box;
    margin: 0 auto;
}

.page {
    height: 100vh;
    width: 100vw;
    background-color: rgb(238, 212, 174);
}


.ham-container {
    position: absolute;
    top: 20px;
    left: 3vw;
    cursor: pointer;
    display: inline-block;

}
.hamburger-1,
.hamburger-2,
.hamburger-3 {
    width: 35px;
    height: 5px;
    background-color: red;
    margin: 5px 0;
    transition: 0.35s ease-in-out;
}


.nav-bar {
    height: 55px;
    width: 95vw;
    position: absolute;
    top: 10px;
    
    /* start the element with 0 width */
    width: 0px;
    /* hide the overflow content */
    overflow: hidden;
    /* offset the starting position */
    left: calc(3vw   30px);
    
    display: flex;
    justify-content: space-between;
    color: white;
    font-size: 2.5rem;
    background-color: rgba(0, 0, 0, 0.3);
    transition: 0.35s ease-in-out;
}

.nav-bar a {
    font-family: 'Roboto Serif', sans-serif;
    padding: 10px;
}


.change .hamburger-1 {
    transform:  rotate(90deg) translateY(-10px);

}

.change .hamburger-2 {
    opacity: 0;
}

.change .hamburger-3 {
    transform: rotate(-90deg) translateY(10px);
}

.change .nav-bar {
    /* when class is applied, change width to 
    remaining screen size*/
    width: calc(100vw - (3vw - 30px));
    transition-delay: 0.35s;
}

<body>
    <link rel="stylesheet" href="style.css">
    <div >
        <div  onclick="hamburger(this)">
            <div >
                <div ></div>
                <div ></div>
                <div ></div>
            </div> 

            <div >
                <a>Home</a>     
                <a>Services</a>     
                <a>About</a>    
                <a>Projects</a>
            </div>
        </div>
    </div>
</body>