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

CSS Kodunda Açılır Menüyü Fotoğraf Üzerine Getirme

Açılır menüler, web sitelerinde gezinmeyi kolaylaştırmak için kullanılan önemli bir tasarım öğesidir. Bir açılır menüyü fotoğrafın üzerine getirmek, kullanıcıların fotoğrafla ilgili ek seçeneklere veya bilgilere kolayca erişmelerini sağlayarak kullanıcı deneyimini geliştirebilir. Bu makale, CSS kodunu kullanarak bir açılır menüyü fotoğrafın üzerine nasıl getireceğinizi adım adım açıklayacaktır.

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

İlk olarak, açılır menüyü ve fotoğrafı içerecek HTML yapısını oluşturmanız gerekir. Aşağıdaki HTML kodunu kullanabilirsiniz:

“`html

alt=”Fotoğraf”>

Seçenek 1
Seçenek 2
Seçenek 3

“`

Adım 2: CSS Stillerini Ekleme

Ardından, açılır menünün fotoğrafın üzerine gelmesini sağlayan CSS stillerini eklemeniz gerekir. Aşağıdaki CSS kodunu kullanabilirsiniz:

“`css
.container {
position: relative;
}

.dropdown {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.2s ease-in-out;
}

.container:hover .dropdown {
opacity: 1;
}

.dropdown-menu {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
}

.dropdown-item {
display: block;
padding: 5px 10px;
text-decoration: none;
color: #000;
}
“`

Adım 3: JavaScript Ekleme (İsteğe Bağlı)

Açılır menünün fotoğrafın üzerine geldiğinde otomatik olarak görünmesini istiyorsanız, JavaScript eklemeniz gerekir. Aşağıdaki JavaScript kodunu kullanabilirsiniz:

“`javascript
const container = document.querySelector(‘.container’);

container.addEventListener(‘mouseover’, () => {
const dropdown = container.querySelector(‘.dropdown’);
dropdown.classList.add(‘show’);
});

container.addEventListener(‘mouseout’, () => {
const dropdown = container.querySelector(‘.dropdown’);
dropdown.classList.remove(‘show’);
});
“`

İpuçları

  • Açılır menünün boyutunu ve konumunu fotoğrafın boyutuna ve konumuna göre ayarlayın.
  • Açılır menünün arka plan rengini ve opaklığını fotoğrafla uyumlu olacak şekilde değiştirin.
  • Açılır menü öğelerinin yazı tipi boyutunu ve rengini okunabilirlik için ayarlayın.
  • Mobil cihazlarda açılır menünün düzgün çalıştığından emin olun.

Faydalı Kaynaklar

Sonuç

CSS kodunu kullanarak bir açılır menüyü 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 gelen ve kullanıcıların ek seçeneklere veya bilgilere erişmelerini sağlayan şık ve kullanışlı açılır menüler oluşturabilirsiniz.

Yayımlandı

kategorisi