CSS Açılır Menü

CSS Açılır Menü, web sayfalarında sıkça kullanılan bir navigasyon öğesidir. Kullanıcıların sayfada bulunan farklı bölümlere kolayca erişmelerini sağlar. Açılır menü genellikle bir düğme veya metin linki şeklinde tasarlanır ve tıklanarak altındaki seçeneklerin açılmasıyla kullanıcıların seçim yapmalarını sağlar.

CSS Açılır Menüsü, HTML ve CSS kullanılarak oluşturulur. Menü elemanları genellikle bir HTML liste etiketi olan “ul” ile oluşturulur ve CSS kodları kullanılarak stilize edilir. Açılır menünün altında bulunan seçenekler de yine “li” etiketi ile oluşturulur.

CSS Açılır Menüsü, web tasarımında sıkça kullanılan ve kullanıcı deneyimini artıran bir navigasyon öğesi olduğu için, birçok web sitesinde bulunabilir.

CSS Açılır Menü Örnek

Öncelikle CSS Açılır Menümüzü oluşturmak için HTML kodları ile bir menü oluşturmamız gerekmektedir. Bu kodlar genellikle <nav> etiketi arasına yazılıp <ul> ve <li> etiketleri kullanılarak yazılmaktadır aşağıdı küçük bir örneğini yapalım.

<nav>
    <ul>
        <li><a href="https://legalyazilim.com/">HOME</a></li>
        <li><a href="https://legalyazilim.com/hakkimizda/">ABOUT US</a></li>
        <li class="dropdown">
            <a href="#">PROGRAMMING LANGUAGES</a>
            <ul class="dropdown-menu">
                <li><a href="https://legalyazilim.com/html/">HTML</a></li>
                <li><a href="https://legalyazilim.com/css/">CSS</a></li>
                <li><a href="https://legalyazilim.com/c/">C</a></li>
            </ul>
        </li>
        <li><a href="https://legalyazilim.com/iletisim/">CONTACT</a></li>
    </ul>
</nav>

Yukarıda CSS Açılır Menü için küçük bir HTML kodu yazdık ancak bu kodlar kendi başına çok fazla şey ifade etmez. Bunların sağlam bir menü olarak gözükebilmesi için bunlara CSS kodu verilmesi gerekmektedir. CSS kodları ile gerek açılır menünün görünmesini sağlamak gerek te menünün renk-boyut ve boşluklarını ayarlayabilmekteyiz. CSS bu ve bunun gibi birçok işlemde işimize çok yaramaktadır. Daha fazla CSS konuları için CSS kategorimizi ziyaret etmenizi tavsiye ederiz.

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
nav ul li {
    color: black;
    display: inline-block;
    position: relative;
}
nav ul li a {
    display: block;
    padding: 10px 20px;
    color: black;
    text-decoration: none;
}
nav ul li:hover > ul {
    display: block;
}
nav ul ul {
    color: black;
    display: none;
    position: absolute;
    top: 100%;
    left: 20px;
    background-color: #fff;
    border: 1px solid #ccc;
}
nav ul ul li {
    color: black;
    display: block;
}
nav ul ul li a {
    padding: 10px 20px;
    color: #black;
    text-decoration: none;
}
nav ul ul li a:hover {
    background-color: #f1f1f1;
}

Çıktısı: