Animations, Navigation Bar, Unique Menu

Rotating navigation menu | HTML css menu templates

Hello viewers, today in this lesson we will learn how to create a rotating navigation menu using Html, CSS, and javascript. In the last lesson, we learned how to create a responsive navigation bar using HTML, CSS, and javascript. But now let’s see how to create a menu with a rotating effect.

Navigation Bar:

A navigation bar is the main component of the website. It is present at the top of the website. It connects all the parts of the website with each using menu of the website. This has different buttons which help the users to visit different parts of the website.

This navbar has a button at the top left side of the website. By clicking on this button it shows three buttons on the menu. These include Home, About, and contact. When we click on this button once again then it closes the navigation bar. It has the functionality of opening and closing the menu. It is responsive across all devices (mobile, tablet, computer/laptop).

How to create a rotating navigation menu?

For creating a rotating navigation bar using Html, CSS, and javascript we need to create three files in our IDE.

Source code of Html for rotating navigation menu:

First, we have to create a file of HTML with the name navbar.html. Save this file in any folder on your device with the extension of .html. Then copy the given code and paste it into your file. Html is used for providing the skeleton of the menu. It helps us to write the content of the project. With CSS we design our project and make it responsive. By using javascript we provide the functionality to our project.

<!--https://fantacydesigns.com/-->

<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
    <link rel="stylesheet" href="style.css" />
    <title>Rotating Navigation| Fantacy Design</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>JD Khan</small>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium quia in ratione dolores cupiditate, maxime aliquid impedit dolorem nam dolor omnis atque fuga labore modi veritatis porro laborum minus, illo, maiores recusandae cumque ipsa quos. Tenetur, consequuntur mollitia labore pariatur sunt quia harum aut. Eum maxime dolorem provident natus veritatis molestiae cumque quod voluptates ab non, tempore cupiditate? Voluptatem, molestias culpa. Corrupti, laudantium iure aliquam rerum sint nam quas dolor dignissimos in error placeat quae temporibus minus optio eum soluta cupiditate! Cupiditate saepe voluptates laudantium. Ducimus consequuntur perferendis consequatur nobis exercitationem molestias fugiat commodi omnis. Asperiores quia tenetur nemo ipsa.</p>

        <h3>My Gradient Design</h3>
        <img src="c.jpg" alt="doggy" />
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sit libero deleniti rerum quo, incidunt vel consequatur culpa ullam. Magnam facere earum unde harum. Ea culpa veritatis magnam at aliquid. Perferendis totam placeat molestias illo laudantium? Minus id minima doloribus dolorum fugit deserunt qui vero voluptas, ut quia cum amet temporibus veniam ad ea ab perspiciatis, enim accusamus asperiores explicabo provident. Voluptates sint, neque fuga cum illum, tempore autem maxime similique laborum odio, magnam esse. Aperiam?</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="script.js"></script>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Rotating Navigation| Fantacy Design</title>

</head>

<body>

</button>

</button>

</div>

<h1>Amazing Article</h1>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium quia in ratione dolores cupiditate, maxime aliquid impedit dolorem nam dolor omnis atque fuga labore modi veritatis porro laborum minus, illo, maiores recusandae cumque ipsa quos. Tenetur, consequuntur mollitia labore pariatur sunt quia harum aut. Eum maxime dolorem provident natus veritatis molestiae cumque quod voluptates ab non, tempore cupiditate? Voluptatem, molestias culpa. Corrupti, laudantium iure aliquam rerum sint nam quas dolor dignissimos in error placeat quae temporibus minus optio eum soluta cupiditate! Cupiditate saepe voluptates laudantium. Ducimus consequuntur perferendis consequatur nobis exercitationem molestias fugiat commodi omnis. Asperiores quia tenetur nemo ipsa.</p>

<h3>My Gradient Design</h3>

<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sit libero deleniti rerum quo, incidunt vel consequatur culpa ullam. Magnam facere earum unde harum. Ea culpa veritatis magnam at aliquid. Perferendis totam placeat molestias illo laudantium? Minus id minima doloribus dolorum fugit deserunt qui vero voluptas, ut quia cum amet temporibus veniam ad ea ab perspiciatis, enim accusamus asperiores explicabo provident. Voluptates sint, neque fuga cum illum, tempore autem maxime similique laborum odio, magnam esse. Aperiam?</p>

</div>

<nav>

<ul>

<li><i class="fas fa-user-alt"></i> About</li>

<li><i class="fas fa-envelope"></i> Contact</li>

</ul>

</nav>

</body>

</html>

CSS code:

Again create a file of CSS with the name navbar.css. save this file with the extension of .css and save it in the same file otherwise, you have to provide the path of the file and folder for connecting it with the Html file. Copy this given below code and paste it into your CSS file. CSS is used for designing the navigation menu and making it responsive and unique. Without using CSS in our project we are unable to design our menu bar.

@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: #1DBF73;
  height: 220px;
  width: 220px;
  border-radius: 50%;
  position: relative;
  transition: transform 0.5s linear;
}

.container.show-nav .circle {
  transform: rotate(-70deg);
}

.circle button {
  cursor: pointer;
  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 {
  top: 60%;
  transform: rotate(90deg);
  transform-origin: top left;
}

.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-right: 10px;
}

nav ul li + li {
  margin-left: 15px;
  transform: translateX(-150%);
}

nav ul li + li + li {
  margin-left: 30px;
  transform: translateX(-200%);
}

.content img {
  max-width: 100%;
}

.content {
  max-width: 1000px;
  margin: 50px auto;
}

.content h1 {
  margin: 0;
}

.content small {
  color: #555;
  font-style: italic;
}

.content p {
  color: #333;
  line-height: 1.5;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

@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: #1DBF73;

height: 220px;

width: 220px;

border-radius: 50%;

position: relative;

transition: transform 0.5s linear;

}

.container.show-nav .circle {

transform: rotate(-70deg);

}

.circle button {

cursor: pointer;

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 {

top: 60%;

transform: rotate(90deg);

transform-origin: top left;

}

.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-right: 10px;

}

nav ul li + li {

margin-left: 15px;

transform: translateX(-150%);

}

nav ul li + li + li {

margin-left: 30px;

transform: translateX(-200%);

}

.content img {

max-width: 100%;

}

.content {

max-width: 1000px;

margin: 50px auto;

}

.content h1 {

margin: 0;

}

.content small {

color: #555;

font-style: italic;

}

.content p {

color: #333;

line-height: 1.5;

}

Javascript code:

Once again create a file of Javascript with the name navbar.css and save it in the same folder. Must save this file with the extension of .js. Copy this code and paste it into your javascript file. javascript will help us to handle the animation and functionality of the navigation bar.

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'))

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'))

Therefore, you can create a rotating navigation bar using these frontend languages. It is responsive across all the devices and it is working properly.

Download source code:

If you are still unable to create a rotating navigation bar then I have created a zip file. It contains all these three files. You just need to click the below button and download the zip file. Then extract these files and run the Html file and you will see your output in your browser.

If you like this post then must like it, share it, and comment below. You can also follow us on different social media accounts.

If you have any questions/ queries then comment below.

Thanks for reading this article.

Task

We have just developed and explained a rotating navigation menu that is created using Html, CSS, and JS. Now we are adding some extra features to this menu and it is your job to fulfill them. Use Html and CSS to modify this navbar. Add the navbar icon to the right side and stick it at the top right corner. Then provide the color according to your preferences but add active and hover color on this menu bar icon. On pressing it, it shows an animation and opens up the content. Your job is to change the animation duration on the opening and closing of the menu bar.

Best of luck

Download Source File