Adım adım kılavuz
Gezinme menünüzün üstte yatay bir satır mı yoksa yan taraftaki dikey bir satır mı olduğu, yine de yalnızca bir listedir. Web navigasyonunu tasarlarken, gezinme menüsünün sadece bir grup bağlantıdan ibaret olduğunu unutmak kolaydır. Ancak navigasyonunuzu XHTML + CSS kullanarak programlıyorsanız, indirilecek küçük bir menü (XHTML) oluşturabilir ve kolayca özelleştirebilirsiniz (CSS).
Başlamak
Gezinme için bir liste tasarlamaya başlamak için bir liste kullanmanız gerekir.
Gezinme olarak tanımlanmış standart sırasız liste olabilir:
HTML'ye yakından bakarsanız, "Ana Sayfa" bağlantısının da bir kimliğinizin olduğunu unutmayın. Bu, okuyucularınız için geçerli konumu tanımlayan bir menü oluşturmanıza izin verecektir. Şu anda sitenizde bu tür görsel işarete sahip olmayı planlamıyor olsanız bile, bu bilgileri ekleyebilirsiniz. Daha sonra ipucu eklemeye karar verirseniz, sitenizi hazırlamak için daha az kod yazabilirsiniz.
Herhangi bir CSS stili olmadan, bu XHTML menüsü standart sırasız liste gibidir. Mermi var ve liste öğeleri biraz girintili. Yer tutucu bağlantılarını kullandığımdan çoğu tarayıcı, bağlantıları tıklanabilir (altı çizili ve mavi renkte) olarak göstermez. Yukarıdaki HTML’ye bir Web sayfasına yapıştırırsanız, navigasyonunuz şöyle görünür:
- Ev
- Ürünler
- Hizmetler
- Bizimle iletişime geçin
Bu oldukça sıkıcı ve bir menü gibi görünmüyor. Ancak listeye eklenen birkaç CSS stili sayesinde, sizi gururlandıran bir menü oluşturabilirsiniz.
Dikey Gezinme Menüsü
Dikey bir gezinme menüsü yazmak çok kolaydır çünkü normal bir liste ile aynı şekilde görüntülenir: yukarı ve aşağı.
Liste öğeleri sayfada aşağı doğru görüntülenir.
Menü yapıyorum, dışarıdan başlamak ve çalışmak isterim. Bu nedenle, ilk # navigasyon tarzını çiziyorum ve sonra li öğelerine ve sonra bağlantılara vb. Geçiyorum. Bu menü için İlk önce menünün genişliğini tanımlarsınız. Bu, menü öğeleri uzun olsa bile, düzenin geri kalanını zorlamayacak veya yatay kaydırmaya neden olmayacaktır.
ul # navigation {genişlik: 12em; }
Genişlik setini aldıktan sonra liste öğeleriyle oynayabilirim. Bu, (mermi kurtulmak için), arka plan renkleri, kenarlıklar, metin hizalama ve kenar boşlukları gibi şeyleri ayarlamamı sağlar.
ul # navigasyon li {
liste stili: yok;
arkaplan rengi: # 039;
kenarlık: katı 1px # 039;
metin hizalaması: sol;
kenar boşluğu: 0;
}
Liste öğeleri için temelleri belirledikten sonra, menünün bağlantılar alanında nasıl göründüğü ile oynamaya başlayabilirsiniz. İlk stil UL # navigasyon LI A ve sonra A: link, A: ziyaret, A: vurgulu ve A: aktif (eğer isterseniz). Linkler için, bağlantıları bir blok elemanı (varsayılan satır içi yerine) yapmaktan hoşlanırım. Bu onları LİF'in tüm alanını kapamaya zorlar - ve onlar daha çok bir paragraf gibi hareket ederler, bu da onları menü düğmeleri olarak stillemeyi kolaylaştırır. Her zaman yaptığım diğer şey alt çizgi kaldırmaktır (metin-dekorasyon: yok;), Bu, düğmelerin bana daha fazla düğme gibi görünmesini sağlar.
Ama elbette, tasarımınız farklı olabilir.
ul # navigation li a {
Ekran bloğu;
metin-dekorasyon: yok;
dolgu malzemesi: .25em;
kenar-alt: katı 1px # 39f;
sınır-sağ: katı 1px # 39f;
}
Ekran: bloğu ile dikkat edin; Bağlantılar üzerinde, menü öğesinin tüm kutusu tıklanabilir, yalnızca harflerle değil. Bu, kullanılabilirlik için de iyidir. Varsayılan mavi, kırmızı ve mordan farklı olmasını istiyorsanız , bağlantı renklerini (bağlantı, ziyaret, gezinme ve etkin) ayarladığınızdan emin olun.
a: link, a: ziyaret edilen {color: #fff; }
a: vurgulu, a: aktif {color: # 000; }
Ayrıca, arka plan rengini değiştirerek vurgulu duruma biraz daha ilgi göstermeyi seviyorum.
a: vurgulu {background-color: #fff; }
Daha fazla dikey menü örneği istiyorsanız, aşağıdaki listeye bakın.
- Bir Tarz Dikey Menüsü
- Temel Dikey Menü Şablonu
- Burada Bir Tarz Dikey Menüsü Var
- Burada Olan Temel Dikey Menü Şablonu
Yatay Gezinme Menüsü
Yatay gezinme menüleri oluşturmak, dikey gezinme menülerinden biraz daha zordur, çünkü HTML listelerinin dikey olarak görüntülemeyi tercih etmesi gerekir. Yatay menüde olduğu gibi, önce navigasyon menü listenizi oluşturun :
Yatay menü oluşturmak için, dikey menüde yaptığınız gibi çalışın. Dışarıdan başla ve çalış. Navigasyonun sol köşede başlamasını istediğimden, 0 sol kenar boşluğu ve dolgu ile ayarladım ve onu sola kaydırdım. Genişliğini ayarlama alışkanlığınıza da girmelisiniz, böylece menünüz niyetlenenden daha fazla veya daha az yer kaplamıyor. Yatay menüler için, bu genellikle tasarımın tam genişliğidir. Ayrıca okumayı kolaylaştırmak için tüm listeye bir arkaplan rengi ekledim.
ul # navigasyon {
yüzer: sol;
kenar boşluğu: 0;
dolgu malzemesi: 0;
genişlik:% 100;
arkaplan rengi: # 039;
}
Ancak yatay gezinme menüsünün sırrı liste öğelerinde. Liste öğeleri normalde blok elemanlardır, yani her biri önce ve sonra yerleştirilen bir satırsona sahip olacaklardır. Ekranı bloktan satır içi duruma getirerek, liste elemanlarını yatay olarak yan yana sıralamaya zorlarsınız.
ul # navigation li {ekran: satır içi; }
Bağlantıları tıpkı aynı renk ve metin süslemeli dikey navigasyon menüsünde göründüğüm gibi ele aldım. Düğmeleri, üzerinde gezindikleri zaman tanımlamak için bir üst kenarlık ekledim. Kaldırdığım tek şey ekran: block; Bu yeni satırları tekrar yerleştirir ve yatay menüyü yok eder.
ul # navigation li a {
metin-dekorasyon: yok;
dolgu malzemesi: .25em 1em;
kenar-alt: katı 1px # 39f;
kenarlık: katı 1px # 39f;
sınır-sağ: katı 1px # 39f;
}
a: link, a: ziyaret edilen {color: #fff; }
ul # navigation li a: vurgun {
arkaplan rengi: #fff;
renk: # 000;
}
Konum Bilgileri
HTML’nin bir başka yönü de, bir yerde tanımlayıcınızdır. Menünüzü, kullanıcılarınızın mevcut konumunu göstermek için değiştirmek isterseniz, farklı bir arka plan rengi veya başka bir stil tanımlamak için bu kimliği kullanın. Geçerli sayfa her zaman vurgulanacak şekilde bu ID özelliğini diğer sayfalardaki doğru menü öğesine taşıyın.
ul # navigation li # youarehere bir {background-color: # 09f; }
Bu stilleri sayfanızda bir araya getirirseniz, sitenizle çalışan yatay veya dikey bir menü çubuğu oluşturabilir, ancak indirmesi hızlıdır ve gelecekte güncellenmesi çok kolaydır. XHTML + CSS kullanarak listelerinizi tasarım için çok güçlü bir araca dönüştürür.
Yatay menülerden daha fazla örnek istiyorsanız, aşağıdakilere başvurun.
- A Şekilli Yatay Menü
- Temel Yatay Menü Şablonu
- Sizinle Bir Tarz Yatay Menü Var
- Burada Bulunan Temel Bir Yatay Menü Şablonu