v2.3.1
Giriş yap

Alt menüsü olan açılır menülerin başına nasıl ok bırakabiliriz

medesan tarafından soruldu ve en son güncellendi

57 defa görüntülendi

Merhaba arkadaşlar, Örnek te Tayfun Erbilen'in bu derste anlattıkları ile elde edilen bir açılır menü örneği bulunmakta. Ana menüdeki başlıkların yanına eğer alt menüleri var ise aşağı yönlü ok, alt menülerde ise alt menüsü varsa sağa doğru bakan ok bırakmak istiyorum. fakat istediğim sonuca ulaşamadım. yardımcı olabilirseniz sevinirim.

Cevaplar (4)
makifgokce
9 gün önce

css ile şu şekilde yapabilirsin.
yapman gereken sadece açılır olan <li> etiketlerine dropdown class ı eklemek.

ul.menu > li.dropdown > a::after{
  content: '';
  border: 4px solid transparent;
  border-top-color: white;
  display: inline-block;
  margin-left: 5px;
}
ul:not(.menu) > li.dropdown > a::after{
  content: '';
  border: 4px solid transparent;
  border-left-color: white;
  display: inline-block;
  margin-left: 5px;
}
medesan
9 gün önce

teşekkür ederim üstad...

medesan
9 gün önce

teşekkür ederim üstad...

arduinoturkbatu
3 gün önce

Örnek:

<!-- head -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />

<!-- linkin bulunduğu yer -->
	<li><a href="#" class="asagi">Ürünler</a>
		<ul>
			<li><a href="#">Ürün Kategori 1</a></li>
			<li><a href="#">Ürün Kategori 2</a></li>
			<li><a href="#" class="sag">Ürün Kategori 3</a>
				<ul>
					<li><a href="#">Ürün 1</a></li>
					<li><a href="#" class="sag">Ürün 2</a>
						<ul>
							<li><a href="#">Ürün -2 -1</a></li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
	</li>	
.asagi::after {
    content: '\f063';
}
.sag::after {
    content: '\f061';
}
Önce Burayı Okuyun!
Cevap yazarken markdown kod yazımını kullanmanız gerekiyor. Nasıl kullanacağınızı bilmiyorsanız buradaki makaleye gözatın!
Cevap yaz