Menü, sitedeki bölümlerde kullanıcının gezinmesini kolaylaştırmak için kullanılır. Ziyaretçinin dikkatini çekmek için menü işlevsel, kullanımı kolay ve aynı zamanda tüm kaynağın tasarımı ile birleştirilmelidir.
Talimatlar
Aşama 1
Bir menü oluşturmadan önce türüne karar verin. Kullanıcı fare imleci ile üzerine geldiğinde kullanıcıya gösterilecek bir açılır yatay veya dikey kutu oluşturabilirsiniz. Belirli bir menüyü seçerken, ziyaretçilerin onu kullanmasının ne kadar uygun olacağı ve tasarımla nasıl birleştirileceği konusunda rehberlik edebilirsiniz.
Adım 2
Bir menü türü seçtikten sonra, HTML'yi düzenlemek için kullandığınız metin düzenleyiciyi kullanarak sayfa dosyanızı açın. Arayüz öğenizi eklemek istediğiniz kod bölümüne gidin.
Aşama 3
Bundan sonra, bir blok oluşturarak ve kendisine atanan id ile numaralı bir liste oluşturarak bir seçenekler listesi yapın. Örneğin:
- Bağlantı 1
- Bağlantı 2
- Bağlantı 3
Bu örnekte, üç öğeden oluşan madde işaretli bir liste oluşturdum ve bunu ID paneli kimliğiyle bir div katmanına yerleştirdim.
4. Adım
Sayfanızın bölüm bloğuna gidin ve uygun basamaklı stil sayfası menüsünü oluşturun. Yatay bir menü oluşturmak istiyorsanız, ortaya çıkan liste için satır içi özniteliği ekleyebilirsiniz:
#panel ul li {ekran: satır içi; }
Adım 5
Sayfanın tüm uzunluğu boyunca yatay bir çizgi oluşturmak için aşağıdaki kodu kullanabilirsiniz:
#panel ul {sol kenar boşluğu: 0; dolgu: 2 piksel 0; }
6. Adım
Ardından görsel bölmeyi dikdörtgenlere yapabilirsiniz:
#panel ul li a {sol kenar: 3px; sınır: 1 piksel; dolgu: 2 piksel 3 piksel; arka plan: mavi; }
Bu kod, kenar boşluğu öğelerinden metin girintilerini sol kenar boşluğu ve dolgu nitelikleri aracılığıyla ayarlar ve ayrıca liste öğelerinin her biri için bir arka plan rengi ayarlar. Bu örnekte renk mavidir, ancak kendi takdirinize bağlı olarak değiştirebilirsiniz.
7. Adım
Sekmede seçilen geçerli sayfadaki öğeye işaret etmek için uygun parametreleri açık sınıfa ayarlayın:
#menu ul li a # open {arka plan: kırmızı; sınır-alt: 1 piksel; }
Panelde seçilen mevcut sayfa şimdi kırmızı olarak görüntülenecektir.
8. Adım
Değişiklikleri dosyaya kaydedin ve sayfanızı bir tarayıcı aracılığıyla açarak yazılan kodun işlevselliğini kontrol edin. Ek görüntüleme seçenekleri ayarlamak için, nesnenin görünümünü geliştirmek için her zaman CSS veya HTML ekleyebilirsiniz.
