Css Kodunda Açılır Menü Fotoğraf Üstüne Nasıl Getirilir

CSS Kodunda Açılır Menü Fotoğraf Üstüne Nasıl Getirilir?

Açılır menüler, web sitelerinde gezinmeyi kolaylaştırmak için kullanılan önemli bir kullanıcı arayüzü öğesidir. Fotoğrafların üzerine açılır menüler getirmek, kullanıcıların belirli bir görüntüyle ilgili ek bilgilere veya seçeneklere erişmelerine olanak tanır. Bu makalede, CSS kodunu kullanarak bir açılır menüyü bir fotoğrafın üzerine nasıl getireceğinizi adım adım açıklayacağız.

Adım 1: HTML Yapısını Oluşturma

Öncelikle, açılır menüyü içerecek HTML yapısını oluşturmanız gerekir. Bu, bir div öğesi içinde bir img öğesi ve bir ul öğesi içeren bir li öğesinden oluşur.

“`html

  • alt=”Fotoğraf”>

    • “`

    Adım 2: CSS Stilleri Ekleme

    Ardından, açılır menünün fotoğrafın üzerine gelmesini sağlayan CSS stilleri eklemeniz gerekir. Bunu yapmak için aşağıdaki stilleri kullanabilirsiniz:

    “`css
    li {
    position: relative;
    }

    li div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }

    li ul {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    display: none;
    }

    li:hover ul {
    display: block;
    }
    “`

    Adım 3: Açılır Menüyü Konumlandırma

    Açılır menünün fotoğrafın üzerine doğru konumlandırıldığından emin olmanız gerekir. Bunu yapmak için top ve left özelliklerini kullanabilirsiniz. Örneğin, açılır menüyü fotoğrafın sağ üst köşesine konumlandırmak için aşağıdaki stilleri kullanabilirsiniz:

    css
    li ul {
    top: 0;
    right: 0;
    }

    İpuçları

    • Açılır menünün fotoğrafın üzerine geldiğinde görünmesini sağlamak için display: none; özelliğini kullanın.
    • Açılır menünün genişliğini ve yüksekliğini fotoğrafın boyutuna göre ayarlayın.
    • Açılır menünün arka planını ve metin rengini fotoğrafla uyumlu olacak şekilde ayarlayın.
    • Açılır menünün mobil cihazlarda düzgün çalıştığından emin olun.

    Faydalı Kaynaklar

    Sonuç

    CSS kodunu kullanarak bir açılır menüyü bir fotoğrafın üzerine getirmek, kullanıcı deneyimini geliştirmenin ve web sitenizin işlevselliğini artırmanın kolay bir yoludur. Bu makalede açıklanan adımları izleyerek, fotoğraflarınızın üzerine açılır menüler ekleyebilir ve kullanıcılarınıza ek bilgi ve seçenekler sağlayabilirsiniz.

    Yayımlandı

    kategorisi