Bazı yöneticileri zaman kaybetmek istemiyorzaten mevcut olan sıfırdan basit elemanların geliştirilmesi. Uzun zamandır geçirdiği zamanın boşa gitmesinin bir anlamı olmadığını düşünüyorlar. Aslında, yalnızca HTML ve CSS'de uzmanlaşanlar için, çalışmalarını iyi anlamak için birçok şeyi kendileri yapmak önemlidir. Bu aynı zamanda menü için de geçerlidir. Dikey bir CSS menüsü oluşturun. Javascript ve JQuery kullanmadan sadece HTML ve CSS tabanlı olacaktır. Her menü, sitenin sayfalarına yönlendiren bağlantıların bir listesidir.
Ana adımlar
Basit bir dikey CSS menüsü oluşturmak için aşağıdaki adım dizisi gereklidir:
1. Öncelikle, menünün içereceği bağlantılar listesini (HTML kodunu kullanarak) tanımlayın. Onlara aşağıdaki gibi isimler verin:
- Ev.
- Bizim hikayemiz.
- Liderlik.
- Hizmetler.
- Kişiler.
2. Ardından, CSS kullanarak bağlantıları istediğiniz gibi biçimlendirin.
HTML kodunu yazalım, my_Vmenu.html dosyasına kaydedelim ve tarayıcıda nasıl göründüğüne bakalım:
Bu menümüzün temeli (iskeletidir). # 1, # 2 vb. bağlantılarla değiştirilmelidir. Her şeyin bir tarayıcıda nasıl göründüğüne bakın. Resmi beğenmeyeceksin. Şimdi, tam teşekküllü bir dikey CSS menüsü yapmak için öğelerin stillerini açıklamaya başlamamız gerekiyor.
Stil Tanımı
My_Vmenu dosyası oluşturun.css, sitenin bu kadar önemli bir öğesinin görünümünü iyileştirmek istediğinizi ayarlayabilirsiniz. Aşağıda, dikey CSS menüsünü canlandıracak kod gömme bulunmaktadır. Oluşturulan dosyaya yazın ve burada verilen ana satırların ne anlama geldiğine daha yakından bakalım.
Kullanılan stillerin ayrıntılı açıklaması
Şimdi dikey CSS menümüze daha yakından bakalım:
ul # my_Vmenu, tüm listenin genel stilidir.
ul # my_Vmenu li a - li etiketleri arasındaki bağlantı stili.
ul # my_Vmenu li a: hover, bir kişi bunlardan birinin üzerine geldiğinde söz konusu menüdeki öğe türlerinin bir açıklamasıdır.
ul # my_Vmenu li a span - metin açıklaması (menü adları).
My_Vmenu.css ve my_Vmenu dosyalarının olduğunu unutmayın.html tek bir dizine kaydedilmelidir. Ancak, farklı klasörlerde bulunabilirler, ancak daha sonra my_Vmenu.css dosyasının yolunu my_Vmenu.html dosyasında kaydetmek önemlidir. Yeni başlayanlar genellikle bununla ilgili sorunlar yaşadığından dikkatli olun.
Stil, html dosyasında head etiketleri arasına dahil edilmelidir. menu_1.png ve menu_2.png, normal durumda ve üzerine gelindiğinde bir menü öğesini görüntülemek için kullanılan resimlerdir.
Resimleri ayrı bir klasöre kaydetmek daha iyiresimler, my_images olarak adlandırın, ancak CSS kodunu düzeltin. Bu resimlerin bu dizinde olduğu belirtildikleri yere yazın: url (my_images / menu_1.png) ve url (my_images / menu_2.png).
CSS kodunda açıklanan özelliklerin geri kalanında,anlaması kolay. Menümüzün görünümünü tanımlarlar. Normal durumdaki noktalar için ve fareyi üzerlerine getirdiğinizde, noktaların genişliğinin ve yüksekliğinin aynı olduğunu görmek kolaydır. Yazı tipi boyutu 18 pikseldir, dolgu, öğe başlıklarının farklı taraflarındaki dolguyu ayarlar. Display özelliği, genişliği ve dolguyu ayarlamak için ekranı bloklar halinde ayarlamanıza izin verir.
Dikey menümüz
Gördüğünüz gibi, dikey CSS menüleri oluşturmak kolaydır. Bilgi tabanına dayanarak, İnternet kaynağınızın ziyaretçileri için güzel ve çekici hale getirebilirsiniz! Hayal gücünüzü kullanın, ardından şık bir menü sitenizi süsleyecektir.
