Web sitenizin gezinme menüsü, ister üstte yatay bir sıra olsun, ister yanlarda dikey bir sıra olsun, bu sadece bir listedir. Tasarım yaparken web gezintisi, bir gezinme menüsü bir bağlantı grubudur. Navigasyonunuzu XHTML+CSS kullanarak programladığınızda, indirilmesi küçük (XHTML) ve özelleştirilmesi kolay (CSS) bir menü oluşturabilirsiniz.
Başlarken
Navigasyon için bir liste tasarlamak için bir liste kullanmanız gerekir. Navigasyon olarak tanımlanan standart bir sırasız liste olabilir. Örneğin:
- Ev
- Ürün:% s
- Hizmetler
- Bizimle iletişime geçin
HTML'ye bakarken, Ana Sayfa bağlantısının bir kimliği vardır.
Buradasınız
Bu, okuyucularınız için geçerli konumu tanımlayan bir menü oluşturmanıza olanak tanır. Şu anda sitenizde bu tür bir görsel ipucu bulundurmayı planlamıyor olsanız bile, bu bilgiyi ekleyebilirsiniz. İpucunu daha sonra eklemeye karar verirseniz, sitenizi hazırlamak için daha az kodlamaya sahip olursunuz.
olmadan CSS stili, bu XHTML menüsü standart bir sırasız listeye benziyor. Madde işaretleri var ve liste öğeleri biraz girintili. Kullanırken
yer tutucu bağlantılar, çoğu tarayıcı bağlantıları tıklanabilir (altı çizili ve mavi) olarak görüntülemez. HTML'yi bir web sayfasına yapıştırdığınızda, navigasyonunuz şöyle görünür:- Ev
- Ürün:% s
- Hizmetler
- Bizimle iletişime geçin
Bu pek bir menüye benzemiyor. Ancak listeye eklenen birkaç CSS stili ile sizi gururlandıran bir menü oluşturabilirsiniz.
Daha fazla dikey menü örneği istiyorsanız, aşağıdakiler için bir web araması yapın:
- Stil sahibi bir dikey menü
- Temel bir dikey menü şablonu
- Buradasınız ile Tarzlı bir dikey menü
- You Are Here ile temel bir dikey menü şablonu
Dikey Gezinme Menüsü
Dikey gezinme menüsünün yazılması kolaydır çünkü normal bir listeyle aynı şekilde görüntülenir: yukarı ve aşağı. Liste öğeleri sayfada dikey olarak görüntülenir.
Menüleri şekillendirirken dışarıdan başlayın ve içeride çalışın. İlk olarak, navigasyonu stillendirin:
ul#navigasyon
Ardından, öğelere ve bağlantılara gidin. İlk olarak, menünün genişliğini tanımlayın. Bu, menü öğeleri uzunsa, öğelerin yerleşimin geri kalanını zorlamamasını veya yatay kaydırmaya neden olmamasını sağlar.
ul#navigasyon { genişlik: 12em; }
Genişliği ayarladıktan sonra liste öğeleri üzerinde çalışın. Bu, arka plan renkleri, kenarlıklar, metin hizalaması ve kenar boşlukları gibi şeyleri ayarlamanıza olanak tanır.
ul#navigasyon li {
liste stili: yok;
arka plan rengi: #039;
üst kenarlık: düz 1 piksel #039;
metin hizalama: sola;
kenar boşluğu: 0;
}
Liste öğelerinin temellerini ayarladıktan sonra, menünün bağlantılar alanında nasıl göründüğü üzerinde çalışın. İlk önce navigasyonu stillendirin:
UL#navigasyon LI A
Ardından, aşağıdakileri stillendirin:
Bir bağlantı
C: ziyaret edildi
bir: fareyle üzerine gelin
A: aktif
Bağlantılar için bağlantıları bir blok öğesi yapın (varsayılan satır içi yerine). Bu, bağlantıları LI'nin tüm alanını kaplamaya ve bir paragraf gibi davranmaya zorlayarak bağlantıların menü düğmeleri olarak biçimlendirilmesini kolaylaştırır. Ardından, aşağıdakileri kaldırın:
altı çizili, metin-dekorasyon: yok; gibi
Bu, düğmelerin daha çok düğmelere benzemesini sağlar. Tasarımınız farklı olabilir.
ul#navigasyon li bir {
Ekran bloğu;
metin-dekorasyon: yok;
dolgu: .25em;
kenarlık-alt: düz 1px #39f;
sağ kenarlık: düz 1px #39f;
}
İle Ekran bloğu; Bağlantılarda ayarlandığında, menü öğesinin yalnızca harfleri değil, tüm kutusu tıklanabilir. Bu da kullanılabilirlik açısından iyidir. Bağlantıların varsayılan mavi, kırmızı ve mordan farklı olmasını istiyorsanız bağlantı renklerini (bağlantı, ziyaret edilen, üzerine gelinen ve etkin) ayarlayın.
a: bağlantı, a: ziyaret edildi { renk: #fff; }
a: üzerine gelin, a: aktif { renk: #000; }
Arka plan rengini değiştirerek fareyle üzerine gelme durumuna biraz dikkat de verebilirsiniz.
a: üzerine gelin { arka plan rengi: #fff; }
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ülenmeyi tercih ettiği gerçeğini dengelemeniz gerekir. Yatay menüde olduğu gibi, navigasyon menü listesini oluşturun:
- Ev
- Ürün:% s
- Hizmetler
- Bizimle iletişime geçin
Yatay bir menü oluşturmak için dikey menüde yaptığınız gibi çalışın. Dışarıdan başlayın ve içeride çalışın. Navigasyonu sol köşede başlatmak için, 0 sol kenar boşluğu ve dolgu ile ayarlayın ve sola kaydırın.
Menünüzün istediğinizden daha fazla veya daha az yer kaplamaması için genişliği ayarlama alışkanlığı edinin. Yatay menüler için bu genellikle tasarımın tam genişliğidir. Ayrıca ekleyebilirsiniz arka plan rengi okumayı kolaylaştırmak için listeye ekleyin.
ul#navigasyon {
yüzer: sol;
kenar boşluğu: 0;
dolgu: 0;
genişlik: %100;
arka plan rengi: #039;
}
Yatay gezinme menüsünün sırrı liste öğelerindedir. Liste öğeleri normalde blok öğelerdir; bu, bu öğelerin her birinin önüne ve arkasına yeni bir satır yerleştirildiği anlamına gelir. Ekranı bloktan satır içine değiştirerek, liste öğelerini yan yana yatay olarak hizalamaya zorlarsınız.
ul#navigation li { ekran: satır içi; }
Bağlantılara, aynı renkler ve metin dekorasyonu ile tam olarak dikey gezinme menüsü gibi davranın. Kullanıcı bir düğmenin üzerine geldiğinde düğmeleri tanımlamak için bir üst kenarlık ekleyin. Ardından, kaldır Ekran bloğu; bu, yeni satırları tekrar yerleştirir ve yatay menüyü yok eder.
Buradasınız Konum Bilgileri
HTML'nin bir başka yönü de bu tanımlayıcıdır:
Buradasınız
Menünüzü, kullanıcılarınızın mevcut konumunu gösterecek şekilde değiştirmek istiyorsanız, farklı bir arka plan rengi veya başka bir stil tanımlamak için bu kimliği kullanın. Geçerli sayfanın her zaman vurgulanması için bu öznitelik kimliğini diğer sayfalardaki doğru menü öğesine taşıyın.
Bu stilleri sayfanızda bir araya getirirseniz, sitenizle uyumlu, indirmesi hızlı ve güncellemesi kolay yatay veya dikey bir menü çubuğu oluşturabilirsiniz. XHTML+CSS kullanmak, listelerinizi tasarım için güçlü bir araca dönüştürür.
Daha fazla yatay menü örneği istiyorsanız, aşağıdakileri web'de arayın:
- Stil sahibi bir yatay menü
- Temel bir yatay menü şablonu
- You Are Here ile şık bir yatay menü
- You Are Here ile temel bir yatay menü şablonu