İçerik

• Adım atmak
• Bölüm 1/2: HTML'yi Yazma
• Bölüm 2/2: CSS'yi Yazma
• İpuçları

Açılır menü ile sayfadaki tüm önemli bölümlerin ve sayfanın içerdiği alt bölümlerin net ve hiyerarşik bir genel görünümünü oluşturursunuz. Alt bölümlerin görünmesi için farenizi ana bölümlerin üzerine getirmeniz yeterlidir. Yalnızca HTML ve CSS kullanarak bir açılır menü oluşturabilirsiniz.

Adım atmak

Bölüm 1/2: HTML'yi Yazma

1. Gezinme bölümünüzü oluşturun. Normalde web sitesi genelindeki gezinme çubuğu için nav>, sayfaya bağlı daha küçük bağlantı bölümleri için üstbilgi> veya başka bir seçenek uygun görünmüyorsa div> kullanırsınız. Bunu bir div> öğesine yerleştirin, böylece hem kabın hem de menünün stilini ayarlayabilirsiniz.
   • div>
   • nav>
   • / nav>
   • / div>
2. Her bölüme bir sınıf özelliği verin. Bu öğelerin stilini CSS ile değiştirmek için sınıf özelliğini daha sonra kullanacağız. Hem kapsayıcıya hem de menüye kendi sınıf özniteliklerini verin.
   • div>
   • nav>
   • / nav>
   • / div>
3. Menü öğelerinin bir listesini ekleyin. Sırasız liste (ul>), ana menünün öğelerini içerir (liste öğeleri li>), kullanıcı faresini üzerine getirirse, açılır menüleri görür. Liste öğenize "clearfix" sınıfını ekleyin; buna daha sonra CSS elektronik tablosunda değineceğiz.
   • div>
   • nav>
   •       ul>
   •          li> Ana Sayfa / li>
   •          li> Çalışanlar
   •          li> İletişim
   •          / li>
   •       / ul>
   • / nav>
   • / div>
4. Bağlantı ekleyin. Bu üst düzey menü öğeleri de kendi sayfalarına bağlantı veriyorsa, artık bağlantıları ekleyebilirsiniz. Varolmayan bir bağlantıya bağlantı ("#!" Gibi), Hiçbir şeye bağlantı vermeseler bile, kullanıcının imleci farklı görünecektir. Bu örnekte, İletişim hiçbir yere götürmez, ancak diğer iki menü öğesi şunları yapar:
   • div>
   • nav>
   • ul>
   • li>a href = "/">Ev/ a>/ li>
   • li>a href = "/ Çalışanlar">Personel üyeleri/ a>
   • / li>
   • li>a href = "#!">İletişim/ a>
   • / li>
   • / ul>
   • / nav>
   • / div>
5. Açılır öğeler için alt listeler oluşturun. Stil oluşturulduktan sonra bu listeler açılır menüyü oluşturur. Listeyi, kullanıcının fareyle üzerine geleceği liste öğesine yerleştirin. Daha önce olduğu gibi bir sınıf özelliği ve bir bağlantı ekleyin.
   • div>
   • nav>
   • ul>
   • li> a href = "/"> Ana Sayfa / a> / li>
   • li> a href = "/ Çalışanlar"> Çalışanlar / a>
   •          ul>
   •             li> a href = "/ borsato"> Marco Borsato / a> / li>
   •             li> a href = "/ titulaer"> Chriet Titulaer / a> / li>
   •          / ul>
   • / li>
   • li> a href = "#!"> İletişim / a>
   •          ul>
   •             li> a href = "mailto: [email protected]"> Sorun bildirin / a> / li>
   •             li> a href = "/ support"> Müşteri Desteği / a> / li>
   •          / ul>
   • / li>
   • / ul>
   • / nav>
   • / div>

Bölüm 2/2: CSS'yi Yazma

