nowadays users can use any device to go to the internet, the problem is that every device has its own screen size and this can pose a problem for web designers, that's why it's important to make your web site responsive and adaptable to any device.
this is one of the works that I made, you will find in this article the source code of this amazing responsive menu.
I-HTML part
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MAKE YOUR RESPONCIVE MENU</title>
<link rel="stylesheet" href="style/main.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="header">
<div class="nav">
<div class="container">
<h6 class="logo">MyWebsite</h6>
<ul class="menu">
<li><a href="#">Accueil</a></li>
<li><a href="#">gallery</a></li>
<li><a href="#">a propos</a></li>
<li><a href="#">contact us</a></li>
</ul>
<span id="btn"><i id="open_btn" class="fas fa-bars"></i></span>
</div>
<div class="responcive">
<div class="container">
<div class="men_head">
<h6 class="logo">MyWebsite</h6>
<span id="btn"><i id="cls_btn" class="fas fa-times"></i></span>
</div>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">gallery</a></li>
<li><a href="#">a propos</a></li>
<li><a href="#">contact us</a></li>
</ul>
</div>
</div>
</div>
<div class="center">
<h1>Make your responcive menu</h1>
<h2>Subscribe to the channel , Thank you </h2>
</div>
<div class="filter"></div>
</div>
<script type="text/javascript" src="script/menu.js"></script>
</body>
</html>
II-CSS PART
@import url('https://fonts.googleapis.com/css?family=Montserrat|Open+Sans|Roboto');
*{
margin: 0;
padding: 0;
outline: 0;
}
.container{
position: relative;
width: 80%;
left: 50%;
transform: translateX(-50%);
}
.filter{
position: absolute;
z-index: 1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgb(253,45,154);
background: -moz-linear-gradient(0deg, rgba(253,45,154,1) 0%, rgba(34,193,195,1) 100%);
background: -webkit-linear-gradient(0deg, rgba(253,45,154,1) 0%, rgba(34,193,195,1) 100%);
background: linear-gradient(0deg, rgba(253,45,154,1) 0%, rgba(34,193,195,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fd2d9a",endColorstr="#22c1c3",GradientType=1);
opacity: .7;
}
#btn{
float: right;
font-size: 2.5em;
text-decoration: none;
text-transform: uppercase;
font-family: 'Open Sans',sans-serif;
color: #fafafa;
display: none;
}
.nav{
position: relative;
z-index: 10;
width: 100%;
padding: 5px 0;
height: 64px;
background: transparent;
}
.nav .logo{
margin-top: 18px;
float: left;
font-size: 1.5em;
text-decoration: none;
text-transform: uppercase;
font-family: 'Open Sans',sans-serif;
letter-spacing: 1.03rem;
color: #fafafa;
}
.nav .menu{
float: right;
margin-top: 20px;
}
.nav .menu li{
display: inline-block;
margin-left: 15px;
}
.nav .menu li a{
font-size: 1.3em;
text-decoration: none;
text-transform: uppercase;
font-family: 'Open Sans',sans-serif;
color: #fafafa;
transition: all .4s ease-in-out;
}
.nav ul li a:hover{
color: #fd2d9a;
}
.responcive{
display: none;
position: absolute;
width: 100%;
top: 0;
}
.header{
position: relative;
width: 100%;
height: 100vh;
background-image: url(../img/jeff-sheldon-3228-unsplash.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.header .center{
position: absolute;
width: 80%;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
z-index: 3;
color: #fafafa;
}
.header .center h1{
font-size: 3rem;
text-align: center;
text-transform: uppercase;
letter-spacing: 1.03rem;
font-family: 'Montserrat',sans-serif;
margin-bottom: 16px;
}
.header .center h2{
text-align: center;
font-size: 1.75rem;
text-transform: uppercase;
letter-spacing: 1.03rem;
font-family: 'Montserrat',sans-serif;
}
@media screen and ( max-width:930px){
.nav .logo{
text-align: center;
float: left;
letter-spacing: .5rem;
}
.nav .menu{
display: none;
}
#btn{
display: block;
text-align: right;
margin-top: 8px;
}
.responcive{
display: none;
background-color: rgba(32,32,32,.99);
}
.responcive .logo{
float: left;
}
.responcive ul{
clear: both;
padding-top: 20px;
}
.responcive ul li{
text-align: center;
list-style: none;
margin: 30px 0;
}
.responcive .men_head{
padding: 5px 0;
}
.responcive ul li a{
font-size: 1.3em;
text-decoration: none;
text-transform: uppercase;
font-family: 'Open Sans',sans-serif;
color: #fafafa;
transition: all .4s ease-in-out;
}
.header .center h1{
font-size: 2rem;
text-align: center;
text-transform: uppercase;
letter-spacing: .5rem;
font-family: 'Montserrat',sans-serif;
margin-bottom: 16px;
}
.header .center h2{
text-align: center;
font-size: .75rem;
text-transform: uppercase;
letter-spacing: .5rem;
font-family: 'Montserrat',sans-serif;
}
}
III-Jquery part
$(document).ready(function() {
$("#cls_btn").on( "click" ,function (){
$(".responcive").slideUp();
});
$("#open_btn").on( "click" ,function (){
$(".responcive").slideDown();
});
});
I hope you liked this project and wait for us for more projects.
Make A Responsive Menu In HTML CSS and JAVASCRIPT
Reviewed by Medics
on
March 18, 2019
Rating:
Reviewed by Medics
on
March 18, 2019
Rating:
No comments: