Skip to content

Instantly share code, notes, and snippets.

@thiagozs

thiagozs/hamburger.html

Last active March 8, 2024 20:59
Show Gist options
  • Save thiagozs/43ad65dcde64fd2e75baee6d08a1a33c to your computer and use it in GitHub Desktop.
Save thiagozs/43ad65dcde64fd2e75baee6d08a1a33c to your computer and use it in GitHub Desktop.
Download ZIP
HTML hamburger menu tailwindcss javascript
Raw
hamburger.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<!-- FONTS -->
<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=Poppins:wght@100;200;300;400;500;600;700&display=swap"
rel="stylesheet">
<script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>
</head>
<body class="font-[Poppins] bg-gradient-to-t from-[#fbc2eb] to-[#a6c1ee] h-screen">
<header class="bg-white">
<nav class="flex justify-between items-center w-[92%] mx-auto">
<div>
<img class="w-16 cursor-pointer" src="https://cdn-icons-png.flaticon.com/512/5968/5968204.png" alt="...">
</div>
<div
class="nav-links duration-500 md:static absolute bg-white md:min-h-fit min-h-[60vh] left-0 top-[-100%] md:w-auto w-full flex items-center px-5">
<ul class="flex md:flex-row flex-col md:items-center md:gap-[4vw] gap-8">
<li>
<a class="hover:text-gray-500" href="#">Products</a>
</li>
<li>
<a class="hover:text-gray-500" href="#">Solution</a>
</li>
<li>
<a class="hover:text-gray-500" href="#">Resource</a>
</li>
<li>
<a class="hover:text-gray-500" href="#">Developers</a>
</li>
<li>
<a class="hover:text-gray-500" href="#">Pricing</a>
</li>
</ul>
</div>
<div class="flex items-center gap-6">
<button class="bg-[#a6c1ee] text-white px-5 py-2 rounded-full hover:bg-[#87acec]">Sign in</button>
<ion-icon onclick="onToggleMenu(this)" name="menu" class="text-3xl cursor-pointer md:hidden"></ion-icon>
</div>
</header>
<script>
const navLinks = document.querySelector('.nav-links')
function onToggleMenu(e){
e.name = e.name === 'menu' ? 'close' : 'menu'
navLinks.classList.toggle('top-[9%]')
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment