How To Create A Responsive Navigation Bar Using HTML CSS
Responsive Navigation Bar
Learn how to build Navigation Bar using HTML, CSS, And JavaScript. Easy way to make Navigation Menu Bar using HTML. You'll easily create this responsive Navigation Menu Bar by watching my video Tutorial, Which I Given Below, or By following these steps, which I gave below.
How To Build Perosnal WebSite In HTML And CSS.
- 0.0 - 1.30 min : Intro
- 1.30 - 35.0 min: Build a A Responsive Navigation Bar Using HTML, CSS, And JS.
About This Tutorial
In this tutorial, I will make this Amazing Navigation Menu Bar Using HTML, CSS, and JavaScript. You see This, Navigation Bar Have Drope-Down menu and drop-down search bar. This Menu Bar is fully responsive for all Devices. You will easily create this menu bar by following my video tutorial which, i have given above in this post, or by following the steps which I have given above in this post. If you have any questions or problems, contact me. I Will Solve Your Problems as soon as possible.
Follow These Steps:-
1) Open any code editor like Notepad++, Sublime, etc.
2) Create HTML, CSS, And Javascript files and put in your project folder which you create. I recommended you to create separate folders for CSS File And JS File.
3) Link the CSS and JS File With HTML File.
4) Copy the HTML code, which I gave below, and paste in the HTML which you create.
<html> <head> <title>Responsive Menu</title> <link href="css/style.css" rel="stylesheet" type="text/css"> <!--using FontAwesome----------------> <script crossorigin="anonymous" src="https://kit.fontawesome.com/c8e4d183c2.js"></script> </head> <body> <section class="navigation"> <header> <!--bars-icon--> <div class="toggle"> </div> <!--menu--> <nav class="menu"> <!--logo---------------------------> <div class="logo"> LOGO</div> <ul> <li><a href="#">Home</a></li> <li class="sub-menu"><a href="#">Team</a> <!--sub-menu--> <ul> <li><a href="#">Touseeq Ijaz</a></li> <li><a href="#">Azhar Ali</a></li> </ul> </li> <li><a href="#">Trems & Conditions</a></li> <li class="sub-menu"><a href="#">Services</a> <!--sub-menu--> <ul> <li><a href="#">Web Devolpment</a></li> <li><a href="#">Web Applications</a></li> </ul> </li> <li><a href="#">Support</a></li> <li><a href="#">Contact</a> </li> </ul> </nav></header></section> <!--search-icon----------------------> <br /> <div class="search-icon"> </div> <!--search-box-------------------------------------------> <br /> <div class="search-box"> <!--input---------> <input placeholder=" Search Something Here" type="text" /> <!--icon------> <br /> <div class="s-icon"> <i class="fas fa-search"></i></div> </div> <!--JQuery-script-------------------------> <script src="js/Jquery.js" type="text/javascript"></script> </body> </html>
5) Copy the CSS code, which I gave below, and paste in the CSS which you create.
@charset "utf-8";
/* CSS Document */
body{
margin:0px;
padding:0px;
background-color:#f1f1f1;
}
ul{
list-style:none;
}
a{
text-decoration: none;
}
header{
background-color: #FFFFFF;
box-sizing: border-box;
width:100%;
padding: 0px 30px;
display: flex;
align-items: center;
}
.logo{
border-right: 1px solid #E7E7E7;
height: 50px;
line-height: 50px;
font-size: 25px;
padding-right: 10px;
font-weight: bold;
font-family: RoadTest;
letter-spacing: 5px;
color: #3D3D3D;
}
.logo {
display: flex;
justify-content: center;
align-items: center;
}
.menu ul{
display: flex;
margin: 0px;
padding: 0px;
}
.menu{
display:flex;
align-items:center;
}
.menu ul li a{
border-right: 1px solid #E7E7E7;
height: 50px;
line-height: 50px;
margin: 0px;
padding: 0px 20px;
display: flex;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: 600;
font-family: calibri;
color: #5f5f5f;
}
.menu ul li a:hover{
background-color: #E8E8E8;
color: #3F3F3F;
}
.menu{
margin-right: auto;
}
.search-icon:before{
content:'\f002';
font-family: fontAwesome;
line-height: 30px;
color: #474747;
}
.search-icon.active:before{
content:'\f00d';
}
.menu ul li ul{
position: absolute;
left: 0;
background-color: #161616;
flex-direction: column;
display: none !important;
}
.menu ul li{
position: relative;
}
.menu ul li ul li{
display:block;
width: 200px;
}
.menu ul li ul li a{
color: #ACACAC !important;
border-bottom: 1px solid #424242;
}
.menu ul li.active ul{
display:block !important;
}
.menu ul li ul li a:hover{
background-color: #1D1D1D !important;
color:#D1D1D1 !important;
}
.sub-menu:before{
content: '\f0d7';
font-family:fontAwesome;
position: absolute;
line-height: 50px;
font-size: 12px;
color: #727272;
right: 10px;
}
.search-box{
width:100%;
height: 50px;
box-sizing: border-box;
background-color: #2a2829;
display: flex;
justify-content: space-between;
align-items: center;
color: #FFFFFF;
display: none;
padding: 0px 30px 0px 30px;
transition: all ease 0.5s;
}
.navigation{
position: relative;
box-shadow: 1px 1px 20px rgba(0,0,0,0.01);
}
.search-box input{
width: 70%;
height: 50px;
outline: none;
background: transparent;
border:none;
color: #E3E3E3;
font-size: 16px;
}
.s-icon{
color:#CDCDCD;
}
.search-box input::placeholder{
color:#AFAFAF;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 12px;
}
.search-box.active{
display:flex;
}
@media(max-width:900px){
.toggle:before{
content:'\f0c9';
font-family: fontAwesome;
line-height: 30px;
display: none;}
.logo{
border: none;
}
.menu{
margin-right: 0px !important;
}
header nav ul{
position: absolute;
width: 100%;
height: calc(100vh - 50px);
background-color: #353535;
top: 50px;
left: 0;
transition: 0.5s;
display: block !important;
overflow: hidden;
display: none !important;
}
header{
display: flex;
justify-content: space-between;
}
nav ul li a{
border-bottom: 1px solid #474747 ;
border-right: none !important;
color:#bebebe !important;
}
.toggle.active:before{
content:'\f00d' !important;
}
nav ul li a:hover{
background-color: #2F2F2F !important;
}
header.active-menu ul{
display: block !important;
}
.toggle:before{
display: block;
}
header.active-menu,
header.active-search
{
background-color: #353535;
height: 50px;
color: #FFFFFF;
}
.search-icon.active:before
{
color: #FFFFFF;
}
.menu ul li ul{
position: relative;
top: 0px;
height:auto;
}
.menu ul li ul li{
width: 100%;
}
header.active-menu .logo,
header.active-menu .search-icon{
display: none;
}
header.active-search .logo,
header.active-search .toggle{
display: none;
}
}
6) Copy the JS code, which I give you below of this, and paste this code in the CSS which you create.
$(document).ready(function(){
$('.search-icon').click(function(){
$('.search-icon').toggleClass('active')//search icon change onClick
$('.search-box').toggleClass('active')//box show when click on icon
$('header').toggleClass('active-search')//In mobile logo and bars
})
});
/*sub-menu visible on click */
$(document).ready(function(){
$('ul li').click(function(){
$(this).siblings().removeClass('active')//remove active
$(this).toggleClass('active')//Add Active class first click
})
});
$(document).ready(function(){
$('.toggle').click(function(){
$('.toggle').toggleClass('active')//change menu icon onClick
$('header').toggleClass('active-menu')//hide logo and search
})
});
7) All Files link, Which I use in the project given below.
YOUR EXISTING AD GOES HERE
The Download Links Will Be Shown in 30 Seconds
Forms that must be ordered from the IRS are precision machining labeled "for information solely" and can be ordered on-line. In the dental trade, we see molds for clear aligners being presumably the most 3D printed objects on the earth. Currently, the molds are 3D printed with each resin and powder primarily based 3D printing processes, but in addition by way of materials jetting. Crowns and dentures are already directly 3D printed, along with surgical guides. It is in our packaging, publications, pictures, properties and workplaces. Printing impacts hundreds of thousands of tonnes of latest paper products and most recycled paper.
ReplyDelete