← Back to list
Mobil Menü Örneği
Suat.
· 2025-09-27 18:41
· 0 claps
· 4.6 min read
Mobil Menü Örneği
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fuar Mobil Menü</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: #F9FAF8;
min-height: 100vh;
padding: 0;
}
/* Header */
.header {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
padding: 15px 20px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #e0e0e0;
}
.logo {
font-size: 1.5rem;
font-weight: bold;
color: #212529;
}
/* Hamburger Icon */
.hamburger {
width: 30px;
height: 25px;
position: relative;
cursor: pointer;
z-index: 1001;
}
.hamburger .line {
position: absolute;
height: 3px;
width: 100%;
background: #212529;
border-radius: 2px;
transition: all 0.3s ease;
}
.hamburger .line:nth-child(1) {
top: 0;
}
.hamburger .line:nth-child(2) {
top: 50%;
transform: translateY(-50%);
}
.hamburger .line:nth-child(3) {
bottom: 0;
}
/* Hamburger Animation - Active State */
.hamburger.active .line:nth-child(1) {
transform: translateY(11px) rotate(45deg);
background: #212529;
}
.hamburger.active .line:nth-child(2) {
opacity: 0;
transform: translateX(20px);
}
.hamburger.active .line:nth-child(3) {
transform: translateY(-11px) rotate(-45deg);
background: #212529;
}
/* Mobile Menu Overlay */
.mobile-menu-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.mobile-menu-overlay.active {
opacity: 1;
visibility: visible;
}
/* Mobile Menu */
.mobile-menu {
position: fixed;
top: 0;
right: -100%;
width: 320px;
max-width: 85vw;
height: 100vh;
background: #ffffff;
z-index: 1000;
transition: right 0.4s ease;
overflow-y: auto;
box-shadow: -5px 0 25px rgba(0,0,0,0.15);
}
.mobile-menu.active {
right: 0;
}
/* Menu Header */
.menu-header {
padding: 80px 25px 20px;
background: #212529;
color: white;
}
.menu-header h2 {
color: white;
font-size: 1.6rem;
font-weight: 600;
text-align: center;
}
/* Menu List */
.menu-list {
padding: 0;
list-style: none;
}
.menu-item {
border-bottom: 1px solid #e9ecef;
}
.menu-link {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 25px;
color: #212529;
text-decoration: none;
font-size: 1rem;
font-weight: 500;
transition: all 0.3s ease;
background: white;
}
.menu-link:hover {
background: #f8f9fa;
color: #212529;
}
/* Dropdown Arrow */
.dropdown-arrow {
font-size: 0.8rem;
transition: transform 0.3s ease;
margin-left: 10px;
color: #6c757d;
}
.menu-item.active .dropdown-arrow {
transform: rotate(180deg);
}
/* Submenu */
.submenu {
max-height: 0;
overflow: hidden;
background: #f8f9fa;
transition: max-height 0.4s ease;
}
.menu-item.active .submenu {
max-height: 400px;
}
.submenu-item {
border-bottom: 1px solid #e9ecef;
}
.submenu-item:last-child {
border-bottom: none;
}
.submenu-link {
display: block;
padding: 15px 25px 15px 45px;
color: #495057;
text-decoration: none;
font-size: 0.95rem;
font-weight: 400;
transition: all 0.3s ease;
background: #f8f9fa;
}
.submenu-link:hover {
background: #e9ecef;
color: #212529;
padding-left: 50px;
}
/* Single Menu Items */
.single-menu-link {
display: block;
padding: 18px 25px;
color: #212529;
text-decoration: none;
font-size: 1rem;
font-weight: 500;
transition: all 0.3s ease;
background: white;
border-bottom: 1px solid #e9ecef;
}
.single-menu-link:hover {
background: #f8f9fa;
color: #212529;
}
/* Content Area */
.content {
margin-top: 80px;
padding: 40px 20px;
text-align: center;
}
.content h1 {
color: #212529;
font-size: 2.5rem;
margin-bottom: 20px;
font-weight: 600;
}
.content p {
color: #495057;
font-size: 1.1rem;
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
/* Mobile Responsive */
@media (max-width: 768px) {
.mobile-menu {
width: 100%;
max-width: 100%;
}
.content h1 {
font-size: 2rem;
}
.content p {
font-size: 1rem;
padding: 0 10px;
}
}
/* Scroll Bar Styling */
.mobile-menu::-webkit-scrollbar {
width: 6px;
}
.mobile-menu::-webkit-scrollbar-track {
background: #f1f1f1;
}
.mobile-menu::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 3px;
}
.mobile-menu::-webkit-scrollbar-thumb:hover {
background: #a8a8a8;
}
</style>
</head>
<body>
<!-- Header -->
<header class="header">
<div class="logo">FUAR SİTESİ</div>
<div class="hamburger" id="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</header>
<!-- Mobile Menu Overlay -->
<div class="mobile-menu-overlay" id="menuOverlay"></div>
<!-- Mobile Menu -->
<nav class="mobile-menu" id="mobileMenu">
<div class="menu-header">
<h2>MENÜ</h2>
</div>
<ul class="menu-list">
<!-- Ana Sayfa -->
<li class="menu-item">
<a href="#" class="single-menu-link">ANA SAYFA</a>
</li>
<!-- Hakkımızda -->
<li class="menu-item">
<a href="#" class="menu-link" data-dropdown>
<span>HAKKIMIZDA</span>
<span class="dropdown-arrow">▼</span>
</a>
<ul class="submenu">
<li class="submenu-item">
<a href="#" class="submenu-link">FUAR HAKKINDA</a>
</li>
<li class="submenu-item">
<a href="#" class="submenu-link">FUAR ALANI</a>
</li>
</ul>
</li>
<!-- Katılımcılar -->
<li class="menu-item">
<a href="#" class="menu-link" data-dropdown>
<span>KATILIMCILAR</span>
<span class="dropdown-arrow">▼</span>
</a>
<ul class="submenu">
<li class="submenu-item">
<a href="#" class="submenu-link">NEDEN KATILMALISINIZ</a>
</li>
<li class="submenu-item">
<a href="#" class="submenu-link">KATILIMCI FORMU</a>
</li>
<li class="submenu-item">
<a href="#" class="submenu-link">KATILIMCI LİSTESİ</a>
</li>
<li class="submenu-item">
<a href="#" class="submenu-link">KATILIMCI ÜRÜN GRUPLARI</a>
</li>
</ul>
</li>
<!-- Ziyaretçiler -->
<li class="menu-item">
<a href="#" class="menu-link" data-dropdown>
<span>ZİYARETÇİLER</span>
<span class="dropdown-arrow">▼</span>
</a>
<ul class="submenu">
<li class="submenu-item">
<a href="#" class="submenu-link">ZİYARETÇİLER</a>
</li>
<li class="submenu-item">
<a href="#" class="submenu-link">NEDEN ZİYARET ETMELİSİNİZ</a>
</li>
<li class="submenu-item">
<a href="#" class="submenu-link">ZİYARETÇİ PROFİLİ</a>
</li>
</ul>
</li>
<!-- Basın -->
<li class="menu-item">
<a href="#" class="menu-link" data-dropdown>
<span>BASIN</span>
<span class="dropdown-arrow">▼</span>
</a>
<ul class="submenu">
<li class="submenu-item">
<a href="#" class="submenu-link">HABERLER</a>
</li>
<li class="submenu-item">
<a href="#" class="submenu-link">BASIN BÜLTENLERİ</a>
</li>
<li class="submenu-item">
<a href="#" class="submenu-link">VİDEO GALERİ</a>
</li>
<li class="submenu-item">
<a href="#" class="submenu-link">FOTO GALERİ</a>
</li>
<li class="submenu-item">
<a href="#" class="submenu-link">LOGOLAR</a>
</li>
</ul>
</li>
<!-- İletişim -->
<li class="menu-item">
<a href="#" class="single-menu-link">İLETİŞİM</a>
</li>
</ul>
</nav>
<!-- Main Content -->
<main class="content">
<h1>Fuar Mobil Menü</h1>
<p>
Üstteki hamburger menü ikonuna tıklayarak navigasyon menüsünü açabilirsiniz.
Kategoriler ve alt menüler düzenli bir şekilde organize edilmiştir.
</p>
</main>
<script>
// DOM Elements
const hamburger = document.getElementById('hamburger');
const mobileMenu = document.getElementById('mobileMenu');
const menuOverlay = document.getElementById('menuOverlay');
const dropdownLinks = document.querySelectorAll('[data-dropdown]');
// Toggle Mobile Menu
function toggleMobileMenu() {
hamburger.classList.toggle('active');
mobileMenu.classList.toggle('active');
menuOverlay.classList.toggle('active');
// Prevent body scroll when menu is open
document.body.style.overflow = mobileMenu.classList.contains('active') ? 'hidden' : '';
}
// Close Mobile Menu
function closeMobileMenu() {
hamburger.classList.remove('active');
mobileMenu.classList.remove('active');
menuOverlay.classList.remove('active');
document.body.style.overflow = '';
}
// Event Listeners
hamburger.addEventListener('click', toggleMobileMenu);
menuOverlay.addEventListener('click', closeMobileMenu);
// Dropdown functionality
dropdownLinks.forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
const menuItem = this.parentElement;
const isActive = menuItem.classList.contains('active');
// Close all other dropdowns
document.querySelectorAll('.menu-item.active').forEach(item => {
if (item !== menuItem) {
item.classList.remove('active');
}
});
// Toggle current dropdown
menuItem.classList.toggle('active');
});
});
// Close menu on window resize (if desktop)
window.addEventListener('resize', function() {
if (window.innerWidth > 768) {
closeMobileMenu();
}
});
// Close menu when clicking on submenu links
document.querySelectorAll('.submenu-link, .single-menu-link').forEach(link => {
link.addEventListener('click', function() {
// Add a small delay for better UX
setTimeout(closeMobileMenu, 200);
});
});
// Keyboard accessibility
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && mobileMenu.classList.contains('active')) {
closeMobileMenu();
}
});
</script>
</body>
</html>
메타데이터
- post_id
- fd9fdf16bc76
- slug
- mobil-menü-örneği-fd9fdf16bc76
- url
- https://medium.com/@suat/mobil-men%C3%BC-%C3%B6rne%C4%9Fi-fd9fdf16bc76
- canonical_url
- https://medium.com/@suat/mobil-men%C3%BC-%C3%B6rne%C4%9Fi-fd9fdf16bc76
- author_url
- https://medium.com/@suat
- status
- ok
- fetched_at
- 2026-07-17 05:45:21
