Skip to main content

How to Create a Modern Toggle Navigation Menu with Pure HTML & CSS

Full Project Code

Responsive Toggle Navigation Menu

Copy and paste this complete code into your project for a professional floating menu.

Click the icon to test the toggle

complete-source-code.html 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Toggle Menu - FamousCode</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif; }
    body { background: #f0f2f5; display: flex; justify-content: center; padding-top: 100px; }
    
    .navbar { position: relative; }
    .toggle-btn { 
      background: #fff; border: 1px solid #ddd; width: 50px; height: 50px; 
      border-radius: 10px; cursor: pointer; font-size: 20px; 
      transition: 0.3s; box-shadow: 0 4px 6px rgba(0,0,0,0.1); 
    }
    .toggle-btn:hover { background: #6366f1; color: #fff; border-color: #6366f1; }

    .menu { 
      position: absolute; top: 60px; left: 50%; transform: translateX(-50%) translateY(10px);
      width: 180px; background: #fff; border-radius: 12px; padding: 10px;
      list-style: none; box-shadow: 0 10px 20px rgba(0,0,0,0.1);
      opacity: 0; visibility: hidden; transition: 0.4s ease;
    }
    .menu.active { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
    .menu li { padding: 10px 15px; cursor: pointer; border-radius: 8px; font-weight: 600; color: #333; }
    .menu li:hover { background: #f0f0f0; color: #6366f1; }
  </style>
</head>
<body>

  <div class="navbar">
    <button class="toggle-btn" onclick="toggleMenu()">☰</button>
    <ul class="menu" id="navMenu">
      <li>Home</li>
      <li>About</li>
      <li>Contact</li>
    </ul>
  </div>

  <script>
    function toggleMenu() {
      const menu = document.getElementById('navMenu');
      menu.classList.toggle('active');
    }
  </script>
</body>
</html>

© 2026 FAMOUSCODE.DEV | Coding Excellence

Labels:

Popular posts from this blog

Create Password Toggle Button using HTML CSS | Show/Hide Password Input

Modern Password Show/Hide Toggle | HTML and CSS Tutorial - FAMOUSCODE.DEV Modern Password Show/Hide Toggle (HTML & CSS) Boost your login form UX with this simple yet powerful visibility toggle component. ✨ Live Preview FAMOUSCODE Show Password 💻 Full Source Code Copy the production-ready code for your next project. Copy Code Password Toggle - FamousCode FAMOUSCODE Show Password 🔍 How it Works? The logic is simple but effective. We use a JavaScript event listener to detect changes on the checkbox. When the state is checked , we dynamically change the input's type attribute from password to text . This reveals the characters to the user, ensuring they've typed the correct credentials. ...
Read more

3D Social Media Icons Hover Effect using HTML CSS

Premium 3D Social Media Icons Hover Effect | HTML And CSS - FAMOUSCODE.DEV UI/UX DESIGN 3D Social Media Icons Hover Effect Create premium 3D social icons with smooth isometric animation. 🖼️ Visual Preview 💻 Complete Source Code Copy Full Code 📖 Technical Explanation In this project, we utilize the CSS Transform property combined with perspective to create a depth effect. The 3D walls are created using ::before and ::after pseudo-elements, which are skewed to match the isometric angle of the main icon box. Want more premium UI code? Follow @famouscode.dev Article curated by Mohd Rihan
Read more

How to Add a Modern Reading Progress Bar to Blogger (HTML & CSS)

Custom Scroll Progress Box | FAMOUSCODE.DEV UI Architecture Scroll-Sync Progress Container Enhance your user interface by syncing scroll position with a sticky progress indicator. Interactive Preview Scroll down to see the magic... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. Neque porro quisquam est, qui d...
Read more

Create a Custom Right-Click Context Menu: Modern HTML & CSS Tutorial

UI Masterclass Custom Right-Click Context Menu Replace the boring browser menu with a premium, animated custom menu using simple CSS. Right-Click anywhere inside this box! ✨ Refresh Page 📂 View Source 🔒 Close Menu custom-menu.html Copy Code <!-- HTML Structure --> <div id="container" style="height: 100vh;"> <ul id="menu" style="display: none; position: absolute;"> <li>Refresh</li> <li>Copy</li> </ul> </div> <script> const menu = document.getElementById('menu'); // 1. Detect Right Click window.addEventListener('contextmenu', (e) => { e.preventDefault(); // Stop default menu menu.style.display = 'block'; menu.style.left = e.pageX + 'px'; menu.style.top = e.pageY + 'px';...
Read more

Pure CSS Form Validation using :has() Selector (2026 Guide)

Advanced Pure CSS Form Validation Revolutionize your Web UI with the power of :has() and :invalid selectors. No JavaScript required! Why Pure CSS Validation is Trending in 2026 Web performance is the number one ranking factor today. By eliminating heavy JavaScript for simple tasks like form validation, you significantly reduce the First Input Delay (FID) and improve your site's SEO score. The :has() selector is a game-changer, allowing us to style parent elements based on input states effortlessly. ⚡ Lightning Fast Instant validation feedback without waiting for scripts to load. 🔒 Secure & Reliable Built-in browser logic ensures consistent behavior across modern platforms. 📱 Mobile Optimized Perfect fo...
Read more

How to Build a Modern Glassmorphism Navbar with Spotlight Effect

Ultra-Modern Glass Navigation In this tutorial, we are using the backdrop-filter CSS property to create a professional frosted glass look. We also added a Dynamic Spotlight that follows your mouse. Home Projects Services Contact Full Source Code index.html Copy Code <!DOCTYPE html> <html> <head> <style> body { background: #000; display: flex; justify-content: center; padding-top: 100px; } .glass-nav { display: flex; gap: 15px; padding: 10px; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 100px; position: relative; } .link { color: #fff; text-decoration: none; padding: 10px 25px; font-family: sans-serif; font-size: 15px; border-radius: 50px; transition: 0.3s; } .link:hover { background: rgba(255, 255, 255, ...
Read more

How to Build a 3D Flipping Glassmorphism Credit Card with CSS

Premium 3D Glassmorphism Credit Card Create a realistic 3D Flipping Card with Glassmorphism effects. Perfect for adding a premium touch to your web projects. **** **** **** 5678 FAMOUSCODE.DEV 999 AUTHORIZED SIGNATURE REQUIRED Full Source Code index.html Copy Full Code <!DOCTYPE html> <html lang="en"> <head> <style> body { background: #0f172a; display: flex; justify-content: center; align-items: center; height: 100vh; perspective: 1000px; margin: 0; } .card { width: 300px; height: 180px; position: relative; transition: 0.8s; transform-style: preserve-3d; cursor: pointer; } .card:hover { transform: rotateY(180deg); } .side { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radiu...
Read more

10+ Modern CSS Properties Every Developer Should Know (2026 Guide)

Advanced UI Kit 11 Modern CSS Properties for Pro UI Enhance your Website's UI/UX with these hidden CSS gems by FAMOUSCODE.DEV. 01. Caret-Color Customizes the blinking text cursor color. input { caret-color: #f43f5e; } 02. Accent-Color Themes native checkboxes and radio buttons. input { accent-color: #10b981; } 03. Tap-Highlight-Color Removes the annoying blue box on mobile clicks. TAP ME ON MOBILE * { -webkit-tap-highlight-color: transparent; } 07. Scrollbar-Width & Display Allows you to hide the scrollbar while keeping the scrolling functionality active. Perfect for clean sidebars or horizontal lists. Scroll me horizontally → No visible scrollbar here! This looks much cleaner. .hide-scroll::-webkit-scrollbar { display: none; } 08. Object-Fit Fixes distorted images! object-fit: cover ensures your images fill the box per...
Read more

How to Create a Typing Animation for Input Placeholders

How to Create Dynamic Typing Placeholder in HTML/JS - FAMOUSCODE.DEV Dynamic Typing Animation Level up your forms with a smooth typing placeholder effect using pure Vanilla JavaScript . No heavy libraries, just clean code by Mohd Rihan . 🚀 Interactive Preview Experience the "Typing" feel in real-time. 💻 Get the Source Code INDEX.HTML COPY CODE <!-- FAMOUSCODE.DEV --> <input id="type-input" placeholder="|"> <script> const target = document.getElementById('type-input'); const hints = ['Enter Full Name', 'Enter @Instagram', 'Enter Email ID']; let wordIndex = 0, charIndex = 0, isWaiting = false; setInterval(() => { if (isWaiting) return; target.placeholder = hints[wordIndex].slice(0, ++charIndex) + '|'; if (charIndex > hints[wordIndex].length) { isWaiting = true; ...
Read more