1. CSS stil sayfanızı açın. Bağlantı zaten mevcut değilse, HTML belgenizin baş bölümüne CSS stil sayfanıza bir bağlantı gönderin. Bu makalede, yazı tipi ve arka plan rengi ayarlama gibi CSS'nin temellerini ele almayacağız.
2. Düzeltme kodunu ekleyin. Menü listesine "clearfix" sınıfını eklemeyi hatırlıyor musunuz? Normalde, açılır menünün öğeleri, diğer öğelerin taşınmasına izin veren şeffaf bir arka plana sahiptir. CSS'ye basit bir uyarlama bu sorunu çözebilir. İşte güzel, hızlı bir düzeltme, ancak Internet Explorer 7 ve önceki sürümlerde çalışmasa da:
   • .clearfix: sonra {
   • içerik: "";
   • ekran: tablo;
   • }
3. Temel tasarımı oluşturun. Bu kod ile menünüzü sayfanın en üstüne yerleştirebilir ve açılır öğeleri gizleyebilirsiniz. Bu, amaca yönelik olarak çok basittir, böylece ilgili koda odaklanabiliriz. Daha sonra dolgu ve kenar boşluğu gibi ek CSS koduyla değiştirebilirsiniz.
   • .nav-wrapper {
   • genişlik:% 100;
   • arka plan: # 008B8B;
   • }
   •  
   • .nav menu {
   • konum: göreceli;
   • ekran: satır içi blok;
   • }
   •  
   • .sub menu {
   • konum: mutlak;
   • görüntü yok;
   • arka plan: # 555;
   • }
4. Farenizi üzerlerine getirdiğinizde açılır öğelerin görünmesini sağlayın. Açılır listedeki öğeler artık gösterilmeyecek şekilde ayarlanmıştır. Aşağıda, fareyle "üst" öğesinin üzerine geldiğinizde bir alt listenin tamamını nasıl göstereceğiniz açıklanmaktadır:
   • .nav-menu ul li: hover> ul {
   • Ekran bloğu;
   • }
   • Not - açılır menüdeki menü öğelerinde ek menüler gizlenmişse, burada eklenen özellikler tüm menülere uygulanacaktır. Stilin yalnızca açılır menülerin ilk düzeyine uygulanmasını istiyorsanız, bunun yerine ".nav-menu> ul" kullanın.
5. Bir açılır menü olduğunu bir okla belirtin. Web tasarımcıları normalde bir öğenin bir açılır menüyü açtığını aşağı okla gösterir. Bu kod, o oku menünüzdeki her öğeye ekler:
   • .nav menu> ul> li: after {
   • içerik: " 25BC"; / * aşağı ok için unicode'dan kaçtı * /
   • yazı tipi boyutu: .5em;
   • Ekran bloğu;
   • konum: mutlak;
   •    }
   • Not - Okun konumunu üst, alt, sağ veya sol özelliklerle ayarlayın.
   • Not - Menü öğelerinizin tamamında açılır menü yoksa, tüm sınıf gezinme menüsünün görünümünü değiştirmeyin. Bunun yerine, ok olmasını istediğiniz her li öğesine başka bir sınıf (açılır menü gibi) ekleyin. Yukarıdaki kodda bu sınıfa bakın.
6. Dolgu, arka plan ve diğer özellikleri ayarlayın. Menü şimdi çalışmalı, ancak henüz çok hoş değil. CSS'deki özelliklerle, her bir sınıfın veya öğenin nasıl göründüğünü ve nerede konumlandıklarını özelleştirebilirsiniz.

İpuçları

• Bir forma bir açılır menü eklemek istiyorsanız, HTML5'te select> öğesiyle çok kolaydır.
• A href = "#"> bağlantısı sayfanın üst kısmına kayar ve href = "#!"> Gibi var olmayan bir bağlantıya işaret eden bir bağlantı Kaymaz. Bu çok özensiz geliyorsa, imlecin CSS ile nasıl göründüğünü değiştirebilirsiniz.
• Örnek kodu kopyalayıp yapıştırdığınızda, tüm madde işaretlerini kaldırın.