Untitled
unknown
plain_text
5 months ago
1.8 kB
3
Indexable
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Menu Section</title> <link rel="stylesheet" href="styles.css"> </head> <body> <!-- Navigasi --> <div class="menu-switcher"> <a href="#minuman" class="menu-btn">Minuman</a> <a href="#makanan" class="menu-btn">Makanan</a> </div> <!-- Section Minuman --> <section id="minuman" class="menu-section"> <h2>Minuman</h2> <ul> <li>Es Teh Manis</li> <li>Jus Jeruk</li> <li>Kopi Hitam</li> </ul> </section> <!-- Section Makanan --> <section id="makanan" class="menu-section"> <h2>Makanan</h2> <ul> <li>Nasi Goreng</li> <li>Ayam Goreng</li> <li>Mie Goreng</li> </ul> </section> </body> </html> body { font-family: Arial, sans-serif; margin: 0; padding: 0; scroll-behavior: smooth; /* Efek smooth scrolling */ } .menu-switcher { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background-color: #fff; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); display: flex; z-index: 1000; } .menu-btn { padding: 10px 20px; text-decoration: none; font-weight: bold; color: #333; border-right: 1px solid #ddd; transition: background-color 0.3s, color 0.3s; } .menu-btn:last-child { border-right: none; } .menu-btn:hover { background-color: #007bff; color: #fff; } .menu-section { padding: 100px 20px; min-height: 100vh; border-bottom: 1px solid #eee; } #minuman { background-color: #f9f9f9; } #makanan { background-color: #fefefe; }
Editor is loading...
Leave a Comment