How to create a Navigation Menu Bar in HTML, CSS and JavaScript
We will using HTML and CSS only these two we will make it fun.
Hello Friends, Today we will learn How to create a Navigation Menu Bar in HTML, CSS and JavaScript.
In this blog we will learn how to make a Responsive Navigation Menu Bar. For this only basic Knowledge of HTML, CSS and JavaScript is enough for this.
So let's start Coding for how to be make a Menu Bar in HTML and CSS.
Hey friends, today in this blog you'll learn how to create a Responsive Menu Bar in HTML, CSS and Using JavaScript . In the earlier blog, I have shared How to create a One Page Website in HTML and CSS and now it's time to create a how to create a Responsive Menu Bar in HTML, CSS and Using JavaScript.
So here is the code and my work. Hope you are gonna love this and share with your friends too.
Step 1) Open a any code Editor in any Devices
Step 2) Create a file and save it index.html with .html extension
Step 3) Paste these code on index.html file and save it (ctrl+s)
Add this Code in index.html Page
<!DOCTYPE html>
<html>
<head>
<title>Nothing</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="main">
<div class="logo">
<img src="images/logo.webp">
</div>
<nav>
<ul id="navList">
<span id="outNav" onclick="navOut()">X</span>
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">contact us</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">services</a></li>
</ul>
</nav>
<span id="navigation" onclick="getNav()">⇶</span>
</div>
</body>
</html>
<script type="text/javascript">
var rough = document.getElementById("navList");
var navigation = document.getElementById("navigation");
function getNav(){
rough.style.top = "80px";
navigation.style.display = "none";
}
function navOut(){
rough.style.top = "-100%";
navigation.style.display = "block";
}
</script>
*<link rel="stylesheet" type="text/css" href="css/style.css"> This Code be must be added without these code stylesheet code not run.
Step 4) Again create a file name it style.css with .css extension
Step 5) Paste These Code on style.css Page and save it.
Add this Code in style.css Page
1: *{
2: padding: 0;
3: margin: 0;
4: box-sizing: border-box;
5: }
6: .main{
7: max-width: 100%;
8: display: flex;
9: height: 80px;
10: background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(../images/slider-2.jpg);
11: justify-content: space-around;
12: align-items: center;
13: text-align: center;
14: }
15: body{
16: width: 100%;
17: height: 100vh;
18: background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(../images/slider-2.jpg);
19: }
20: nav{
21: position: relative;
22: }
23: nav ul{
24: list-style: none;
25: }
26: nav ul li{
27: display: inline-block;
28: margin: 0 10px;
29: }
30: nav ul li a{
31: text-decoration: none;
32: text-transform: uppercase;
33: color: #fff;
34: }
35: #navigation{
36: padding: 2px 10px;
37: border-radius: 11px;
38: transform: rotate(180deg);
39: text-align: center;
40: font-size: 32px;
41: color: #000;
42: cursor: pointer;
43: background: #fff;
44: outline: none;
45: }
46: #outNav{
47: position: absolute;
48: top: 0;
49: left: 90%;
50: color: #fff;
51: font-size: 50px;
52: font-family: sans-serif;
53: }
54: #navigation,#outNav{
55: display: none;
56: cursor: pointer;
57: }
58: @media only screen and (max-width: 768px) {
59: #navigation,#outNav{
60: display: block;
61: }
62: nav ul{
63: position: fixed;
64: top: -100%;
65: left: 0;
66: background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(../images/slider-2.jpg);
67: width: 100%;
68: height: 100%;
69: transition: all 1s ease;
70: }
71: nav ul li{
72: display: block;
73: line-height: 60px;
74: }
75: }
Step 6) Now Copy File Path and pate it any browser.
Step 7) See magic.....😊
Thank you...........
0 Comments