Rotating Navigation

Create a simple Rotating Navigation using Html, Css and JavaScript.

Rotating Navigation

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.

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: