JTY/B4/D10 - Menü Ayarlamaları ve Menüde Suffix Kullanımı

Bu derste de, bir önceki dersin son kısmında yaptığımız işlemin aynısını uygulayacağız. Fakat farklı suffix değerleri sayesinden menülere birbirinden farklı görünüm verebileceğiz.

Şimdi en tepedeki ustmenu olarak pozisyon atadığımız yerdeki menüyü düzenleyelim.
Öncelikle ustmenu pozisyonunda bir modül yayınlıyoruz ve suffix bölümüne -ustmenu yazıyoruz

Sitemize baktığımızda ise modülün yayınlandığını fakat menü öğelerinin yanyana çıkmadığını görüyoruz. Bunun içinde özel css tanımlamaları yapacağız.

Burada yapacağımız tanımlamada suffix kısmına yazdığımız -ustmenu kısmını yazarak kodlamaya başlıyoruz. Burada yazacağımız kodlar, bir önceki derste yazdığımız kodlarla neredeyse aynı. Oradaki kodlarda -anamenu olarak tanımladığımız kodları alıp, yapıştırıyoruz. Ardından suffix kısmını düzenliyoruz. Sadece .moduletable-ustmenu ul.menu li olan bölümde yazı font büyüklüğünü
ve hizalamaları farklı olduğu için düzenleme yapmamız gerekecek. Alttaki iki bölüm üstteki anamenu ile aynı değerlere sahip.

 .moduletable-ustmenu ul.menu, 
 .moduletable-ustmenu ul.menu ul {
 text-align:left;
 float: left;
 }
 
 .moduletable-ustmenu ul.menu li{
 text-align:left;
 float: left;
 list-style: none;
} 

Buradaki farklılık ise padding değerleri, font değeri ve color değeri. Sağdan soldan hizalamaları değiştiriyoruz ve yazı puntosunu 12 olarak ayarlıyoruz. Yine alt bölümdeki a ve a:hover bölümleri color tanımlaması hariç üstte yaptığımızın aynısı olduğu için aynen alıyoruz. 

 .moduletable-ustmenu ul.menu li {
 background: url(../images/ustmenu-ayrac.png) no-repeat right top;
 padding-right: 15px;
 padding-left: 5px;
 font: normal 12px/28px Arial, Helvetica, sans-serif;
 color: #5e5e5e;
 } 
 
 .moduletable-ustmenu ul.menu li a{
 color: #5e5e5e;
 text-decoration: none; 
 }
 
 .moduletable-ustmenu ul.menu li a:hover{
 text-decoration: none; 
 } 

Gördüğünüz gibi üstmenüde tam istediğimiz şekilde yayında. Yukarıdaki kodları değiştirerek yazı büyüklüğünü, yazı rengini, ayraç resmini değiştirebilirsiniz.

Sitemizin anasayfasındaki görünüm hemen hemen bitti sayılır. Şimdi ise iç sayfalardaki içerik ve bileşen görünümlerine dair kodları yazmaya geçelim. >>

Ders henüz yayınlanmadı