Bu yazımızda Css ile dropdown (açılır menü) nasıl yapılır onu öğreneceğiz. Öncelikle dropdown yani açılır menü nedir ondan bahsedelim. Web sitelerinde üzerine gelindiğinde veya fare ile tıklandığında açılan menülerdir. Daha çok menü öğelerinin çok olduğu durumlarda tercih edilir.
Örneğin bir ETicaret sitesini düşünelim. Onlarca kategoride ürün olabiliyor. Bu gibi durumlarda menülerin daha düzenli olması için dropdown menüler ile iç içe kategoriler oluştururuz. Böylece daha sade bir tasarım ile kullanıcının daha rahat gezinmesi amaçlanır.
Aşağıda birden fazla açılır menü bulunuyor. İlerleyen zamanlarda örneklerin sayısını arttırmayı düşünüyorum. Artık örneklerimize geçebiliriz.
İlk önce Html ve Css kodlarını yazıp daha sonra örneklerimizin demo sunu paylaştım. Kodları incelediğinizde daha anlaşılır olacaktır.
Css ile Dropdown Yapımı
Açılır Menü Html ve Css 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 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<style> .dropbtn { background-color: #4fb99f; color: white; padding: 12px 36px; font-size: 16px; border: none; cursor: pointer; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #4fb99f; text-align: center; min-width: 149px; z-index: 1; } .dropdown-content a { color: #fff; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover { background-color: #f2b134; } .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: #068587; } </style> <div class="dropdown"> <button class="dropbtn">Kategoriler</button> <div class="dropdown-content"> <a href="#">Asp.net MVC</a> <a href="#">jquery</a> <a href="#">Css</a> <a href="#">Html</a> <a href="#">Javascript</a> <a href="#">Bootstrap</a> <a href="#">C#</a> </div> </div> |
Açılır Menü Html ve Css 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 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
<style> .dropbtn { background-color: #4fb99f; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropdown { position: relative; display: inline-block; float: left; } .dropdown-content { display: none; position: absolute; background-color: #4fb99f; text-align: center; min-width: 200px; z-index: 1; left: 0; } .dropdown-content a { color: #fff; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover { background-color: #f2b134; } .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: #068587; } </style> <div class="dropdown"> <button class="dropbtn">Kategoriler</button> <div class="dropdown-content"> <a href="#">Asp.net MVC</a> <a href="#">jquery</a> <a href="#">Css</a> <a href="#">Html</a> <a href="#">Javascript</a> <a href="#">Bootstrap</a> <a href="#">C#</a> </div> </div> |
Açılır Menü Html ve Css 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 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
<style> .dropbtn { background-color: #4fb99f; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropdown { position: relative; display: inline-block; float: right; } .dropdown-content { display: none; position: absolute; background-color: #4fb99f; text-align: center; min-width: 200px; z-index: 1; right: 0; } .dropdown-content a { color: #fff; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover { background-color: #f2b134; } .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: #068587; } </style> <div class="dropdown"> <button class="dropbtn">Kategoriler</button> <div class="dropdown-content"> <a href="#">Asp.net MVC</a> <a href="#">jquery</a> <a href="#">Css</a> <a href="#">Html</a> <a href="#">Javascript</a> <a href="#">Bootstrap</a> <a href="#">C#</a> </div> </div> |
Açılır Menü Html ve Css 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 |
<style> .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); background-color: #eee; border: 1px solid lightgrey; z-index: 1; } .dropdown:hover .dropdown-content { display: block; } .apple { padding: 15px; text-align: center; } </style> <div class="dropdown"> <img src="https://www.mehsatek.com/Areas/Admin/Upload/Article/images/125/elma.jpg" width="100" height="100" /> <div class="dropdown-content"> <img src="https://www.mehsatek.com/Areas/Admin/Upload/Article/images/125/elma.jpg" width="250" height="250" /> <div class="apple">Elmanın faydaları</div> </div> </div> |
Şu Html ve Css menü örnekleri de 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ı
Css ile Dikey Sabit Menü Yapımı
Umarım sizin için faydalı bir yazı olmuştur.
Yeni bir yazımda görüşmek üzere.
Merhaba. dropdown uygulamasını yapamadım. Daha doğrusu daha önceden yaptığım siteye eklemem istendi. Siteyi tamamladım ve butonlardan bir tanesini dropdown yapmam isteniyor . Nasıl yapabilirim? Size bir sayfayı göndersem yardımcı olabilir misiniz?
Merhaba Erol.
info@mehsatek.com adresine gönder, müsait vaktimde yardımcı olmaya çalışacağım.