IntroductionToWebPart7

How to design responsive menu bar using html,css and javascript

Html page ➢ Resp_menu_bar.html

<!DOCTYPE html>
<html>
<head>
<title>Responsive Menu Bars Demo</title>
<link rel="stylesheet" href="cssMenu.css" type="text/css"/>
<script src="menujs.js" type="text/javascript"></script>
</head>
<body>
<!-- Responsive Horizontal naviagtion bar //-->
<ul class="h_bar " id="nav_bar">
    <li><a href="#">Home</a></li>
    <li><a href="#">About us</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact us</a></li>
    <li class="icon"><a href="javascript:void(0);" style="font-size:15px;"  onclick="myFunction()">&#9776;</a></li>
</ul>
</body>
</html> 

Css Sheet➢cssMenu.css

/* CSS Document */
*{
margin:0;
padding:0;
}
/* horizontal navigation bar */
.h_bar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}
.h_bar li {
    float: left;
}
.h_bar li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
.h_bar li a:hover {
    background-color: #000;
    font-weight:bold;
    text-decoration:underline;
}
.h_bar .icon {
    display: none;
}
@media screen and (max-width: 600px) {
  .h_bar li:not(:first-child) {display: none;}
  /* Apart From The First child The Remaining all list tags should be  hiddden */
  .h_bar  li.icon {
    float: right;
    display:block;
    text-decoration:none;
    color:#fff;
  }
}

@media screen and (max-width: 600px) {
  .h_bar.responsive {position: relative;}
  .h_bar.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .h_bar.responsive li{
    float: none;
    display: block;
    text-align: left;
  }
} 

Javascript file➢Menujs.js

function myFunction() {
    var x = document.getElementById("nav_bar");
    if (x.className === "h_bar") {
        x.className += " responsive";
    } else {
        x.className = "h_bar";
    }
}
If you want to see how its runs in actual browser.

Next➱

⭅ Prev