Navigation Menu
Here you can learn how to make navigation menu with amazing animation effect using css. So if you like our article the visit more. I hope you should have some html and css knowledge, after that you have to install a code editor named visual studio code, download it and install it then open it and select new file its name file.html then save it.
Follow Some Steps For Make Easily
Step 1.
After open your html file then press ctrl+1 for generate html syntex and you can customize easily. Now go the body tag and make a div with class like this <div class=”navigation”> after this give more tag like li, a etc. And now get the icon for navigation menu from ionicon website there you can use the amazing icons and you can use also you web app it’s amazing site for icons. After this phaste all icons code in the anchor tag like this <a><ion-icon></ion-icon></a> this icon code phaste all list with required. If you don’t understand in this article so look html source code for helping you. And this code phaste your code editor for make esaily.
HTML Source Code…
<div class="navigation">
<div class="toggle"><ion-icon name="add-outline"></ion-icon></div>
<li style="--i:0">
<a href="#">
<ion-icon name="home-outline"></ion-icon>
</a>
</li>
<li style="--i:1">
<a href="#">
<ion-icon name="call-outline"></ion-icon>
</a>
</li>
<li style="--i:2">
<a href="#">
<ion-icon name="moon-outline"></ion-icon>
</a>
</li>
<li style="--i:3">
<a href="#">
<ion-icon name="wifi-outline"></ion-icon>
</a>
</li>
<li style="--i:4">
<a href="#">
<ion-icon name="airplane-outline"></ion-icon>
</a>
</li>
<li style="--i:5">
<a href="#">
<ion-icon name="volume-high-outline"></ion-icon>
</a>
</li>
<li style="--i:6">
<a href="#">
<ion-icon name="bluetooth-outline"></ion-icon>
</a>
</li>
<li style="--i:7">
<a href="#">
<ion-icon name="settings-outline"></ion-icon>
</a>
</li>
</div>
Step 2.
You are already learn about html and how can implement html code for navigation menu now give the style for looking amazing. In this article we are use css and you know what how can use it and what’s ways for using css in the html page. If you want to use css in your html pages so you can apply three ways.
- 1. Inline CSS
- 2.Internal CSS
- 3.External CSS
Here we are used Internal CSS. So get the style tag in the head tag and use all css code under style tag. We are used always with internal css. So first of all go to the head section in your html syntax and make style with tag like this <style> and close it. like this </style> after you can write css code under style tag first make * tag for all page like this *{} and give the margin padding 0 for all page and give box-sizing border-box then give the body tag and make display flex, justify-content center, align-items center, min-height 100vh and background color you can give according your page requirement.
I hope you know about classes in css so make a class property in the style like. .navigation{} in this tag you can set you width, height, position. Now give the li tag with class and make properties for this page like. position left 0, list-style none, transform-origin 100px, transition 0.5s, transition-delay calc(0.1s).
Above this we will take navigation class and then take li tag then we will take a tag then we will flex the display inside it and center justify content and align items will take its big width 40px and height also 40px then we will take background color # fff, we will take 50% of the border radius so that we can make this icon a circle, after that we will rotate the transform. Then we will give the box shadow 0 3px 4px rgba then put the color black in it, we will give it a transition 5s. For example.
.navigation li a{
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
background-color: #fff;
border-radius: 50%;
transform: rotate(calc(360deg / -8 * var(–i)));
box-shadow: 0 3px 4px rgba(0,0,0,0.15);
color: black;
transition: 0.5s;
}
In this also we will take the navigation class and then take the list tag, instead of that we will hover the anchor tag. And on hovering, we will make its color red so that we can see it well. Then we have to take Navigation class and also take a class with Javascript which is named Active. His big list is to take the tag. And in this the transform has to be rotated, something like this.
.navigation li a:hover{
color: red;
}
.navigation.active li{
transform: rotate(calc(360deg / 8 * var(–i)));
}
Now we have to take toggle class and position inside it then give some property of it then make this property absolute. After this we have to make its width 60px and height also 60px. Then we have to put the background color #fff. After that the display will flex and then justify will center the content. Then keep the align items center and z index as 10000 so that we are visible.
Then the border radius will be 50% and the cursor will be placed. Then we will give box shadow 0 0 4px rgba after that we will give font size 2em and then save by giving transition 1s something like this.
.toggle{
position: absolute;
width: 60px;
height: 60px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
z-index: 10000;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 0 4px rgba(0,0,0,0.15);
font-size: 2em;
transition: 1.25s;
}
If you make easily this design then look css code in given bellow and i hope you like this code.
Best Articles.
How to make portfolio website using html,css?
How to make social media icons using css?
How to make sidebar menu for website dashbaord?
How to create sanke game using Javascript?
CSS Source Code…
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: rgb(117, 116, 117);
}
.navigation{
position: relative;
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
}
.navigation li{
position: absolute;
left: 0;
list-style: none;
transform-origin: 100px;
transition: 0.5s;
transition-delay: calc(0.1s * var(--i));
transform: rotate(0deg) translateX(80px);
}
.navigation li a{
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
background-color: #fff;
border-radius: 50%;
transform: rotate(calc(360deg / -8 * var(--i)));
box-shadow: 0 3px 4px rgba(0,0,0,0.15);
color: black;
transition: 0.5s;
}
.navigation li a:hover{
color: red;
}
.navigation.active li{
transform: rotate(calc(360deg / 8 * var(--i)));
}
.toggle{
position: absolute;
width: 60px;
height: 60px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
z-index: 10000;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 0 4px rgba(0,0,0,0.15);
font-size: 2em;
transition: 1.25s;
}
.navigation.active .toggle{
transform: rotate(315deg);
}Step 3.
Here used some javascript code for navigation toggle and create one class with toggle. So if you basic knowledge about javascript then you can understand this code beacuse this is not advance code it is used mostly pages for make events. So now go to the just ending body tag and create script tag like. <script></script> and here you can write the javascript codes. We are make two variable first variable name is toggle and second is navigation. First toggle get the class from you html div tag with querySelector like. let toggle = document.querySelector(‘.toggle’);. Second navigation follow same method make this like. let navigation = document.querySelector(‘.navigation’);. Now give the first variable name toggle and make onclick events like. toggle.onclick with function for activate class in body tag.
JavaScript Code…
let toggle = document.querySelector('.toggle');
let navigation = document.querySelector('.navigation');
toggle.onclick = function(){
navigation.classList.toggle('active');
}
