Responsive Navigation Bar With HTML CSS and JavaScript

ELKICK Official January 14, 2021

 1. Responsive Navigation Bar With HTML CSS and JavaScript | Responsive Menu 


index.html

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Responsive Menu Design</title>
      <link rel="stylesheet" href="style.css" type="text/css">
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
      <nav>
            <div class="toggle">
                  <i class="fa fa-bars navBar" aria-hidden="true"></i>
            </div>
            <ul>
                  <li>
                        <a href="#">Home</a>
                  </li>
                  <li>
                        <a href="#">Abouts</a>
                  </li>
                  <li>
                        <a href="#">Services</a>
                  </li>
                  <li>
                        <a href="#">Contact</a>
                  </li>
            </ul>
      </nav>

      <script src="https://code.jquery.com/jquery-3.5.1.js"></script>

      <script>
            $(document).ready(function(){
                  $('.navBar').click(function(){
                        $('ul').toggleClass('active');
                  });
            })
      </script>

</body>
</html>

style.css

body
{
      margin: 0;
      padding: 0;
      font-family: sans-serif;
}
nav{
      width: 100%;
      background: #22234a;
}
ul{
      width: 80%;
      margin: 0 auto;
      padding: 0;
}
ul li{
      list-style: none;
      display: inline-block;
      padding: 20px;
}
ul li:hover{
      background: #e91e63;
      transition: .5s;
      cursor: pointer;
}
ul li a{
      color: #fff;
      text-decoration: none;
}
.toggle{
      width: 100%;
      padding: 10px 20px;
      background: #001f44;
      text-align: right;
      box-sizing: border-box;
      color: #fff;
      font-size: 30px;
      display: none;
}
@media(max-width:768px)
 {
	.toggle{
		display: block;
	}
	ul{
    		width: 100%;
        	display: none;
	}
	ul li{
		display: block;
		text-align: center;
	}
	.active{
		display: block;
	}
 }

Click Here To Dwonload Code

Tags

Post a Comment

0 Comments