<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Black Themed Menu</title> <link rel=”stylesheet” href=”styles.css”> <!– Link to your CSS file –> <style> .menu-container { position: fixed; left: 0; top: 0; height: 100%; width: 250px; background-color: #111; /* Black background */ padding: 20px; box-shadow: 2px 0 5px rgba(255, 255, 255, 0.1); transition: transform 0.3s ease; } /* Menu links */ .menu-container a { display: block; padding: 15px 0; color: #fff; /* White text */ text-decoration: none; font-weight: bold; font-size: 1.2em; transition: color 0.3s ease; } /* Hover effects */ .menu-container a:hover { color: #ff6b6b; /* Accent color */ } /* Animation for hiding menu */ .menu-hidden { transform: translateX(-100%); } /* Toggle button for menu */ .menu-toggle { position: absolute; left: 250px; top: 20px; background: none; border: none; cursor: pointer; color: #fff; /* White toggle button */ } .menu-toggle:hover { opacity: 0.8; }</style> </head> <body> <!– Menu container –> <div class=”menu-container” id=”menu”> <a href=”#home”>Home</a> <a href=”#portfolio”>Portfolio</a> <a href=”#services”>Services</a> <a href=”#about”>About</a> <a href=”#contact”>Contact</a> </div> <!– Menu toggle button –> <button class=”menu-toggle” onclick=”toggleMenu()”>☰</button> <!– Main content –> <div class=”main-content”> <h1>Welcome to My Website</h1> <p>Here’s the main content of the page.</p> </div> <script> // JavaScript to toggle the menu visibility function toggleMenu() { const menu = document.getElementById(‘menu’); menu.classList.toggle(‘menu-hidden’); } </script> </body> </html>
HomePortfolioServicesAboutContact
☰