How to make menu bar for website,nav bar design.

we are making  a beautiful navigation menu with smooth effect animation.we are using in this tutorial html cs and javscript.

Html code 

create one div give id "mysidenav" and class name "sidenav".

one anchor tag create and write like this '<a href="javascript:void(0)"'  give a class "closebtn" add a onclick function name of functiont"closeNav()" in anchor tag add a Entity "&times:"

ofter anchor tag create four more anchor tage for about,services,careers and contact now close the div.

and take another div give id "main" in this div create a "span" tag add onclick function give your function name "openNav()" add entity "&#9796;"

close the all tags.

your html code is ready 

<div id="mySidenav" class="sidenav">

  <a href="javascript:void(0)"

  class="closebtn"

  onclick="closeNav()">&times;</a>

  <a href="#">About</a>

  <a href="#">Services</a>

  <a href="#">Careers</a>

  <a href="#">Contact</a>

</div>

<div id="main">

  <span style="font-size:30px;cursor:

  pointer"

  onclick="openNav()">&#9776; 

  </span>

</div>

Css Coding

now styling the html code we create another file to link with html file and  save with .css.

for example

<link rel="stylesheet" type="text/css" href="your file name.css">

after linking the css file open this css file and start styling

follow this code 

body{

    font-family: "Lato", sans-serif;

    transition: background-color .5s;

}

.sidenav {

    height: 100%;

    width: 0;

    position: fixed;

    z-index: 1;

    top: 0;

    left: 0;

    background-color: #111;

    overflow-x: hidden;

    transition: 0.5s;

    padding-top: 60px;

}

.sidenav a {

    padding: 8px 8px 8px 32px;

    text-decoration: none;

    font-size: 25px;

    color: #818181;

    display: block;

    transition: 0.3s

}

.sidenav a:hover, .offcanvas a:focus{

    color: #f1f1f1;

}

.sidenav .closebtn {

    position: absolute;

    top: 0;

    right: 25px;

    font-size: 36px;

    margin-left: 50px;

}

#main {

    transition: margin-left .5s;

    padding: 16px;

}

@media is use for responsiveniss 

@media screen and (max-height: 450px){

  .sidenav {padding-top: 15px;}

  .sidenav a {font-size: 18px;}

}

Javscript coding

now we will create javascript code in you html file

Set the width of the side navigation to

450px and the left margin of the page content

to 450px. if you want to change the value you can change but width and margin will be same.

<script>

function openNav() {

 document.getElementById("mySidenav")

 .style.width="50px";

 document.getElementById("main")

 .style.marginLeft="450px";

 document.body.style.backgroundColor=

 "rgba(0,0,0,0.4)";

}

function closeNav() {

 document.getElementById("mySidenav")

 .style.width = "0";

 document.getElementById("main")

 .style.marginLeft= "0";

 document.body.style.backgroundColor =

 "white";

}

</script>