Sat Jul 13 2024
Attractive Mobile Responsive Navigation
CSS55 views
File Name: animated-mobile-navigation.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dropdown Menu</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=Catamaran:wght@100..900&family=Dancing+Script:wght@400..700&display=swap"
rel="stylesheet"
/>
<style>
* {
margin: 0;
padding: 0;
font-family: "Catamaran", sans-serif;
}
:root {
--white: #fff;
--bg: #f2f2f2;
--gray: #2d2d2d;
--black: #212121;
--orange: #f35f2a;
}
html {
scroll-behavior: smooth;
}
body {
width: 100%;
height: auto;
overflow-x: hidden;
background-color: var(--bg);
}
.container {
max-width: 1100px;
width: calc(100% - 40px);
padding: 0 20px;
margin: 0 auto;
}
header {
width: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
padding: 15px 0;
z-index: 99;
background-color: var(--gray);
}
header .container {
display: flex;
justify-content: space-between;
align-items: center;
}
header a#logo {
float: left;
font-family: "Dancing Script", cursive;
font-size: 35px;
color: var(--white);
text-decoration: none;
}
header a#logo svg {
display: inline-block;
vertical-align: bottom;
width: 50px;
height: 50px;
margin-right: 8px;
}
header a#menu {
cursor: pointer;
width: 30px;
height: 30px;
position: relative;
z-index: 50;
}
header a#menu svg {
width: 30px;
height: 30px;
}
header nav {
position: absolute;
z-index: 40;
right: -50px;
top: -50px;
padding: 0;
background-color: var(--orange);
width: 0;
height: 0;
overflow: hidden;
border-radius: 100%;
transition: 0.3s all ease-out;
transition-delay: 0.8s;
}
header nav::before {
position: absolute;
content: "";
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
border-radius: 100%;
background-color: var(--gray);
transition: 0.2s all cubic-bezier(0.175, 0.885, 0.32, 1.275);
transform: translate(0%, 0%) rotate(0deg);
transition-delay: 0.5s;
}
header nav ul {
display: flex;
flex-direction: column;
gap: 20px;
list-style: none;
}
header nav ul li {
opacity: 0;
transform: translateX(100%);
transition: 0.2s all ease-in-out;
}
header nav ul li:nth-child(1) {
transition-delay: 0.2s;
}
header nav ul li:nth-child(2) {
transition-delay: 0.3s;
}
header nav ul li:nth-child(3) {
transition-delay: 0.4s;
}
header nav ul li:nth-child(4) {
transition-delay: 0.5s;
}
header nav.active {
width: 100px;
height: 150px;
overflow: visible;
padding: 90px 120px;
transition: 0.3s all cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition-delay: 0s;
}
header nav.active::before {
transform: translate(5%, -3%) rotate(10deg);
transition-delay: 0.2s;
}
header nav.active ul li {
opacity: 1;
transform: translateX(0%);
}
header nav a {
font-weight: bold;
text-decoration: none;
color: var(--white);
font-size: 15px;
transition: 0.3s linear all;
}
header nav a:hover,
header nav a.active {
color: var(--orange);
}
</style>
</head>
<body>
<header>
<div class="container">
<a href="#" id="logo"
><svg
width="512"
height="406"
viewBox="0 0 512 406"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M503.706 353.946H390.848C426.037 336.184 455.099 310.255 475.527 278.234C477.264 275.514 477.264 272.034 475.527 269.313C456.23 239.063 428.529 213.71 395.421 195.996C361.396 177.79 322.436 168.167 282.757 168.167C226.674 168.167 173.564 187.045 132.357 221.475C110.285 203.116 83.7391 188.71 55.1445 179.624C52.705 178.85 50.0433 179.243 47.9345 180.693C45.8246 182.144 44.5031 184.487 44.3527 187.042C43.7191 197.856 44.377 234.911 77.0831 273.774C49.2803 306.812 44.6402 338.533 44.262 353.947H8.29374C3.71338 353.947 0 357.661 0 362.241C0 366.821 3.71338 370.535 8.29374 370.535H74.9201L91.0099 391.988C97.5531 400.713 107.971 405.921 118.877 405.921H393.123C404.029 405.921 414.447 400.713 420.99 391.988L437.08 370.535H503.706C508.287 370.535 512 366.821 512 362.241C512 357.659 508.287 353.946 503.706 353.946ZM458.604 273.77C441.1 299.486 416.54 321.27 387.896 336.717C371.083 319.903 361.823 297.549 361.823 273.771C361.823 250.198 371.318 227.443 387.947 210.813C416.749 226.297 441.074 247.982 458.604 273.77ZM362.713 344.546C362.713 347.878 361.789 351.12 360.074 353.946H328.859C327.144 351.12 326.22 347.878 326.22 344.546C326.22 334.486 334.406 326.3 344.467 326.3C354.527 326.3 362.713 334.485 362.713 344.546ZM372.272 203.228C354.995 222.507 345.235 247.724 345.235 273.772C345.235 286.506 347.481 298.892 351.772 310.489C349.415 309.984 346.972 309.712 344.467 309.712C340.316 309.712 336.335 310.444 332.641 311.782C328.522 299.697 326.436 287.053 326.436 274.119C326.436 245.422 336.8 218.158 355.713 196.793C361.332 198.712 366.853 200.866 372.272 203.228ZM61.2664 348.244C62.8068 333.182 69.3157 306.474 94.2334 279.386C97.1539 276.213 97.1539 271.33 94.2334 268.157C69.3135 241.068 62.8057 214.361 61.2653 199.301C85.7617 208.55 108.249 222.007 126.838 238.611C129.985 241.422 134.74 241.422 137.887 238.611C176.77 203.881 228.218 184.754 282.756 184.754C301.662 184.754 320.377 187.109 338.389 191.661C321.673 212.85 311.86 238.441 310.133 265.48H256C255.942 265.48 255.886 265.487 255.829 265.488C253.457 256.402 248.487 247.602 241.187 240.302C225.876 224.992 203.964 219.899 186.657 227.631C184.792 228.464 183.3 229.956 182.467 231.821C177.834 242.191 177.81 254.214 181.825 265.481H123.515C118.934 265.481 115.221 269.194 115.221 273.774C115.221 278.355 118.934 282.068 123.515 282.068H191.261C192.471 283.543 193.762 284.975 195.138 286.352C205.682 296.897 219.358 302.595 232.505 302.595C236.689 302.595 240.815 302.004 244.774 300.823L259.106 315.152C258.023 316.341 257.01 317.596 256.061 318.899C248.492 312.996 239.161 309.713 229.46 309.713C215.665 309.713 202.731 316.377 194.541 327.409C194.384 327.406 194.228 327.406 194.073 327.406C186.289 327.406 179.095 329.973 173.289 334.304C160.536 327.052 148.641 318.541 137.887 308.935C134.741 306.124 129.984 306.124 126.838 308.935C108.249 325.539 85.7628 338.995 61.2664 348.244ZM310.931 353.946H266.007C264.888 350.948 264.294 347.766 264.294 344.546C264.294 329.608 276.448 317.454 291.387 317.454C300.107 317.454 308.314 321.761 313.395 328.832C310.995 333.557 309.633 338.893 309.633 344.546C309.633 347.751 310.076 350.911 310.931 353.946ZM291.387 300.866C284.647 300.866 278.26 302.402 272.554 305.14L256.033 288.622C256.596 286.476 256.984 284.285 257.204 282.067H310.09C310.59 290.615 311.898 299.034 314.004 307.261C307.271 303.164 299.47 300.866 291.387 300.866ZM220.6 276.651L229.785 285.833C221.768 285.082 213.413 281.166 206.869 274.62C197.492 265.243 193.493 252.148 196.496 241.658C206.988 238.655 220.083 242.653 229.46 252.029C235.48 258.051 239.269 265.602 240.425 273.015L232.327 264.921C229.088 261.682 223.837 261.682 220.599 264.922C217.36 268.16 217.361 273.413 220.6 276.651ZM248.757 353.946H177.842C180.868 348.048 187.001 343.994 194.073 343.994C194.959 343.994 195.947 344.099 197.276 344.335C200.747 344.952 204.229 343.306 205.958 340.233C210.786 331.637 219.792 326.3 229.46 326.3C236.774 326.3 243.765 329.336 248.846 334.667C248.109 337.844 247.706 341.148 247.706 344.546C247.706 347.718 248.074 350.867 248.757 353.946ZM89.5071 353.944C104.995 346.184 119.445 336.81 132.358 326.07C141.766 333.923 151.906 341.019 162.617 347.289C161.611 349.399 160.814 351.627 160.246 353.944H89.5071ZM407.72 382.033C404.292 386.603 398.836 389.332 393.123 389.332H118.877C113.164 389.332 107.707 386.603 104.28 382.033L95.6544 370.534H416.346L407.72 382.033Z"
fill="white"
/>
<path
d="M402.185 273.22C409.198 273.22 414.903 267.515 414.903 260.503C414.903 253.491 409.198 247.786 402.185 247.786C395.173 247.786 389.468 253.491 389.468 260.503C389.468 267.515 395.173 273.22 402.185 273.22Z"
fill="white"
/>
<path
d="M230.013 96.8778C230.013 110.839 235.927 118.226 240.68 124.161C244.759 129.257 247.706 132.938 247.706 141.077C247.706 145.657 251.42 149.371 256 149.371C260.58 149.371 264.294 145.657 264.294 141.077C264.294 127.116 258.38 119.73 253.628 113.794C249.549 108.698 246.6 105.016 246.6 96.8778C246.6 88.7278 249.55 85.041 253.63 79.9398C258.381 74.0004 264.294 66.609 264.294 52.6401C264.294 38.6657 258.382 31.2699 253.631 25.3272C249.55 20.2216 246.6 16.5336 246.6 8.37369C246.6 3.79334 242.887 0.0799561 238.307 0.0799561C233.726 0.0799561 230.013 3.79334 230.013 8.37369C230.013 22.3481 235.925 29.7439 240.675 35.6866C244.757 40.7934 247.706 44.4824 247.706 52.6423C247.706 60.7923 244.757 64.4792 240.676 69.5804C235.926 75.5187 230.013 82.9112 230.013 96.8778Z"
fill="white"
/>
<path
d="M274.782 105.163C277.415 105.163 279.762 103.934 281.283 102.02C287.269 94.539 299.68 78.9943 299.68 52.6413C299.68 41.9368 297.622 31.8461 293.563 22.6478C291.714 18.4567 286.817 16.5591 282.626 18.4091C278.435 20.2581 276.539 25.1547 278.388 29.3458C281.509 36.4198 283.093 44.2579 283.093 52.6413C283.093 73.1146 273.92 84.6706 268.382 91.5953C267.199 93.0284 266.488 94.8663 266.488 96.8712C266.488 101.45 270.201 105.163 274.782 105.163Z"
fill="white"
/>
<path
d="M208.256 131.62C209.366 131.62 210.495 131.395 211.578 130.921C215.773 129.084 217.685 124.193 215.848 119.997C212.773 112.973 211.214 105.195 211.214 96.8778C211.214 76.3204 220.468 64.7523 225.998 57.8376C226.147 57.6507 226.289 57.4572 226.421 57.2581C228.279 54.4725 228.27 50.7868 226.412 48.0012C223.872 44.1894 218.723 43.161 214.912 45.7011C213.93 46.3557 213.134 47.1829 212.534 48.1162C206.388 55.8183 194.626 71.2303 194.626 96.8778C194.626 107.498 196.655 117.516 200.654 126.651C202.018 129.764 205.062 131.62 208.256 131.62Z"
fill="white"
/>
</svg>
</a>
<a id="menu">
<svg
width="512"
height="512"
viewBox="0 0 512 512"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M486.4 230.399H25.5996C11.4683 230.399 0 241.868 0 255.999C0 270.13 11.4683 281.599 25.5996 281.599H486.399C500.479 281.599 511.998 270.13 511.998 255.999C512 241.868 500.48 230.399 486.4 230.399Z"
fill="white"
/>
<path
d="M25.5996 127.999H486.399C500.479 127.999 511.998 116.531 511.998 102.4C511.998 88.2686 500.479 76.8003 486.399 76.8003H25.5996C11.4683 76.8003 0 88.2686 0 102.4C0 116.531 11.4683 127.999 25.5996 127.999Z"
fill="white"
/>
<path
d="M486.4 384H25.5996C11.4683 384 0 395.52 0 409.6C0 423.68 11.4683 435.2 25.5996 435.2H486.399C500.479 435.2 511.998 423.68 511.998 409.6C512 395.52 500.48 384 486.4 384Z"
fill="white"
/>
</svg>
</a>
<nav id="menuBar">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#popular-dishes">Popular Dishes</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#contact-us">Contact Us</a></li>
</ul>
</nav>
</div>
</header>
<script type="text/javascript">
const menuBtn = document.getElementById("menu");
const menuBar = document.getElementById("menuBar");
menuBtn.addEventListener("click", () => {
menuBar.classList.toggle("active");
});
</script>
</body>
</html>
Author:Geekboots