Simpan nama, email, dan situs web saya pada peramban ini untuk komentar saya berikutnya.
Δ
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Demo Floating Button</title> <style> /* Floating Button CSS */ #floating-button { position: fixed; left: 20px; bottom: 20px; z-index: 9999; transition: transform 0.3s ease; /* Add transition for smooth effect */ } #floating-button button { background: linear-gradient(135deg, #00b4db, #0083b0); border: none; border-radius: 50%; padding: 15px; color: #fff; font-size: 20px; cursor: pointer; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; } #floating-button button:hover { transform: scale(1.1); box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); } #dropdown-menu { display: none; position: fixed; /* Change to fixed for better positioning */ left: 0; bottom: 60px; background: rgba(255, 255, 255, 0.9); /* Transparent background */ border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); overflow: hidden; transition: opacity 0.3s ease, transform 0.3s ease; z-index: 9998; } #dropdown-menu a { display: block; padding: 10px; color: #333; text-decoration: none; transition: background-color 0.3s ease; } #dropdown-menu a:hover { background-color: #f1f1f1; } /* Mobile Specific CSS */ @media (max-width: 600px) { #floating-button button { padding: 10px; font-size: 18px; } #dropdown-menu { bottom: 70px; /* Adjust position to ensure it is visible above the floating button */ } } </style> </head> <body> <!-- Floating Button HTML --> <div id="floating-button"> <button onclick="toggleDropdown()">☰</button> <div id="dropdown-menu"> <a href="https://kemenagsimeulue.online" target="_blank">Home</a> <a href="https://ptsp.kemenagsimeulue.online" target="_blank">PTSP</a> <a href="https://subbagtu.kemenagsimeulue.online" target="_blank">Subbag TU</a> <a href="https://penmad.kemenagsimeulue.online" target="_blank">Penmad</a> <a href="https://bimas.kemenagsimeulue.online" target="_blank">Bimas</a> <a href="https://zawa.kemenagsimeulue.online" target="_blank">Zawa</a> <a href="https://#" target="_blank">Madrasah</a> <a href="https://#" target="_blank">KUA</a> <a href="https://phu.kemenagsimeulue.online" target="_blank">PHU</a> <a href="https://pakis.kemenagsimeulue.online" target="_blank">Pakis</a> </div> </div> <script> var lastScrollTop = 0; var floatingButton = document.getElementById('floating-button'); function toggleDropdown() { var menu = document.getElementById('dropdown-menu'); menu.style.display = (menu.style.display === 'block' || menu.style.display === '') ? 'none' : 'block'; } // Close dropdown if clicking outside document.addEventListener('click', function(event) { var button = document.getElementById('floating-button'); var menu = document.getElementById('dropdown-menu'); if (!button.contains(event.target) && !menu.contains(event.target)) { menu.style.display = 'none'; } }); // Show/Hide floating button on scroll window.addEventListener('scroll', function() { var currentScroll = window.pageYOffset || document.documentElement.scrollTop; if (currentScroll > lastScrollTop) { // Scrolling down floatingButton.style.transform = 'translateY(100px)'; // Hide off screen } else { // Scrolling up floatingButton.style.transform = 'translateY(0)'; // Show on screen } lastScrollTop = currentScroll <= 0 ? 0 : currentScroll; // For Mobile Safari }); </script> </body> </html>
Tinggalkan komentar