Skip to main content

 Responsive Menu Bar by HTML5 And CSS3 


HTML5 Code

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- //delhikacoder  -->
<title>Nav-Bar created by delhikacoder</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>

<header>
<nav>
<div class="logo">
Brand logo
</div>
<input type="checkbox" name="" id="click">
<label for="click" class="menu-btn">
<i class="fa fa-bars"></i>
</label>
<ul>
<li><a href="#">
Home</a>
</li>
<li>
<a href="#">
About</a>
</li>
<li>
<a href="#">
Service</a>
</li>
<li>
<a href="">
Contact</a>
</li>

</ul>
</nav>
</header>

</body>
</html>


CSS3 Code

*{
padding: 0;
margin: 0;
box-sizing: border-box;
}

nav{
background: #dc0f8a;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px;

}
nav .logo{
font-size: 40px;
font-weight: 800;
color: #fff;
margin: 0 10px;
}
nav ul{
display: flex;
list-style: none;

}
nav ul li{
margin: 0 8px;
}
nav ul a{
    color: #fff;
    text-decoration: none;
    letter-spacing: 1px;
    padding: 5px 20px;
    border: 1px solid #fff;
    border-radius: 5px;
    font-weight: 600;
}

nav ul a:hover{
    color: #fff;
    text-decoration: none;
    letter-spacing: 1px;
    padding: 5px 20px;
       border: 1px solid #fff;
    border-radius: 5px;
    font-weight: 600;
    transition: .5s ease;
    background: #4e4e4e26;
}
nav ul ul{
position: absolute;
display: inline-block;
}
nav ul ul li{
position: relative;
top: 40px;
  left: -98px;
  line-height: 40px;
  background: #3E8DA8;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  border-radius: 0 0 4px 4px;

  z-index: 2;
}
.menu-btn i{
cursor: pointer;
color: #fff;
font-size: 20px;
display: none;
}
#click{display: none;}


@media(max-width:940px){
nav ul {position: fixed;
top: 65px;
height: 100vh;
width: 100%;
display: block;
background: #000000de;
left: -100%;
text-align: center;}

        #click:checked ~ ul{
        left: 0%;
        transition: .5s ease;
        }
        #click:checked ~ .menu-btn i:before {
        content: "\f00d";

        }
nav ul li{
        margin: 20px 0;
           border-bottom: 1px solid #fff;
           padding: 0 0 8px 0;
}

nav ul li a{
    color: #fff;
    text-decoration: none;
    letter-spacing: 1px;
    padding: 5px 20px;

 
   border: none;
    font-weight: 600;
}

nav ul li a:hover{
    color: cyan;
    text-decoration: none;
    letter-spacing: 1px;
    padding: 5px 20px;
 background: none;
   border: none;
    font-weight: 600;
}

nav ul ul{
position: absolute;
display: inline-block;
}
nav ul ul li{
position: relative;
top: 40px;
  left: -98px;
  line-height: 40px;
  background: #3E8DA8;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  border-radius: 0 0 4px 4px;

  z-index: 2;
}
.menu-btn i{
cursor: pointer;
color: #fff;
font-size: 20px;
display: block;
margin: 0 10px;
}


}



Code Output in Video








Comments

Post a Comment

Popular posts from this blog

 What is web designing? 1. web designing meant layout of a website   2. we can design a website layout on photoshop, figma, in design, xd,  Adobe Illustrator   software  3. when a design is ready and approved by the client then start front-end development  4. front-end developer mean to develop a layout design by web designers and how is looking layout on the web browswe   web designer skills 1. Adobe photoshop 2.  Adobe Illustrator 3.  Adobe InDesign 4. Figma 5. Adobe XD if you want to become a web designer so you know very well this software and anyone in you become a master like a pro all software is used for mobile application layout design and logo design and website layout design front-end developer skills 1.html5 (it is the latest version of Html) 2. css3 ( it is the latest version of css) 3. Bootstrap5 (it is the latest version of bootstrap) 3. javascript (ECMA6 it is the latest version of javascript) 4. lear javascript...
Post a Comment
Read more
  Basic Navbar Toggle Basic Html Code source: <html>     <meta charset="utf-8">     <meta name="viewport" content="width=device-width, initial-scale=1">     <link rel="stylesheet" href="style.css"/>     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />     <title> slider</title> <body>     <section>         <nav>             <div class="logo">                 brand   logo             </div>             <div class="sidebar">             <i cla...
Post a Comment
Read more
 HOW TO MAKE TIME COUNTDOWN BASIC NEEDS: HARDWARE 1. COMPUTER/ LAPTOP SOFTWARE 1. TEXT EDITOR EXAMPLE : VISUAL STUDIO, ATOM, SUBLIME TEXT, NOTEPAD++  ETC... HAVE A BASIC KNOWLEDGE 1. HTML5 2. CSS3 3. JAVASCRIPT LET'S SEE OUTPUT IN VIDEOS: HTML CODE: <!-- DEVELOP BY DELHI KA CODER --> < html >      < title > Count-down develop by delhikacoder </ title >      < meta   charset = "utf-8" >      < meta   name = "viewport"   content = "width=device-width, initial-scale=1.0" >      < link   rel = "stylesheet"   href = "style.css" />        < script   src = "javascript.js"   defer ></ script >      < body >          < section >              <...
Post a Comment
Read more