Navbar Using HTML And CSS
Hello friends, my name is Gautam and welcome all of you to this new and wonderful project. Today we have created a responsive navigation menu and we have created this navigation menu only with the help of HTML and CSS. We have used JavaScript to create this navbar. Friends, if you are still learning HTML and CSS then this project is perfect for you because when you create a project, you get knowledge of coding.
Friends, we have also used a little bit of Bootstrap in this navigation menu because when we use a frame like Bootstrap in creating a project, our work becomes easier and the project gets created quickly. Bootstrap is also used in this navigation menu. have taken
We have used jquery to create this navbar, so that as soon as the user clicks on the open navigation button, when the navbar opens, it gets animated and opens, which also looks good. Also, friends, we have used Bootstrap. To do this, we have used Bootstrap’s own Bootstrap link so that there is no problem in our code.
What is Navbar Menu?
Friends, if it is important for you to know what Navbar is and why it is important to use it, then let me tell you that Navbar i.e. navigation menu is important for us because if we have a website then we would like that every user To run our website and take advantage of it, it is necessary to make our website responsive. By making it responsive, our website can be opened on all devices and all users will be able to run this website, so when we have to make the website responsive, then We have to give proper width and height to the navigation menu so that when the user opens the website in mobile, the website opens properly. When the user has to open the website in mobile, then the navigation menu appears different to him and friends, this navigation Our important button is added in the menu by clicking on which the user can go to the page of that button.
Navbar Menu HTML Code
- Friends, we have added some links in the HTML <link rel=’stylesheet’ href=’https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css’>
<link rel=’stylesheet’ href=’https://fonts.googleapis.com/css?family=Lato:400,700,300′><link rel=”stylesheet” href=”./style.css”>
In which one link is of our css from which we have designed some things ourselves which is style.css and the other link is of Bootstrap which is provided by Bootstrap itself. - We have added some buttons to the menu <a class=’list-group-item’ href=’#’>Home</a>
<a class=’list-group-item’ href=’#’>Services</a> which is inside the link. - Then in the last HTML file, we have used two different links of the script <script src=’//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js’></ script>
<script src=’//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js’></script> which is a bootstrap script link and for the second animation we used jquery Whose link is here? If you do not use these then it will help you.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Bootstrap Fullscreen Menu via Modal</title><link rel="preload" as="image" imagesrcset="https://developergtm.in/wp-content/uploads/2024/03/Screenshot-2024-03-30-090450.png" imagesizes="(max-width: 749px) 100vw, 749px" /><link rel="preload" as="font" href="https://developergtm.in/wp-content/themes/smart-mag/css/icons/fonts/ts-icons.woff2?v3.1" type="font/woff2" crossorigin="anonymous" />
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Lato:400,700,300'><link rel="stylesheet" href="./style.css">
</head>
<body>
<div class='modal fade modal-fullscreen-menu' id='modalNavigation' role='dialog' tabindex='-1'>
<button aria-label='Close' class='close' data-dismiss='modal' type='button'>
<span class='sr-only'>Close navigation</span>
<span class='glyphicon glyphicon-remove'></span>
</button>
<div class='modal-dialog'>
<nav class='list-group'>
<a class='list-group-item' href='#'>Home</a>
<a class='list-group-item' href='#'>Services</a>
<a class='list-group-item' href='#'>Meet the Team</a>
<a class='list-group-item' href='#'>Careers</a>
<a class='list-group-item' href='#'>Contact Us</a>
</nav>
</div>
</div>
<div class='jumbotron text-center'>
<div class='container'>
<button class='btn btn-primary btn-lg' data-target='#modalNavigation' data-toggle='modal' type='button'>
Open Navigation
</button>
</div>
</div>
<!-- partial -->
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
</body>
</html>
Navbar Menu CSS Code
body {
font-family: "Lato", sans-serif;
}
.navbar-header {
float: none;
}
.modal-fullscreen-menu{
background-color: #000000;
}
.modal-fullscreen-menu .close {
color: white;
opacity: 1;
padding: 10px;
position: absolute;
top: 0;
right: 0;
z-index: 1;
font-size: 5vh;
}
.modal-fullscreen-menu .modal-dialog {
margin: 0 auto;
width: 100%;
max-width: 768px;
display: flex;
height: 100%;
align-items: center;
}
.modal-fullscreen-menu .modal-content {
background-color: transparent;
box-shadow: none;
border: none;
}
.modal-fullscreen-menu .list-group {
text-align: center;
margin: 0 auto;
width: 100%;
}
.modal-fullscreen-menu .list-group a {
font-size: 200%;
font-weight: 200;
letter-spacing: 0.05em;
border: none;
transition: all 0.25s ease;
background-color: transparent;
color: white;
padding: 7.5vh 0;
height: 5vh;
font-size: 5vh;
line-height: 0;
}
.modal-fullscreen-menu .list-group a:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
z-index: -1;
opacity: 0;
transform: scale3d(0.7, 1, 1);
transition: transform 0.4s, opacity 0.4s;
}
.modal-fullscreen-menu .list-group a:hover {
color: black;
}
.modal-fullscreen-menu .list-group a:hover:before {
transform: translate3d(0, 0, 0);
opacity: 1;
}
.modal-backdrop.in {
opacity: 1;
}
.jumbotron {
display: flex;
align-items: center;
margin: 0;
height: 100vh;
color: white;
background-color: #333;
}
This is my codepen, from this you can also see live projects and also you can join me on codepen, there you will get to see different types of projects.
See the Pen Untitled by Developergtm (@developergtm) on CodePen.