Create a simple Rotating Navigation using Html, Css and JavaScript.
CheckOut the codes below:
HTML
Create a folder in your root. You can name it anything relatable. I have named is rotating-navigation. Create a file index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<link
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
rel="stylesheet"
/>
<title>Rotating Navigation</title>
</head>
<body>
<div class="container">
<div class="circle-container">
<div class="circle">
<button id="open">
<span class="fas fa-bars"></span>
</button>
<button id="close">
<span class="fas fa-times"></span>
</button>
</div>
</div>
<div class="content">
<h1>Amazing Article</h1>
<small>Checkout our latest collection </small>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia ex
incidunt blanditiis totam necessitatibus repellendus et deserunt amet.
Aliquid inventore repellat optio quibusdam harum veniam qui cupiditate
velit similique reiciendis.
</p>
<h3>My Baby</h3>
<img
src="images/EBA2A87A-11C1-457F-A64F-5E8E3A2C0F39_1_105_c.jpeg"
alt="Hazy"
/>
<p>
Meet Hazel. The prefect Woof Woof! companion. Could not ask for more
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur
vitae delectus quisquam facilis voluptatem, ipsam voluptatum maiores,
quidem quasi assumenda, laudantium blanditiis consectetur molestiae
explicabo itaque saepe consequatur inventore expedita. Lorem ipsum
dolor sit amet consectetur adipisicing elit. Consectetur quae
repellendus autem odio recusandae excepturi. Quae aspernatur porro
reprehenderit, eaque optio est sit deleniti rerum voluptatem neque
amet ratione tempore.
</p>
</div>
</div>
<nav>
<ul>
<li><span class="material-icons-outlined"></span>Home</li>
<li><span class=""></span>About</li>
<li><span class=""></span>Contact US</li>
</ul>
</nav>
<script src="main.js"></script>
</body>
</html>
Css
To Write our css codes, we need to create a file style.css. The extension matters. You can use your own style and colors.
@import url("https://fonts.googleapis.com/css2?family=Ranchers&display=swap");
* {
box-sizing: border-box;
}
body {
font-family: "Ranchers", cursive;
overflow-x: hidden;
margin: 0;
background: #333;
color: #222;
}
.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);
}
.container.show-nav + nav li {
transform: translateX(0);
transition-delay: 0.3s;
}
.circle-container {
position: fixed;
top: -100px;
left: -100px;
}
.circle {
background-color: #ff7970;
height: 200px;
width: 200px;
border-radius: 50%;
position: relative;
transition: transform 0.5s linear;
}
.container.show-nav.circle {
transform: rotate(-70deg);
}
.circle button {
position: absolute;
top: 50%;
left: 50%;
height: 100px;
background: transparent;
border: 0;
font-size: 25px;
color: white;
cursor: pointer;
}
.circle button:focus {
outline: none;
}
.circle button#open {
left: 60%;
}
.circle button#close {
top: 60%;
transform: rotate(90deg);
transform-origin: top left;
}
nav {
position: fixed;
bottom: 40px;
left: 0;
z-index: 100;
}
nav ul {
list-style: none;
padding-left: 30px;
}
nav ul li {
text-transform: uppercase;
color: white;
margin: 40px 0;
/* transform: translateX(-100%); */
transition: transform 0.4s ease-in;
}
nav ul li i {
font-size: 20px;
margin-right: 10px;
}
nav ul li + li {
margin-left: 15px;
transform: translate(-150%);
}
nav ul li + li + li {
margin-left: 30px;
transform: translate(-200%);
}
.content {
max-width: 1000px;
margin: 50px auto;
}
.content img {
max-width: 80%;
}
.content h1 {
margin: 0;
}
.content small {
color: #555;
font-style: italic;
}
.content p {
color: #333;
line-height: 1.5;
}
JavaScript.
Create a file names script.js or main.js . Do not forget to include these two files in your index.html file . I am also using fontawesome and a particular font family. Feel free to use any font-style and icons.
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"));
Go ahead and try for yourself.