Dikey CSS Menü: kendiniz yapıyor

Bazı yöneticileri zaten mevcut karalama basit elementlerden oluşturmak için zaman harcamak istemiyorum. Uzun olmuştur şey üzerinde zaman kaybetmeden anlamı yok olduğuna inanıyoruz. Aslında, sadece HTML ve CSS mastering olanlar için, çalışmalarının iyi bir anlayışa sahip olmak kendinize bir çok şey yapmak önemlidir. Bu menüye geçerlidir. Dikey CSS menüler oluşturun. Bu JavaScript ve JQuery kullanmaksızın, sadece HTML ve CSS dayalı olacaktır. Her menü sitenin sayfalarına yönlendiren bağlantılara listesidir.

temel adımlar

Basit oluşturmak için dikey menü CSS, aşağıdaki adımları gerekir:

1. Öncelikle, menü olacak olan bağlantıları (kod HTML kullanarak) bir listesini belirler. Örneğin aşağıdaki gibidir, onlara bir ad verin:

1. Ana.
2. Geçmişimiz.
3. Kılavuzu.
4. Hizmetleri.
5. Kişiler.

CSS yardımıyla istediğiniz gibi 2. Sonra bağlantıları Styling.

Biz yazmak , HTML kodunu my_Vmenu.html dosyasında tutmak ve tarayıcıda nasıl görüneceğini görmek:

Bu bizim menünün temelinde (iskelet) 'dir. # 1, # 2, vs. referans ile bu değiştirilmelidir. Bir tarayıcıda nasıl göründüğüne bakın. Burada hoşuna gitmeyecek resmi. Şimdi tam bir dikey CSS menüler yapmak için, stil unsurlarını tanımlamak için başlamalıdır.

Açıklama stilleri

Sitenin gibi önemli bir unsuru görünümünü iyileştirmek için istediğiniz her şeyi ayarlanmış bir dosya my_Vmenu.css oluşturun. İşte dikey CSS menüleri canlandıracak giriş hangi koddur. Bu ve yeni dosyayı yazma, sonra daha yakından çekmek verilmiştir ana hatları anlamını bakacağız.

DETAYLI AÇIKLAMA kullanılan biçim

Şimdi CSS dikey menü detayları düşünün:

list-style-type, belirteçlerin listesini kaldırmak için izin verir. marjı ve padding "0" ayarlayarak listesinde ekstra dolgu çıkarın. HTML kodu da görüleceği gibi, menü listesi ve stiller CSS kullanılarak tanımlanır.

ül # my_Vmenu - Tüm listenin genel tarzı.

ül # my_Vmenu li a - li etiketi arasındaki stil bağlantıları.

ül # my_Vmenu li a: hover - Bir halkın üzerine geldiğinde bir anda menü öğeleri dikkate alınarak türünün açıklaması.

ül # my_Vmenu li bir yayılma - metin açıklaması (başlık menüsü).

Bu my_Vmenu.css my_Vmenu.html dosyaları ve aynı dizinde muhafaza edilmelidir unutmayın. Ancak, bunlar farklı klasörlerde yer alabilir, ama sonra my_Vmenu.css için my_Vmenu.html dosya yolunda kayıt önemlidir. çünkü bu soruna yeni gelenler genellikle dikkatli olun.

Stil html-dosyasındaki head etiketleri arasına bağlanmalıdır. menu_1.png ve menu_2.png - Bu normal durumuna ve vurgulu resim menü öğesi için resim.

Görüntüler için ayrı bir klasörde görüntüleri kaydetmek o my_images isim, ama sonra CSS kodunu ayarlayın daha iyidir. Bu görüntüler gösterildiği yerler yaz, onlar bu dizine şunlardır: url (my_images / menu_1.png) ve URL (my_images / menu_2.png).

CSS kodunda tanımlanan özelliklerin geri kalanında, kolayca anlamak için. Onlar bizim menü görünümünü tanımlar. Eğer fareyi üzerlerine getirdiğinizde zaman öğelerin genişlik ve yükseklik normal durumuna aynı öğeler için belirtilen fark etmek kolaydır ve. Yazı tipi boyutu 18px, dolgu yer adlarının farklı taraflardan girinti belirtir. Ekranda genişliği ve dolgu ayarlamak için ekran birimini ayarlamak sağlar.

Bizim dikey menü

Gördüğünüz gibi, dikey CSS menüler kolayca oluşturun. Bilginin verilere dayanarak bunu güzel ve web sitesine ziyaretçilere çekici hale getirmek mümkün olacak! Sitenizi tamamlayacak hayal ve sonra şık bir menüyü kullanın.