In this article, we are going to create a rotating navigation bar by using simple HTML, CSS, and JavaScript. The content of the page will rotate and the navigation bar will reveal itself when the menu button is clicked.
Approach:
- Create an HTML file in which we are going headings and a navigation bar.
- Create a CSS style to give some animation effects to the web-page elements.
- Create a JS file for adding event-listeners that can detect the mouse click event.
HTML Section: In this section, we will define the structure of the page by following the below steps:
- We will first create an HTML file.
- Then we link the CSS file that provides styling to our HTML.
- In the body section, we add two icons for the closing and opening of the navigation bar.
- In the end, we add two <script> tags, one for our index.js file and the other for the icon that we have used on our web-page.
HTML
<!-- Filnename: index.html --><!DOCTYPE html><html><head> <link rel="stylesheet" href="style.css"></head><body> <div class="main_box show-nav"> <div class="circle-container"> <div class="circle"> <button class="open"> <i class="fas fa-bars"></i> </button> <button class="close"> <i class="fas fa-times"></i> </button> </div> </div> <div class="content"> <h1 style="color: green;"> neveropen </h1> <small>Hello Geeks</small> <p> neveropen is a good platform to learn programming. It is an educational website. Prepare for the Recruitment drive of product based companies like Microsoft, Amazon, Adobe etc with a free online placement preparation course. The course focuses on various MCQ's and Coding question likely to be asked in the interviews and make your upcoming placement season efficient and successful. </p> <p> Also, any neveropen can help other neveropen by writing articles on the neveropen, publishing articles follow few steps that are Articles that need little modification or improvement from reviewers are published first. To quickly get your articles reviewed, please refer existing articles, their formatting style, coding style, and try to make you are close to them. In case you are a beginner, you may refer Guidelines to write an Article. </p> </div> </div> <nav> <ul class="nav-links"> <li>home</li> <li>about</li> <li>contact</li> </ul> </nav> <script src= crossorigin="anonymous"></script> <script src="index.js"></script></body></html> |
CSS Section: In this section, we will style the HTML with animations and effects to our HTML page so that it looks interactive to users. We will follow the below steps:
- We will first restore all the browser effects.
- Then we use classes and ids to give effects to HTML elements.
- We use the :hover selector to use hover effects.
CSS
/*Filename: style.css File */* { box-sizing: border-box;}body { overflow-x: hidden; margin: 0; background: #000; color: #fff;}.main_box { background-color: #fafafa; color: #000; transform-origin: top left; transition: transform 0.5 linear; width: 100vw; min-height: 100vh; padding: 3em;}.main_box.show-nav { transform: rotate(-20deg);}.circle-container { position: fixed; top: -6em; left: -6em;}.circle { background-color: #ff7979; height: 12em; width: 12em; border-radius: 50%; position: relative; transition: transform 0.5s linear; cursor: pointer;}.circle button { position: absolute; top: 50%; left: 50%; height: 6em; background: transparent; border: 0; color: #fff; cursor: pointer;}.circle button:focus { outline: none;}.circle button.open { left: 60%;}.circle button.close { top: 60%; transform: rotate(90deg); transform-origin: top left;}.main_box.show-nav .circle { transform: rotate(-70deg);}nav { position: fixed; left: 0; bottom: 2.5em; z-index: 5;}nav ul { list-style: none; padding-left: 2em;}nav ul li { text-transform: uppercase; color: rgb(243, 243, 243); margin: 2.5em 0; transform: translateX(-100%); transition: transform 0.4 ease-in;}nav ul li+li { margin-left: 1em; transform: translateX(-150%);}nav ul li+li+li { margin-left: 2em; transform: translateX(-200%);}.main_box.show-nav+nav li { transform: translateX(0); transition-delay: 0.3s;}.nav-links { cursor: pointer;} |
Output:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
