Izop Pesantren
Recent Comments
Tidak ada komentar untuk ditampilkan.
Archives
<!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>