How To Create Mobile-friendly Responsive Menu?

I am new in HTML, CSS and i am trying to make simple responsive menu.After resize the browser menu icon will display and then will click to open menu and.Please check below code.Wo

Solution 1:

Try Bootstrap framework

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <divclass="container"><divclass="navbar-header"><buttontype="button"class="navbar-toggle"data-toggle="collapse"data-target=".navbar-collapse"><spanclass="sr-only">Toggle navigation</span><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span></button><aclass="navbar-brand"href="#">Brand</a></div><divclass="collapse navbar-collapse"><ulclass="nav navbar-nav"><liclass="active"><ahref="#"class="hidden-xs">Home</a><ahref="#"class="visible-xs"data-toggle="collapse"data-target=".navbar-collapse">Home</a></li><li><ahref="#products"class="hidden-xs">Products</a><ahref="#products"class="visible-xs"data-toggle="collapse"data-target=".navbar-collapse">Products</a></li><li><ahref="#overview"class="hidden-xs">Overview</a><ahref="#overview"class="visible-xs"data-toggle="collapse"data-target=".navbar-collapse">Overview</a></li></ul></div><!--/.nav-collapse --></div>

http://jsfiddle.net/jaketaylor/84mqazgq/

Solution 2:

For responsive menu we start window screen from 768Px so I don't change any thing on your css just replace the media screen 400px with 768px and remove the media section you created for 768px. I also comment out in all 3 section HTML, CSS and jQuery where I change or add with a short description. Any Question ask me in comment. Thank you. LiveFiddle

$(document).ready(function() {
  $('#menu-bar').click(function() {

    $("nav ul").slideToggle("slow"); /* this function show/hide the menu when you click the bar icon */
  })
  $('nav ul li  a').click(function() {
    $('nav  ul ').slideToggle("slow"); /* this function hide the menu when you click on a link*/
  })

});

body {
  margin: 0;
  padding: 0;
  height: 100%;
}

#menu-bar {
  font-size: 20px;
  text-align: right;
  cursor: pointer;
  display: none;
}

.menu-logo {
  float: left;
}

nav {
  width: 100%;
  text-align: center;
}

navul {
  background-color: #A4D54C;
  float: right;
  font-size: 20px;
  line-height: 50px;
}

navli {
  display: inline;
  list-style-type: none;
}

nava {
  text-decoration: none;
  padding: 10px;
  color: #000;
  text-transform: uppercase;
}

@mediaonly screen and (max-width: 768px) {
  #menu-bar {
    display: block;
    margin-right: 10px;
    /* set this margin because its close to the window screen*/
  }
  .menu-logo {
    width: 100%;
    text-align: center;
  }
  nav {}
  navul {
    float: none;
    display: none;
    /* set display none for use the click fucntion to show the menu*/background-color: #A4D54C;
 /* Set margin and padding 0 for full width border bottom*/margin:0;
   padding: 0;  
  }
  navli {}
  nava {
    display: block;
    color: #fff;
    border-bottom: 1px solid #000;
    margin: 0;
    padding: 3px;
  }
}

<scriptsrc="https://code.jquery.com/jquery-3.1.0.min.js"></script><linkhref="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" /><divclass="menu-logo"><imgclass="logo-img"src="#"></div><divstyle="text-align:right;margin-right:10px;"><!-- set this margin-right 10px because its close to the window screen --><span> info@info.com</span></div><nav><spanid="menu-bar"><iclass="fa fa-bars"aria-hidden="true"></i></span><ul><li><ahref="#">Home</a></li><!--add href="#" to see the jQuery click function is working or not --><li><ahref="#">about</a></li><li><ahref="#">service</a></li><li><ahref="#">blog</a></li><li><ahref="#">testimonials</a></li><li><ahref="#">contact us</a></li></ul></nav>

Solution 3:

You can write Media Query for it. if you don't want to use bootstrap.

eg.

you want to make a webpage to be responsive for 768px, then you can write .

@mediaonly screen and (min-width: 768px) {
    body {
        // Your CSS Code Here
    }
}

For reference You can see Here

Solution 4:

Try this out :) This work for me. and without bootstrap

$('#menu-bar').click(function(){
$('nav ul').toggle('blind');
})

body{
  margin: 0;
  padding: 0;
  height: 100%;
}

#menu-bar
{
 
  font-size: 20px;
  text-align: right;
  background-color: #A4D54C;
  padding:10px;
  margin-bottom:-50px;
  color:#fff;
  cursor: pointer;
  display: none;
}
.menu-logo
{
  float: left;
  
}

nav{
  width: 100%;text-align: center;

}
navul
{
background-color: #A4D54C;
float: right;
font-size: 20px;
line-height: 50px;

}
navli{


display: inline;
list-style-type: none;

}

nava{
  text-decoration: none;
  padding: 10px;
  color: #000;
  text-transform: uppercase;
}


@mediaonly screen and (max-width: 768px) {
.menu-logo
{
  margin-top: -50px;
}
#menu-bar {
  display:block;
}
 nav 
  {
   
  }
navul{
  float: none;
margin-top: 50px;
background-color: #A4D54C;
display:none;

}

navli{
  display: block;
  position:relative;
  border-bottom:1px solid #fff;
}
nava{
  color: #fff;
}
  
  
}


@mediaonly screen and (max-width: 400px) {
  #menu-bar
  {
    display: block;
  }
  .menu-logo
{
  width: 100%;text-align: center;
}


 nav 
  {
   
  }

navul{
  float: none;
margin-top: 50px;
 background-color: #A4D54C;
}

navli{
  
}

nava{
  display: block;
  color: #fff;
  border-bottom:1px solid #000;
 margin: 0;
 padding: 03px;
}
}

<scriptsrc="https://code.jquery.com/jquery-2.2.4.min.js"></script><scriptsrc="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script><linkhref="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"rel="stylesheet"/><divclass="menu-logo"><imgsrc="images/logo.png"></div><divstyle="text-align:right"><span> info@info.com</span></div><nav><spanid="menu-bar"><iclass="fa fa-bars"aria-hidden="true"></i></span><ul><li><ahref="">Home</a></li><li><ahref="">about</a></li><li><ahref="">service</a></li><li><ahref="">blog</a></li><li><ahref="">testimonials</a></li><li><ahref="">contact us</a></li></ul></nav>