Alt menüsü olan açılır menülerin başına nasıl ok bırakabiliriz
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.
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (4)
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;
}
Ö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';
}