Skip to content
  • Home
  • Contact
  • COVID
  • My Portfolio
Sonahang RaiPersonal Blogs
  • Home
  • Contact
  • COVID
  • My Portfolio
Responsive Menu
Web Design Tutorials

Responsive Menu Bar in HTML CSS and JS

On April 16, 2020 by Sonahang Rai

Menu or the navbar are the most important part of the websites. Not only the websites but it is also very important part for any kind of application. The menu are the map for finding out the way to any website, web app and applicaitons. In this blog we will learn to create the menu. We will make the menu ui clean and also fully responsive.

We will be using the website markup language HTML and will style it with CSS. We will put life on our menu with the javascript too. So make your editor ready and lets get started.

Step 1: Lets build the HTML tags

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Skil Bar</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/style.css" />
  </head>
  <body>
    <div class="container">
      <div class="nav">
        <div class="logo">
          <a href="#!"><h1>COVID-19</h1></a>
        </div>
        <div class="mainmenu">
          <ul>
            <li><a href="#!"><i class="fa fa-home"></i></a></li>
            <li><a href="#!">About</a></li>
            <li><a href="#!">Symptoms</a></li>
            <li><a href="#!">Protection</a></li>
            <li><a href="#!">Prevention</a></li>
            <li><a href="#!">Faqs</a></li>
            <li><a href="#!">Udpates</a></li>
          </ul>
        </div>
        <div class="mobilemenu">
          <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span>
          <div  id="mySidenav" class="sidenav">
            <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
            <ul>
              <li><a href="#!"><i class="fa fa-home"></i></a></li>
              <li><a href="#!">About</a></li>
              <li><a href="#!">Symptoms</a></li>
              <li><a href="#!">Protection</a></li>
              <li><a href="#!">Prevention</a></li>
              <li><a href="#!">Faqs</a></li>
              <li><a href="#!">Udpates</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

This is my HTML tags. Create yours in the editor. So here I have used fontawsome for the home icon. Include the cdn of fontawsome so that you can use the fontawsome. And also I have used fonts from the google fonts. I will include the fonts cdn in the css file later.

Step: 2 Now lets give css to our tags

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
a{
  color: #fff;
  text-decoration: none;
}
body{
  background-image: url(https://cdn.pixabay.com/photo/2020/03/24/16/17/mask-4964590_1280.png);
  background-repeat: repeat-y;
  background-size: 100%; 
  display: flex;
  height: 100vh;
  font-family: 'Poppins', sans-serif;
}
.container {
    width: 90%;
    margin: 0 auto;
}
.nav {
  display: flex;
}
.logo {
    width: 20%;
}
.logo h1 {
    font-size: 1.8rem;
}
.mainmenu{
  width: 80%;
}
.mainmenu ul {
    display: flex;
    list-style: none;
    justify-content: flex-end;
}
.mainmenu ul li{
  padding: 2rem;
}
.mainmenu ul li {
    padding: 10px 30px;
    font-size: 18px;
}
.mobilemenu{
  display: none;
}
@media screen and (max-width: 1200px){
  .mainmenu ul li {
    padding: 10px 12px;
  }
}
@media screen and (max-width: 900px){
  .mainmenu{
    display: none;
  }
  .mobilemenu {
    display: block;
    width: 50%;
    text-align: right;
  }
  .logo {
     width: 50%;
  }
}
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: #be8f4e;
  transition: 0.5s;
}
.mobilemenu span {
    color: #fff;
    line-height: 80px;
}
.sidenav ul {
    text-align: center;
    padding: 0;
    list-style: none;
}
.sidenav ul li {
    padding: 8px;
    font-size: 1.5rem;
}
a.closebtn {
    text-align: right;
    font-size: 2rem;
    margin: 20px;
}

I made the background fill with the image from the url. Also, you can notice I have linked to google fonts url at the top of css file. I have made the mobilemenu hidden in desktop devices whereas the big menu is visible in desktop view and vice versa. We will make the mobile menuu visible with the js code in next step.

Step 3: Lets make the mobile menu visible from js

As initially the mobile menu is not visible due to its width is zero. We will add the width to 100% from the js code like below.

<script>
function openNav() {
  document.getElementById("mySidenav").style.width = "100%";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}
</script>

So this is how we did it and made a responsive menu. You can get all these codes in my git here. You can also refer my youtube video for this tutorial.

Tags: css, html, js, menu, nav, responsive

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

CAPTCHA


Archives

  • November 2022
  • November 2021
  • August 2021
  • April 2021
  • March 2021
  • August 2020
  • July 2020
  • April 2020

Calendar

March 2023
S M T W T F S
 1234
567891011
12131415161718
19202122232425
262728293031  
« Nov    

Categories

  • Javascript
  • Next
  • React
  • SEO
  • Web Design (Slicing)
  • Web Design Tutorials
  • Wordpress

Copyright Sonahang Rai 2023 | Theme by ThemeinProgress | Proudly powered by WordPress