<!DOCTYPE html>
Ders Menüsü
<br> :root {<br> /* Ana Renk Paleti */<br> --primary-green: #4CAF50;<br> --light-green: #e8f5e9;<br> --dark-green: #2e7d32;</p> <div class="highlight"><pre class="highlight plaintext"><code> --primary-blue: #2196F3; --light-blue: #e3f2fd; --dark-blue: #1976d2; --primary-orange: #FF9800; --light-orange: #fff3e0; --dark-orange: #f57c00; --primary-purple: #9C27B0; --light-purple: #f3e5f5; --dark-purple: #7b1fa2; --primary-red: #F44336; --light-red: #ffebee; --dark-red: #d32f2f; /* Genel Tema Renkleri */ --text-color: #333; --light-bg: #f0f4f8; --white: #ffffff; --border-color: #eee; --shadow: 0 6px 20px rgba(0,0,0,0.1); --border-radius: 12px; } * { box-sizing: border-box; } body { margin: 0; font-family: 'Poppins', sans-serif; /* Daha modern bir font */ background: var(--light-bg); padding: 30px; line-height: 1.6; } #menu-wrapper { max-width: 1000px; margin: auto; background: var(--white); border-radius: var(--border-radius); box-shadow: var(--shadow); overflow: hidden; } ul.menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: space-around; } ul.menu > li { position: relative; flex: 1 1 200px; /* Esnekliği korur */ border-right: 1px solid var(--border-color); } ul.menu > li:last-child { border-right: none; } ul.menu > li > a { display: flex; /* İkon ve metni hizalamak için flex kullanıldı */ align-items: center; justify-content: center; /* Ortalamak için */ gap: 10px; /* İkon ile metin arasına boşluk */ padding: 20px; font-size: 18px; font-weight: 600; /* Kalınlık ayarı */ color: var(--text-color); text-decoration: none; transition: all 0.3s ease-in-out; position: relative; /* İkon konumlandırması için */ } /* Sınıf seviyelerine göre ikon ve renkler */ ul.menu > li:nth-child(1) > a { /* 5. SINIF */ background-color: #ffe0b2; /* Açık turuncu */ } ul.menu > li:nth-child(1) > a:hover, ul.menu > li:nth-child(1).open > a { background-color: var(--primary-orange); color: var(--white); } ul.menu > li:nth-child(1) > a::before { content: "\f19d"; /* Graduation cap icon */ font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--dark-orange); font-size: 1.5em; } ul.menu > li:nth-child(1).open > a::before { color: var(--white); } ul.menu > li:nth-child(2) > a { /* 6. SINIF */ background-color: #c8e6c9; /* Açık yeşil */ } ul.menu > li:nth-child(2) > a:hover, ul.menu > li:nth-child(2).open > a { background-color: var(--primary-green); color: var(--white); } ul.menu > li:nth-child(2) > a::before { content: "\f19d"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--dark-green); font-size: 1.5em; } ul.menu > li:nth-child(2).open > a::before { color: var(--white); } ul.menu > li:nth-child(3) > a { /* 7. SINIF */ background-color: #bbdefb; /* Açık mavi */ } ul.menu > li:nth-child(3) > a:hover, ul.menu > li:nth-child(3).open > a { background-color: var(--primary-blue); color: var(--white); } ul.menu > li:nth-child(3) > a::before { content: "\f19d"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--dark-blue); font-size: 1.5em; } ul.menu > li:nth-child(3).open > a::before { color: var(--white); } ul.menu > li:nth-child(4) > a { /* 8. SINIF */ background-color: #e1bee7; /* Açık mor */ } ul.menu > li:nth-child(4) > a:hover, ul.menu > li:nth-child(4).open > a { background-color: var(--primary-purple); color: var(--white); } ul.menu > li:nth-child(4) > a::before { content: "\f19d"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--dark-purple); font-size: 1.5em; } ul.menu > li:nth-child(4).open > a::before { color: var(--white); } /* Alt Menü Stilleri */ ul.menu li ul { display: none; /* JS ile açılıp kapanacak */ position: static; /* Mobil ve JS kontrolü için */ background: var(--white); padding: 0; /* İç paddingi sıfırla */ border-top: 1px solid var(--border-color); } ul.menu li.open > ul { display: block; } ul.menu li ul li { border-bottom: 1px solid var(--border-color); /* Alt menü öğeleri arasına çizgi */ } ul.menu li ul li:last-child { border-bottom: none; } ul.menu li ul li a { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text-color); padding: 12px 20px; /* Padding ayarı */ font-size: 16px; transition: background 0.2s, color 0.2s; } ul.menu li ul li a:hover { background-color: var(--light-blue); color: var(--dark-blue); } /* Dönem ve Ünite ikonları */ ul.menu li ul li > a.with_arrow::before { content: "\f073"; /* Calendar icon for DÖNEM */ font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--primary-orange); font-size: 1.1em; } ul.menu li ul li ul li a::before { content: "\f02d"; /* Book icon for ÜNİTE */ font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--primary-green); font-size: 1.1em; } /* Ok İkonu */ .with_arrow::after { content: "\f107"; /* Chevron-down */ font-family: "Font Awesome 6 Free"; font-weight: 900; margin-left: auto; /* Sağa hizala */ font-size: 1em; transition: transform 0.3s ease-in-out; } li.open > a.with_arrow::after { transform: rotate(180deg); } /* İç içe geçmiş menü okları */ ul.menu li ul li > a.with_arrow::after { content: "\f105"; /* Chevron-right */ transform: rotate(0deg); /* İlk durumu */ } ul.menu li ul li.open > a.with_arrow::after { transform: rotate(90deg); /* Açıkken aşağı dönsün */ } /* Mobil Düzenlemeler */ @media (max-width: 768px) { ul.menu { flex-direction: column; } ul.menu > li { border-right: none; border-bottom: 1px solid var(--border-color); } ul.menu > li:last-child { border-bottom: none; } ul.menu > li > a { justify-content: flex-start; /* Sınıf başlıklarını sola hizala */ padding-left: 25px; } ul.menu > li > a::before { /* Sınıf ikonlarını sola hizala */ margin-right: 15px; } /* Alt menü ve iç içe alt menü paddingleri */ ul.menu li ul li a { padding-left: 40px; } ul.menu li ul li ul li a { padding-left: 60px; } /* Mobil için ok yönü */ .with_arrow::after { content: "\f107"; /* Chevron-down */ position: absolute; right: 20px; transform: rotate(0deg); } li.open > a.with_arrow::after { transform: rotate(180deg); } ul.menu li ul li > a.with_arrow::after { /* İç içe menüler için */ content: "\f107"; /* Chevron-down */ transform: rotate(0deg); } ul.menu li ul li.open > a.with_arrow::after { transform: rotate(180deg); } } </code></pre></div> <p>
document.querySelectorAll('.with_arrow').forEach(link => { link.addEventListener('click', function (e) { e.preventDefault(); const parentLi = this.parentElement; // Close other open menus at the same level Array.from(parentLi.parentElement.children).forEach(sibling => { if (sibling !== parentLi) { sibling.classList.remove('open'); sibling.querySelectorAll('li.open').forEach(inner => inner.classList.remove('open')); } }); // Toggle the 'open' class on the clicked parent parentLi.classList.toggle('open'); }); }); // Close menus when clicking outside document.addEventListener('click', e => { if (!e.target.closest('#menu-wrapper')) { document.querySelectorAll('li.open').forEach(li => li.classList.remove('open')); } });
`
Top comments (0)