Açılır Menü Oluşturma

Merhabalar. Pratik yapma amaçlı bir site hazırlıyorum. Bu işlerde yeniyim. Sayfada konuların üstüne gelince açılır menü oluşmasını istiyorum. Açılır menünün içeriklerini falan her şeyi hazırladım fakat gizledikten sonra bir türlü hover özelliği ile görünür hale getiremiyorum. Kodlar aşağıda:



Not: Kodları kod satırının içinde eklemeyi denedim fakat hata verdi, kusura bakmayın.

Kodu atarken ne hatası veriyor?

Silinen üye dedi:

Kodu atarken ne hatası veriyor?

Genişletmek için tıkla...

Tam hatırlayamadım şimdi consolda birden fazla hata olabikir gibi bişeyler vardı sanırım.

Genel kod olarak paylaşır mısın? Deneyerek cevap vermek daha iyi olur.

Silinen üye dedi:

Genel kod olarak paylaşır mısın? Deneyerek cevap vermek daha iyi olur.

Genişletmek için tıkla...

Yarın bir şekilde atmayı denerim bilgisayar kapalı şu anda uyuyacağım.

Oyunda olduğum için bakamamıştım. "ul li ul li" tarzı yapmak yerine "class" atayarak yaparsan daha iyi olur. İleride baktığında karışma ihtimali azalır. "i" etiketlerini eklemişsin ama boşta duruyorlar şu an. Fontu eklemek istiyorsan yazıları da o etiketin içine koyman lazım. Yeni başladıysan yapmak istediğin şeyi internette arayarak çevrimiçi düzenleyicilerle değiştirip öğrenmen daha iyi olur. Bir süre sonra alışırsın, "w3schools.com" sitesinde istediğin her şey bulunuyordur zaten.
Açılır menü:
Kodların:

Kod düzeni açısından dropdown menü yaparken > kullanmaya çalışın. Ek olarak düzen biraz yanlış, sizin başlangıçta dropdown'un içindeki a'yı değil dropdown'un başlangıç noktası olan ul'yi gizlemeniz daha sonra ise hover'la onu göstermeniz gerek. Örnek bir kod yazayım:

Silinen üye dedi:

Oyunda olduğum için bakamamıştım. "ul li ul li" tarzı yapmak yerine "class" atayarak yaparsan daha iyi olur. İleride baktığında karışma ihtimali azalır. "i" etiketlerini eklemişsin ama boşta duruyorlar şu an. Fontu eklemek istiyorsan yazıları da o etiketin içine koyman lazım. Yeni başladıysan yapmak istediğin şeyi internette arayarak çevrimiçi düzenleyicilerle değiştirip öğrenmen daha iyi olur. Bir süre sonra alışırsın, "w3schools.com" sitesinde istediğin her şey bulunuyordur zaten.
Açılır menü:

How To Create a Hoverable Dropdown Menu

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

Kodların:

Yeni klasör.rar

Посмотреть и скачать с Яндекс Диска

yadi.sk

Genişletmek için tıkla...

Fatalis dedi:

Kod düzeni açısından dropdown menü yaparken > kullanmaya çalışın. Ek olarak düzen biraz yanlış, sizin başlangıçta dropdown'un içindeki a'yı değil dropdown'un başlangıç noktası olan ul'yi gizlemeniz daha sonra ise hover'la onu göstermeniz gerek. Örnek bir kod yazayım:

CSS:Panoya kopyala

/* Dropdown'un ta kendisi */
.menu > ul > li > ul {
    opacity: 0;
    transition: all 250ms ease-in;
    visibility: hidden;
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
}

/* Hover */

.menu > ul > li > a:hover + ul {
    visibility: visible;
    opacity: 1;
}

Genişletmek için tıkla...

İ'ler iconları temsil ediyor sayfada. Teşekkürler ilginiz için.

Açılır menü için ul içindeki menünün yani hangisi açılıcaksa linin içine yazacaksın kısaca şöyle.

<Ul> //ana menu

<Li><a href#>hakkımızda</a></li>

<Li><a href#>sayfa</a> // açılacak menü.

<Ul>

<Li><a href#>sayfa</a></li>
<Li><a href#>sayfa</a></li>
<Li><a href#>sayfa</a></li>

</Ul>

</Li>

</Ul>

Dipnot = -a'lar link vermek için
# İse içi boş anlamına geliyor yani linke tıkladığınızda hiçbir yere gitmiyor
// İse açıklama satırı

Ek olarak yeni başladıysan başlarda sadece HTML kodlarıyla yap sonra aşina olduktan sonra CSS ile düzeltmeler ve görsellik katabilirsin bunlara ek olarak bootstrap gibi içinde hazır CSS kodları bulunan şeylerde kullanabilirsin bootstrap tamamen İngilizce bunun için İngilizce'ninde olması lazım çünkü ne yapmak istiyorsan onu yazdığında hazır CSS kodlarıyla yapıyorsun fontlar için font awesome veya Google font öneririm deneme yapman için notepad++ kodlama için brackets ve Adobe'nin dreamweaver programının kullanabilirsin daha nice şeyler ver ama çalışman ve araman gerekli bir iki gün bakıp bırakmaman gerekir üstünde duracaksın ve kodlar üstünde çalışacaksın ne demiş atalarımız emek olmadan yemek olmaz bir sorunla karşılaşırsan her türlü yardımda bulunabilirim.

157134 dedi:

İ'ler iconları temsil ediyor sayfada. Teşekkürler ilginiz için.

Genişletmek için tıkla...

Classlardan da öyle anlaşılıyordu ama dün sayfada ikonlar çıkmayınca font için koydun sandım. Gece gece "script src" yerine "script scr" yazdığım için gözükmüyormuş bende.