in this tutorial, I will show you how we could make an awesome responsive menu using clip-path.
Clip-path is a CSS property that creates a clipping region and set what part of an élément should be shown. the element inside the region will be shown, while those outside are hidden.
we can use this property for many purposes. like the navigation menu that we will make.
now let's see the source code
HTML Code
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="main.css">
<title>Cool Responsive Menu</title>
<meta name="viewport" content="width=device-width , intial-scale=1.0">
</head>
<body>
<div class="Menu ">
<div class="nav">
<h1>Your Logo</h1>
<img onclick="ToggleMenu()" src="2beb632d9d.png">
</div>
<div class="container">
<input type="text" placeholder="Search"><button></button>
<ul>
<a href="#"><li>Home</li></a>
<a href="#"><li>About us</li></a>
<a href="#"><li>contact us</li></a>
</ul>
</div>
</div>
<script type="text/javascript" src="menu.js"></script>
</body>
</html>
CSS Code
*{
margin: 0;
padding: 0;
outline: 0;
}
.Menu{
background-color: #4486F6;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
clip-path: circle(30px at 90% 40px);
transition: clip-path .4s;
}
.full{
clip-path:circle(100%);
}
.Menu .nav{
height: 80px;
position: relative;
top: 0;
}
.Menu .nav img{
width: 60px;
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
left: 90%;
}
.Menu .nav h1{
text-transform: uppercase;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
color: #fafafa;
}
.container{
position: relative;
width: 60%;
left: 50%;
transform: translateX(-50%);
padding: 20px 0;
}
.Menu input{
width: calc(80% - 20px);
padding: 10px 20px;
background-color: transparent;
border: none;
margin-bottom: 20px;
border-bottom: 2px solid #fafafa;
font-size: 28px;
color: #fafafa;
font-weight: bold;
text-transform: uppercase;
}
.Menu button{
width: 40px;
height: 40px;
padding: 10px 0;
margin-left: 20px;
background-image: url(55369.png);
background-size: cover;
background-position: center;
background-color: transparent;
border: none;
}
.Menu input::placeholder{
color: #e2e2e2;
}
.Menu ul{
text-align: center;
font-size: 28px;
list-style: none;
}
.Menu ul a{
color: #fafafa;
text-transform: uppercase;
text-decoration: none;
}
.Menu ul a li{
padding: 20px 0;
transition: .4s;
}
.Menu ul a li:hover{
background-color: #0277bd;
}
JavaScript Code
var menu = document.querySelector('.Menu');
function ToggleMenu(){
if (menu.classList.contains('full')){
menu.classList.remove('full');
}else{
menu.classList.add('full');
}
}
if you want to download the project you can download him from this link: Download
Make a Beautiful Responsive Navigation Menu
Reviewed by Medics
on
August 02, 2019
Rating:
Reviewed by Medics
on
August 02, 2019
Rating:
No comments: