Thu Aug 25 2022
Responsive Navbar
CSS1276 views
File Name: index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Hamburger Navbar</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rubik&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
font-family: 'Rubik', sans-serif;
}
body {
background: linear-gradient(-35deg, #EAA505, #F15E64);
}
#menu {
position: fixed;
z-index: 100;
width: 30px;
height: 30px;
top: 20px;
left: 20px;
border: none;
background-color: transparent;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
#menu span {
position: absolute;
width: 100%;
height: 3px;
background-color: #fff;
border-radius: 30px;
transition: 0.2s all ease;
}
#menu span:nth-child(1) {
transform: translateY(-10px);
}
#menu span:nth-child(2) {
transform: translateY(10px);
}
#menu:hover span:nth-child(1) {
transform: translateY(-12px);
}
#menu:hover span:nth-child(2) {
transform: translateY(12px);
}
#menu.active span:nth-child(1) {
transform: translateY(-50px);
opacity: 0;
}
#menu.active span:nth-child(2) {
transform: translateY(50px);
opacity: 0;
}
#menu span:nth-child(3),
#menu span:nth-child(4) {
transform: rotate(0deg);
}
#menu.active span:nth-child(3) {
transform: rotate(-45deg);
}
#menu.active span:nth-child(4) {
transform: rotate(45deg);
}
#menuItem {
display: flex;
justify-content: center;
align-items: center;
flex-flow: column;
width: 100%;
height: 100vh;
background-color: #da565b;
gap: 5px;
clip-path: circle(30px at 35px 35px);
position: fixed;
z-index: 5;
transition: 0.5s all linear;
}
#menuItem.active {
clip-path: circle(75%);
}
#menuItem a {
width: 180px;
font-size: 20px;
text-decoration: none;
color: #fff;
position: relative;
display: flex;
align-items: center;
padding: 10px 0;
}
#menuItem a svg {
width: 22px;
height: 22px;
margin-right: 8px;
}
#menuItem a::after {
position: absolute;
content: '';
bottom: 0;
left: 0;
height: 2px;
width: 0;
background-color: #fff;
border-radius: 30px;
transition: 0.5s all cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#menuItem a:hover::after {
width: 100%;
}
section {
width: 100%;
height: 100vh;
}
</style>
<script>
function toggleMenu() {
let menuBtn = document.getElementById('menu');
let menuItem = document.getElementById('menuItem');
menuBtn.classList.toggle('active')
menuItem.classList.toggle('active')
}
</script>
</head>
<body>
<button type="button" id="menu" onclick="toggleMenu()">
<span></span><span></span><span></span><span></span>
</button>
<nav id="menuItem">
<a href="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
<path d="M11.47 3.84a.75.75 0 011.06 0l8.69 8.69a.75.75 0 101.06-1.06l-8.689-8.69a2.25 2.25 0 00-3.182 0l-8.69 8.69a.75.75 0 001.061 1.06l8.69-8.69z" />
<path d="M12 5.432l8.159 8.159c.03.03.06.058.091.086v6.198c0 1.035-.84 1.875-1.875 1.875H15a.75.75 0 01-.75-.75v-4.5a.75.75 0 00-.75-.75h-3a.75.75 0 00-.75.75V21a.75.75 0 01-.75.75H5.625a1.875 1.875 0 01-1.875-1.875v-6.198a2.29 2.29 0 00.091-.086L12 5.43z" />
</svg>
Home
</a>
<a href="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
<path d="M4.5 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM14.25 8.625a3.375 3.375 0 116.75 0 3.375 3.375 0 01-6.75 0zM1.5 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM17.25 19.128l-.001.144a2.25 2.25 0 01-.233.96 10.088 10.088 0 005.06-1.01.75.75 0 00.42-.643 4.875 4.875 0 00-6.957-4.611 8.586 8.586 0 011.71 5.157v.003z" />
</svg>
About Us
</a>
<a href="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
<path fill-rule="evenodd" d="M12 6.75a5.25 5.25 0 016.775-5.025.75.75 0 01.313 1.248l-3.32 3.319c.063.475.276.934.641 1.299.365.365.824.578 1.3.64l3.318-3.319a.75.75 0 011.248.313 5.25 5.25 0 01-5.472 6.756c-1.018-.086-1.87.1-2.309.634L7.344 21.3A3.298 3.298 0 112.7 16.657l8.684-7.151c.533-.44.72-1.291.634-2.309A5.342 5.342 0 0112 6.75zM4.117 19.125a.75.75 0 01.75-.75h.008a.75.75 0 01.75.75v.008a.75.75 0 01-.75.75h-.008a.75.75 0 01-.75-.75v-.008z" clip-rule="evenodd" />
<path d="M10.076 8.64l-2.201-2.2V4.874a.75.75 0 00-.364-.643l-3.75-2.25a.75.75 0 00-.916.113l-.75.75a.75.75 0 00-.113.916l2.25 3.75a.75.75 0 00.643.364h1.564l2.062 2.062 1.575-1.297z" />
<path fill-rule="evenodd" d="M12.556 17.329l4.183 4.182a3.375 3.375 0 004.773-4.773l-3.306-3.305a6.803 6.803 0 01-1.53.043c-.394-.034-.682-.006-.867.042a.589.589 0 00-.167.063l-3.086 3.748zm3.414-1.36a.75.75 0 011.06 0l1.875 1.876a.75.75 0 11-1.06 1.06L15.97 17.03a.75.75 0 010-1.06z" clip-rule="evenodd" />
</svg>
Services
</a>
<a href="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
<path fill-rule="evenodd" d="M2.25 13.5a8.25 8.25 0 018.25-8.25.75.75 0 01.75.75v6.75H18a.75.75 0 01.75.75 8.25 8.25 0 01-16.5 0z" clip-rule="evenodd" />
<path fill-rule="evenodd" d="M12.75 3a.75.75 0 01.75-.75 8.25 8.25 0 018.25 8.25.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75V3z" clip-rule="evenodd" />
</svg>
Case Studies
</a>
<a href="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
<path fill-rule="evenodd" d="M4.125 3C3.089 3 2.25 3.84 2.25 4.875V18a3 3 0 003 3h15a3 3 0 01-3-3V4.875C17.25 3.839 16.41 3 15.375 3H4.125zM12 9.75a.75.75 0 000 1.5h1.5a.75.75 0 000-1.5H12zm-.75-2.25a.75.75 0 01.75-.75h1.5a.75.75 0 010 1.5H12a.75.75 0 01-.75-.75zM6 12.75a.75.75 0 000 1.5h7.5a.75.75 0 000-1.5H6zm-.75 3.75a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5H6a.75.75 0 01-.75-.75zM6 6.75a.75.75 0 00-.75.75v3c0 .414.336.75.75.75h3a.75.75 0 00.75-.75v-3A.75.75 0 009 6.75H6z" clip-rule="evenodd" />
<path d="M18.75 6.75h1.875c.621 0 1.125.504 1.125 1.125V18a1.5 1.5 0 01-3 0V6.75z" />
</svg>
News
</a>
<a href="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
<path fill-rule="evenodd" d="M15 3.75a.75.75 0 01.75-.75h4.5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0V5.56l-4.72 4.72a.75.75 0 11-1.06-1.06l4.72-4.72h-2.69a.75.75 0 01-.75-.75z" clip-rule="evenodd" />
<path fill-rule="evenodd" d="M1.5 4.5a3 3 0 013-3h1.372c.86 0 1.61.586 1.819 1.42l1.105 4.423a1.875 1.875 0 01-.694 1.955l-1.293.97c-.135.101-.164.249-.126.352a11.285 11.285 0 006.697 6.697c.103.038.25.009.352-.126l.97-1.293a1.875 1.875 0 011.955-.694l4.423 1.105c.834.209 1.42.959 1.42 1.82V19.5a3 3 0 01-3 3h-2.25C8.552 22.5 1.5 15.448 1.5 6.75V4.5z" clip-rule="evenodd" />
</svg>
Contact Us
</a>
</nav>
<section></section>
</body>
</html>Result Screenshot(s)
Reference:
Author:Geekboots