I've been racking my brain on this and I can't seem to get it to behave the way I want to. Essentially, I want the element which contains the open and close buttons to remain fixed even when I've already opened the navigation.
Right now, what happens is after clicking #open, the container scrolls with the screen. I want it to emulate the behavior similar to when I haven't cliked #open yet (meaning the said container remains fixed in position).
Thanks everyone! Code provided below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
crossorigin="anonymous"
/>
<title>Rotating Navigation</title>
</head>
<body>
<div class="container">
<div class="circle-container">
<div class="circle">
<button id="close">
<i class="fas fa-times"></i>
</button>
<button id="open">
<i class="fas fa-bars"> </i>
</button>
</div>
</div>
<div class="content">
<h1>Amazing Article</h1>
<small>Florin Pop</small>
<p
>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempora,
nihil nisi! Aut, deleniti consectetur ratione consequatur, rerum
dolorum, ipsa debitis nulla ut autem maiores architecto quos quia amet
sapiente labore. Ex ipsam minima quam accusamus, perferendis illum
rerum numquam repellendus recusandae sed quas. Aperiam quisquam animi
commodi excepturi, at magni, in assumenda veniam impedit iusto,
molestiae dolores consectetur tenetur non fugit sapiente beatae eius
praesentium consequatur! Maxime magnam ipsam laborum expedita totam
nihil magni similique ratione sequi mollitia tempore voluptate dolorum
dolorem, quisquam quasi explicabo dolores natus temporibus
necessitatibus rerum praesentium perspiciatis nesciunt modi harum!
Perspiciatis amet modi eveniet doloremque?</p
>
<h3>My Dog</h3>
<img src="./assets/charles-deluvio-Mv9hjnEUHR4-unsplash.jpg" alt="" />
<p
>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
explicabo ipsum quaerat debitis sapiente cum ratione perspiciatis
dolore, odio impedit necessitatibus eligendi facilis obcaecati
temporibus expedita repudiandae harum incidunt, enim perferendis
cupiditate distinctio! Earum optio accusantium quos qui et
perspiciatis ullam odio error modi voluptas quidem, itaque quisquam
labore minima. Tenetur libero distinctio sit animi iusto dolore
adipisci quam dolorum ea blanditiis pariatur perferendis, ullam
aliquid, qui voluptates id facilis inventore quibusdam minus quia.
Eveniet!</p
>
</div>
</div>
<nav>
<ul>
<li><i class="fas fa-home"></i>Home</li>
<li><i class="fas fa-user-alt"></i>About</li>
<li><i class="fas fa-envelope"></i>Contact</li>
</ul>
</nav>
<script src="./js/main.js"></script>
</body>
</html>
@import url("https://fonts.googleapis.com/css?family=Lato&display=swap");
* {
box-sizing: border-box;
}
body {
font-family: "Lato", sans-serif;
background-color: #333;
color: #222;
overflow-x: hidden;
margin: 0;
}
.container {
background-color: #fafafa;
transform-origin: top left;
transition: transform 0.5s linear;
width: 100vw;
min-height: 100vh;
padding: 50px;
}
.container.show-nav {
transform: rotate(-20deg);
}
.circle-container {
position: fixed;
top: -100px;
left: -100px;
}
.circle {
background-color: #ff7979;
height: 200px;
width: 200px;
border-radius: 50%;
position: relative;
transition: transform 0.5s linear;
}
.container.show-nav .circle {
transform: rotate(-80deg);
position: fixed;
}
.circle button {
position: absolute;
top: 50%;
left: 50%;
height: 100px;
background: transparent;
border: 0;
font-size: 26px;
color: #fff;
}
.circle button:focus {
outline: none;
}
.circle button#open {
left: 60%;
}
.circle button#close {
transform-origin: top left;
transform: rotate(90deg);
}
.container.show-nav + nav li {
transform: translateX(0);
transition-delay: 0.3s;
}
nav {
position: fixed;
bottom: 40px;
left: 0;
z-index: 100;
}
nav ul {
list-style-type: none;
padding-left: 30px;
}
nav ul li {
text-transform: uppercase;
color: #fff;
margin: 40px 0;
transform: translateX(-100%);
transition: transform 0.4s ease-in;
}
nav ul li i {
font-size: 20px;
margin-left: 10px;
transform: translateX(-150%);
}
nav ul li + li {
margin-left: 15px;
transform: translateX(-200%);
}
nav ul li + li + li {
margin-left: 30px;
}
.content img {
width: 100%;
}
.content {
max-width: 1000px;
}
.content h1 {
margin: 0;
}
.conent small {
color: #555;
font-style: italic;
}
.content p {
color: #333;
line-height: 1.5;
}
const open = document.getElementById("open");
const close = document.getElementById("close");
const container = document.querySelector(".container");
open.addEventListener("click", () => container.classList.add("show-nav"));
close.addEventListener("click", () => container.classList.remove("show-nav"));
You need to pull out the circle-container and everything in it from the container. Once it is separate you can position it to be fixed to the top left corner of the body and won't be bound by the same rules as if it was inside container Then you can style it from there.
I changed quite a few things in this code to get it to work so look it over and see what I did.
Fiddle here: https://jsfiddle.net/708Lo31v/
const open = document.getElementById("open");
const close = document.getElementById("close");
const container = document.querySelector(".container");
const cont1 = document.querySelector(".circle-container");
open.addEventListener("click", () => container.classList.add("show-nav"));
open.addEventListener("click", () => cont1.classList.add("show-nav"));
close.addEventListener("click", () => container.classList.remove("show-nav"));
close.addEventListener("click", () => cont1.classList.remove("show-nav"));@import url("https://fonts.googleapis.com/css?family=Lato&display=swap");
* {
box-sizing: border-box;
}
body {
font-family: "Lato", sans-serif;
background-color: #333;
color: #222;
overflow-x: hidden;
margin: 0;
}
.container {
background-color: #fafafa;
transform-origin: top left;
transition: transform 0.5s linear;
width: 100vw;
min-height: 100vh;
padding: 50px;
}
.container.show-nav {
transform: rotate(-20deg);
position: relative;
}
.circle-container {
position: fixed;
top: -100px;
left: -100px;
z-index: 2;
}
.circle {
background-color: #ff7979;
height: 200px;
width: 200px;
border-radius: 50%;
position: relative;
transition: transform 0.5s linear;
}
.circle-container.show-nav .circle {
transform: rotate(-100deg);
position: fixed;
}
.circle button {
position: absolute;
top: 50%;
left: 50%;
height: 100px;
background: transparent;
border: 0;
font-size: 26px;
color: #fff;
}
.circle button:focus {
outline: none;
}
.circle button#open {
left: 60%;
}
.circle button#close {
transform-origin: top left;
transform: rotate(90deg);
}
.container.show-nav + nav li {
transform: translateX(0);
transition-delay: 0.3s;
}
nav {
position: fixed;
bottom: 40px;
left: 0;
z-index: 100;
}
nav ul {
list-style-type: none;
padding-left: 30px;
}
nav ul li {
text-transform: uppercase;
color: #fff;
margin: 40px 0;
transform: translateX(-100%);
transition: transform 0.4s ease-in;
}
nav ul li i {
font-size: 20px;
margin-left: 10px;
transform: translateX(-150%);
}
nav ul li + li {
margin-left: 15px;
transform: translateX(-200%);
}
nav ul li + li + li {
margin-left: 30px;
}
.content img {
width: 100%;
}
.content {
max-width: 1000px;
}
.content h1 {
margin: 0;
}
.conent small {
color: #555;
font-style: italic;
}
.content p {
color: #333;
line-height: 1.5;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
crossorigin="anonymous"
/>
<title>Rotating Navigation</title>
</head>
<body>
<div class="circle-container">
<div class="circle">
<button id="close">
<i class="fas fa-times"></i>
</button>
<button id="open">
<i class="fas fa-bars"> </i>
</button>
</div>
</div>
<div class="container">
<div class="content">
<h1>Amazing Article</h1>
<small>Florin Pop</small>
<p
>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempora,
nihil nisi! Aut, deleniti consectetur ratione consequatur, rerum
dolorum, ipsa debitis nulla ut autem maiores architecto quos quia amet
sapiente labore. Ex ipsam minima quam accusamus, perferendis illum
rerum numquam repellendus recusandae sed quas. Aperiam quisquam animi
commodi excepturi, at magni, in assumenda veniam impedit iusto,
molestiae dolores consectetur tenetur non fugit sapiente beatae eius
praesentium consequatur! Maxime magnam ipsam laborum expedita totam
nihil magni similique ratione sequi mollitia tempore voluptate dolorum
dolorem, quisquam quasi explicabo dolores natus temporibus
necessitatibus rerum praesentium perspiciatis nesciunt modi harum!
Perspiciatis amet modi eveniet doloremque?</p
>
<h3>My Dog</h3>
<img src="./assets/charles-deluvio-Mv9hjnEUHR4-unsplash.jpg" alt="" />
<p
>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
explicabo ipsum quaerat debitis sapiente cum ratione perspiciatis
dolore, odio impedit necessitatibus eligendi facilis obcaecati
temporibus expedita repudiandae harum incidunt, enim perferendis
cupiditate distinctio! Earum optio accusantium quos qui et
perspiciatis ullam odio error modi voluptas quidem, itaque quisquam
labore minima. Tenetur libero distinctio sit animi iusto dolore
adipisci quam dolorum ea blanditiis pariatur perferendis, ullam
aliquid, qui voluptates id facilis inventore quibusdam minus quia.
Eveniet!</p
>
</div>
</div>
<nav>
<ul>
<li><i class="fas fa-home"></i>Home</li>
<li><i class="fas fa-user-alt"></i>About</li>
<li><i class="fas fa-envelope"></i>Contact</li>
</ul>
</nav>
<script src="./js/main.js"></script>
</body>
</html>