CSS ile Yatay ve Dikey Açılır Menü Nasıl Yapılır?

Videolu olarak yatay ve dikey şeklinde animasyonlu açılır menü örneğini sizlere anlatmaya çalıştım. Kaynak kodlarınıda aşağıda paylaşıyorum, daha detaylı öğrenimi videoyu izleyerek sağlayabilirsiniz.

Yatay Menü

Yatay menümüzün HTML Yapısı şu şekilde;

<nav class="menu">
	<ul>
		<li>
			<a href="#">
				Anasayfa
			</a>
		</li>
		<li>
			<a href="#">
				Hakkımda
			</a>
		</li>
		<li data-dropdown>
			<a href="#">
				Dersler
			</a>
			<div class="dropdown">
				<ul>
					<li>
						<a href="#">
							CSS Dersleri
						</a>
					</li>
					<li data-dropdown>
						<a href="#">
							PHP Dersleri
						</a>
						<div class="dropdown">
							<ul>
								<li>
									<a href="#">Giriş</a>
								</li>
								<li data-dropdown>
									<a href="#">Fonksiyonlar</a>
									<div class="dropdown">
										<ul>
											<li>
												<a href="#">Dizi Fonksiyonları</a>
											</li>
											<li>
												<a href="#">Tanımı</a>
											</li>
											<li>
												<a href="#">Hanımı</a>
											</li>
										</ul>
									</div>
								</li>
								<li>
									<a href="#">OOP</a>
								</li>
								<li>
									<a href="#">Veritabanı</a>
								</li>
							</ul>
						</div>
					</li>
					<li>
						<a href="#">
							HTML Dersleri
						</a>
					</li>
					<li>
						<a href="#">
							MySQL Dersleri
						</a>
					</li>
				</ul>
			</div>
		</li>
	</ul>
</nav>

CSS kodları ise şöyle;

.menu {
    background: #eee;
    border-radius: 10px;
    width: 700px;
    margin-bottom: 20px;
}

.menu > ul {
    display: flex;
    align-items: center;
    height: 60px;
    padding: 0 10px;
}

.menu > ul > li {
    position: relative;
    height: 60px;
    display: flex;
    align-items: center;
}

.menu > ul > li > a {
    display: block;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    font-weight: 500;
    padding: 0 15px;
    color: #333;
    border-radius: 40px;
}

.menu > ul > li[data-dropdown] > a::after {
    content: "\f0d7";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-left: 5px;
    color: #999;
    transition: 300ms all;
    display: inline-block;
}

.menu ul .dropdown {
    position: absolute;
    top: 60px;
    left: 50%;
    padding-top: 10px;
    width: 200px;
    margin-left: -100px;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transform: scale(0);
    transition: 300ms all;
}

.menu ul .dropdown::before {
    content: '';
    border: 8px solid transparent;
    border-bottom-color: #f5f5f5;
    position: absolute;
    top: -6px;
    left: 50%;
    margin-left: -12px;
}

.menu ul .dropdown ul {
    background: #f5f5f5;
    border-radius: 10px;
    padding: 7px 0;
}

.menu ul .dropdown ul li a {
    display: block;
    font-size: 14px;
    font-weight: 500;
    line-height: 34px;
    padding: 0 15px;
    border-radius: 34px;
    color: #555;
}

.menu ul .dropdown ul li {
    position: relative;
    padding: 0 7px;
}

.menu ul .dropdown ul li:hover > a {
    background: #fff;
    color: #000;
}

.menu > ul > li:hover > a::after {
    transform: rotate(180deg);
}

.menu > ul > li:hover > a {
    background: #fff;
}

.menu > ul > li:hover > a + .dropdown {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.menu ul .dropdown .dropdown {
    left: 190px;
    top: 0;
    padding-left: 20px;
    margin-left: 0;
    padding-top: 0;
}

.menu ul .dropdown ul li:hover > .dropdown {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.menu ul .dropdown .dropdown::before {
    border-bottom-color: transparent;
    border-right-color: #f5f5f5;
    top: 10px;
    left: 4px;
    margin-left: 0;
}

.menu ul .dropdown li[data-dropdown] > a::after {
    content: "\f0da";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-left: 10px;
    color: #999;
    display: inline-block;
    transition: 300ms all;
}

.menu ul .dropdown li[data-dropdown]:hover > a::after {
    transform: rotate(-180deg);
}

Dikey menü

Dikey menünün HTML yapısında bir değişiklik yok. Sadece <nav class="menu"> yerine <nav class="menu vertical"> şeklinde bir tanım yapıyoruz.

CSS kısmında ise aynı css'ler kalıyor, ek olarak şu kodları ilave ediyoruz;

.menu.vertical {
    width: 200px;
    padding: 10px 0;
}

.menu.vertical > ul {
    flex-direction: column;
    height: auto;
    align-items: flex-start;
    padding: 0;
}

.menu.vertical > ul > li {
    width: 100%;
    box-sizing: border-box;
    height: 50px;
    padding: 0 10px;
}

.menu.vertical > ul > li > a {
    flex: 1;
    display: flex;
    justify-content: space-between;
}

.menu.vertical > ul > li .dropdown {
    left: 190px;
    top: 10px;
    padding-left: 20px;
    margin-left: 0;
    padding-top: 0;
}

.menu.vertical > ul > li .dropdown .dropdown {
    top: 0;
}

.menu.vertical > ul > li .dropdown::before {
    border-bottom-color: transparent;
    border-right-color: #f5f5f5;
    top: 10px;
    left: 4px;
    margin-left: 0;
}

.menu.vertical > ul > li[data-dropdown] > a::after {
    content: "f0da";
}