Do you want create custom menu for your website , don't worry it's very simple .you can make it by using a simple jQuery function (it is very simple in case even if you do not know jQuery)
We will use html , css and one jQuery function.
jQuery toggle function : jQuery toggle function is of two types
- jQuery SlideToggle
- jQuery FadeToggle
So lets start to make easy and beautiful menu
<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="https://cdnjs.
<style>
div{box-sizing: border-box;}
.fa-bars:active{bottom: 30px;color: yellow}
body{margin: 0}
header{height:10vh;
color: #f1f1f1;
width: 100%;
background: rgba(0,0,0,0.7)}
.left,.right,.middle{border-
width: 100%;padding: 10px;}
.right{color: #f1f1f1;float: left}
.fa-bars{margin-right: 7px;padding: 6px;}
.left{float: left;
width: 40%;
text-align: center;
}
.right{float:left;border-
width:20%;text-align: center}
.middle{float: left;text-align: center;
width:40%;}
.clear{clear: both}
#bar{padding: 10px;}
i{display:inline-block;cursor: pointer}
.menu{width:100%;display: none;height:90vh;
float: right;background: #000;}
.navv{list-style: none;
padding: 0;
margin: 0;
}
.navv li{display: block;
background: rgba(0,0,0,0.8);
color: #f1f1f1;
outline: none;
text-align: center;
border-bottom: 0.6px solid #2a2727;
padding: 10px;
}
.navv li a{
outline: none;
padding: 10px;
display: block;
text-decoration: none;
font-weight: 400;
color: #f1f1f1;
}
</style>
</head>
<body>
<header>
<div class="main-div">
<div class="left"><i class="fa fa-home"></i></div>
<div class="middle"><i class="fa fa-search"></i></div>
<div class="right"><i class="fa fa-bars"></i></div>
<div class="clear"></div>
</div>
</header>
<div class="menu">
<ul class="navv">
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Services</a></li>
<li><a href="">Contact Us</a></li>
<li><a href="">Disclaimer</a></li>
</ul>
</div>
<script src="https://ajax.googleapis.
<script>
$(".fa-bars").click(function()
$(".menu").fadeToggle("slow");
})
</script>
</body>
</html>
so lets start to make easy and beautiful menu
------------------------------
Its a sample code!
Let's start
<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="https://cdnjs.
<style>
div{box-sizing: border-box;}
.fa-bars:active{bottom: 30px;color: yellow}
body{margin: 0}
header{height:10vh;
color: #f1f1f1;
width: 100%;
background: rgba(0,0,0,0.7)}
.left,.right,.middle{border-
width: 100%;padding: 10px;}
.right{color: #f1f1f1;float: left}
.fa-bars{margin-right: 7px;padding: 6px;}
.left{float: left;
width: 40%;
text-align: center;
}
.right{float:left;border-
width:20%;text-align: center}
.middle{float: left;text-align: center;
width:40%;}
.clear{clear: both}
#bar{padding: 10px;}
i{display:inline-block;cursor: pointer}
.menu{width:100%;display: none;height:90vh;
float: right;background: #000;}
.navv{list-style: none;
padding: 0;
margin: 0;
}
.navv li{display: block;
background: rgba(0,0,0,0.8);
color: #f1f1f1;
outline: none;
text-align: center;
border-bottom: 0.6px solid #2a2727;
padding: 10px;
}
.navv li a{
outline: none;
padding: 10px;
display: block;
text-decoration: none;
font-weight: 400;
color: #f1f1f1;
}
</style>
</head>
<body>
<header>
<div class="main-div">
<div class="left"><i class="fa fa-home"></i></div>
<div class="middle"><i class="fa fa-search"></i></div>
<div class="right"><i class="fa fa-bars"></i></div>
<div class="clear"></div>
</div>
</header>
<div class="menu">
<ul class="navv">
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Services</a></li>
<li><a href="">Contact Us</a></li>
<li><a href="">Disclaimer</a></li>
</ul>
</div>
<script src="https://ajax.googleapis.
<script>
$(".fa-bars").click(function()
$(".menu").fadeToggle("slow");
})
</script>
</body>
</html>
No comments:
Post a Comment