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">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">
<a href="#" class="hidden-xs">Home</a>
<a href="#" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">Home</a>
</li>
<li>
<a href="#products" class="hidden-xs">Products</a>
<a href="#products" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">Products</a>
</li>
<li>
<a href="#overview" class="hidden-xs">Overview</a>
<a href="#overview" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">Overview</a>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
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;
}
nav ul {
background-color: #A4D54C;
float: right;
font-size: 20px;
line-height: 50px;
}
nav li {
display: inline;
list-style-type: none;
}
nav a {
text-decoration: none;
padding: 10px;
color: #000;
text-transform: uppercase;
}
@media only 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 {}
nav ul {
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;
}
nav li {}
nav a {
display: block;
color: #fff;
border-bottom: 1px solid #000;
margin: 0;
padding: 3px;
}
}<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
<div class="menu-logo"><img class="logo-img" src="#"></div>
<div style="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>
<span id="menu-bar"><i class="fa fa-bars" aria-hidden="true"></i></span>
<ul>
<li><a href="#">Home</a></li><!--add href="#" to see the jQuery click function is working or not -->
<li><a href="#">about</a></li>
<li><a href="#">service</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">testimonials</a></li>
<li><a href="#">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 .
@media only 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;
}
nav ul
{
background-color: #A4D54C;
float: right;
font-size: 20px;
line-height: 50px;
}
nav li{
display: inline;
list-style-type: none;
}
nav a{
text-decoration: none;
padding: 10px;
color: #000;
text-transform: uppercase;
}
@media only screen and (max-width: 768px) {
.menu-logo
{
margin-top: -50px;
}
#menu-bar {
display:block;
}
nav
{
}
nav ul{
float: none;
margin-top: 50px;
background-color: #A4D54C;
display:none;
}
nav li{
display: block;
position:relative;
border-bottom:1px solid #fff;
}
nav a{
color: #fff;
}
}
@media only screen and (max-width: 400px) {
#menu-bar
{
display: block;
}
.menu-logo
{
width: 100%;text-align: center;
}
nav
{
}
nav ul{
float: none;
margin-top: 50px;
background-color: #A4D54C;
}
nav li{
}
nav a{
display: block;
color: #fff;
border-bottom:1px solid #000;
margin: 0;
padding: 03px;
}
}<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div class="menu-logo"><img src="images/logo.png"></div>
<div style="text-align:right">
<span> info@info.com</span>
</div>
<nav>
<span id="menu-bar"><i class="fa fa-bars" aria-hidden="true"></i></span>
<ul>
<li><a href="">Home</a></li>
<li><a href="">about</a></li>
<li><a href="">service</a></li>
<li><a href="">blog</a></li>
<li><a href="">testimonials</a></li>
<li><a href="">contact us</a></li>
</ul>
</nav>
Post a Comment for "How To Create Mobile-friendly Responsive Menu?"