Daha önceki yazılarımda Html ve Css kullanarak yatay menü yapımını anlatmıştım. Bu yazımda ise Html ve Scss kullanarak yatay menü yapımı nasıl oluyor onu göstereceğim.
Kodlarımızı tamamladıktan sonra aşağıdaki resimde olduğu gibi bir yatay menü yapmış olacağız.
Scss kodlarını yazarken Nesting yani iç içe seçici konusunu da iyice pekiştirmiş olacağız.
Artık kodlarımızı yazmaya başlayalım.
Html Yatay Menü Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<nav> <ul> <li class="active"> <a href="#">Home</a> </li> <li> <a href="#">About</a> </li> <li> <a href="#">Services</a> </li> <li> <a href="#">Contact</a> </li> </ul> </nav> |
SCSS Yatay Menü Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
body{ margin: 0; padding: 0; } nav{ max-width: 1078px; margin: auto; ul { padding: 0; margin: 0; list-style-type: none; background-color: #A6C4E0; overflow:auto; li{ float:left; border-bottom:3px solid #A6C4E0; a{ display: inline-block; padding: 12px 24px; text-decoration: none; color: #fff; font-size: 18px; } &:hover:not(.active){ background-color: #6E98BA; border-bottom:3px solid #6C8190; } } li.active{ background-color: #6E98BA; border-bottom:3px solid #6C8190; } } } |
Html ve Scss ile yatay menüleri bu şekilde yapıyoruz.
Umarım sizin için faydalı bir yazı olmuştur.
Şu yazılar da ilginizi çekebilir.
Css ile Yatay Sticky Menü Yapımı
Css ile Yatay Sabit Menü Yapımı
Css ile Yatay Açılır Menü Yapımı
SCSS ile ilgili daha fazla bilgi için tıklayın.
Yeni bir yazımda görüşmek üzere.
