Rollover arka plan resimleri ile dikey menü

Eski bir yazıda CSS bir nasıl kullanılacağını gördüm bir mouseover etkisi ile dikey menü fareyi hareket öğeyi işaretlemek için farklı bir arka plan rengini kullanarak.

Bu örnek, yeniden ve bu menünün iki temel özellikler ekleyerek, genişleyen: Gelişmiş erişilebilirlik mermi kullanımı ve tasarım açısından daha iyi bir performans ile.

Burada elde etmek istediğiniz sonucun:

Fare imlecinin ekran örnekte menüsünde ikinci bağlantıyı sabit olduğunu.

Bu iki görüntü adı ve menu_1.gif menu_2.gif vermek için örneğin kullanılır:

boyutu (150X22 piksel) nerelerde ürüne atanan kutusu, yazı tipi boyutunu ve doldurma genişliğine ısmarlama.

Ben düzen ve onun ihtiyaçlarına uygun boyutlara özel görüntüler oluşturmak için okuyucuların davet ediyoruz.

Diyelim ki uygulama, menü çizmek başlıyor. Biz HTML kodu inceleyelim:

 <div id="menu">



    



 <ul>



        



 <li> <a href="#"> Sayfa 1 </ a> </ p>



        



 <li> <a href="#"> 2 </ a> </ p>



        



 <li> <a href="#"> Sayfa 3 </ a> </ li>



        



 <li> <a href="#"> Sayfa 4 </ a> </ li>



        



 <li> <a href="#"> Sayfa 5 </ a> </ li>



    



 </ Ul>







 </ DIV>

Tüm menüler biz bağlantıları içeren bir madde işaretli liste inşa edeceği, "menüsünden" işaretli bir kutu olacak.

Herhangi bir kimliği ve elemanlarının yuvalama tarafından sadece tanımlamalara göre menü öğeleri (liste, liste, link), herhangi bir bağlantı için bir sınıf atamayın.

Uygun açıklamalar eşliğinde CSS aşağıdaki gibidir:

 / * Stilize genel olarak DIV etiketi * /









 p







 {



    



 font-size: 10px;



    



 font-family: verdana;







 }









 / * Menü arka plan ve kutusunun genişliğini atama * /









 # Menü







 {



    



 background: # CCDDEE;



    



 width: 150px;







 }









 / * Menüsünde yer alan UL etiketinden varsayılan stilini silme * /









 # Menü ul







 {



    



 margin: 0px 0px 0px 0px;



    



 list-style-type: none;







 }









 / Menüde * Stilize listeler * /









 # Menü olacak







 {



    



 margin: 0px 0px 0px 0px;



    



 border-bottom: # FFFFFF solid 1px;







 }









 / * Menü listesinde bağlantılar stil atama * /









 # Menü li bir, onlara: hover







 {



    



 display: block;



    



 position: relative;



    



 text-decoration: none;



    



 color: # 192939;



    



 font-weight: bold;



    



 padding: 5px 5px 5px 5px;







 }









 / * Varsayılan olarak bağlantıları arka plan olarak ayarlayın ve mouseover * /









 Orada # Menü







 {



    



 background-image: url (menu_1.gif);







 }







 Hover: # Menü bir irade







 {



    



 background-image: url (menu_2.gif);







 }

Yukarıda belirtildiği gibi, elementlerin iç içe işlemleri, bu stilizasyon görünür tek kurşun kimliği ile kutunun içinde iç içe bir sonucu olarak, menü olduğundan emin olun "menüsünden."

Sitenin tüm diğer mermi varsayılan tarzlarını ya da açıkça CSS ile tayin edecektir.