Yukarıdaki pencere bölgesinde gösterilen menü ile başlayalım.
Bu menü için zaten birçok ön çalışma yapmışsınız. Mutlaka renk geçişini hatırlarsınız, tek piksel grafik olarak kaydedildi. İşte bu kullanılmak üzere geliyor. Ancak önce menü alanı için uygun HTML yapısı oluşturulmalıdır. Görünüşü şu şekilde olabilir:
<div class="header"> <div class="header-top"> <h1>Mali Müşaviriniz</h1> </div> <div class="topmenu"> <ul> <li><a href="index.html">Anasayfa</a></li> <li><a href="#">Hakkımızda</a></li> <li><a href="#">Nasıl Çalışırız</a></li> <li><a href="#">İletişim</a></li> <li><a href="#">Hakkımızda</a></li> </ul> </div> <div class="header-img"> </div> </div>
Arka planın düzenlenmesi için tek piksel grafik eklenir, ve dikey olarak, elementin tamamı doldurulacak şekilde tekrar edilir.
.topmenu {
background-image: url(../images/menue.jpg);
background-repeat: repeat-x;
width: 978px;
height: 37px;
float: left;
}
Sonrasında menü biçimlendirilebilir. Temelde dikkat edilmesi gereken özel bir şey yoktur. Bu tür menülerde asıl belirleyici olan genellikle şunlardır:
• Noktalama işaretlerini list-style-type: none; ile gizleyin.
• Listenin girdilerinin yan yana görüntülendiğinden emin olun.
Burada – artık biliyorsunuz ki – grafikle gerçeklenen bir renk geçişi kullanıyorum. Şu anda menüler için birçok başka seçenek mevcut. Örneğin jQuery gibi JavaScript frameworklerini düşünebilirsiniz. Tüm bu seçenekleri burada sunmak tabii ki sınırları aşardı. Ancak birçok online üreteci artık mevcut, böylece birkaç tıklamayla menüler oluşturmak mümkün. Bu seçeneklerden bir tanesine – en parlak olanı olup olmadığına dair bir değerlendirme yapmadan – şuradan ulaşabilirsiniz: http://www.cssmenubuilder.com/.
Ben ise aşağıdaki varyantı seçtim:
.topmenu ul {
width: 100%;
height: 37px;
list-style-type: none;
}
.topmenu ul li {
height: 37px;
float: left;
padding-right: 25px;
padding-left: 25px;
}
.topmenu ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 37px;
color: #fff;
text-decoration: none;
display: block;
height: 37px;
float: left;
padding-right: 20px;
padding-left: 20px;
}
.topmenu ul li a:hover {
background-image: url(../images/menue-hover.jpg);
background-repeat: repeat-x;
background-position: left top;
}
Aslında esas olan yalnızca Hover durumudur. Bu olay gerçekleştiğinde farklı bir arka plan grafik görüntülenir.
Sağ Menü
Web sitesinde yukarıda olduğu gibi, sağ pencere bölgesinde de bir menü bulunmaktadır.
Bu menü content-right sınıfına sahip div alanında yer almaktadır. Sayfanın geliştirme aşaması için oraya yalnızca sahte içerikler ekledim.
<div class="content-right"> <h2>Ana Menü</h2> <ul> <li><a href="#">Bağlantı 1</a></li> <li><a href="#">Bağlantı 2</a></li> <li><a href="#">Bağlantı 3</a></li> <li><a href="#">Bağlantı 4</a></li> <li><a href="#">Bağlantı 5</a></li> <li><a href="#">Bağlantı 6</a></li> <li><a href="#">Bağlantı 7</a></li> <li><a href="#">Bağlantı 8</a></li> <li><a href="#">Bağlantı 9</a></li> <li><a href="#">Bağlantı 10</a></li> </ul>
Alan ilk olarak uygun yere ve istenen boyutta konumlandırılır.
.content-right {
width: 210px;
float: right;
padding-right: 20px;
margin-top: 20px;
border: 1px solid #eee;
}
Sıradaki adım gerçek menünün tanımının yapılmasıdır. Bu sefer girdiler dikey olarak sıralanır. Yalnızca noktalama işaretlerini gizlediğinizden emin olmanız yeterlidir. Menünün geri kalan tasarımı size kalmıştır.
.content-right ul {
list-style-type: none;
}
.content-right ul li {
padding-left: 45px;
padding-top: 4px;
padding-bottom: 4px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #ccc;
}
.content-right ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;
text-decoration: none;
text-align: left;
display: block;
}
.content-right ul li a:hover {
color: #0b90d6;
}Şimdi tarayıcıda şu görüntü oluşmalıdır:
Alt menü
Web sitesinin alt kısmında başka bir menü olacak. PSD-Tutorials.de'de genel bilgilere bağlantılar sağlamak için bu tür bir menü kullanılıyor.
Websitemizde bir telif hakkı uyarısı da bulunmaktadır. Her iki şey de genellikle web siteleri için tipiktir. Öncelikle HTML yapısı.
<div class="bottom"> <ul> <li><a href="index.html">Ana Sayfa</a></li> <li><a href="#">Hakkımızda</a></li> <li><a href="#">Yenilikler</a></li> <li><a href="#">Kontrol Merkezi</a></li> <li><a href="#">İletişim</a></li> <li><a href="#">Hakkımızda</a></li> <li><a href="#">Site Haritası</a></li> </ul> <p>© Telif Hakkı 2014 PSD-Tutorials.de tarafından</p> </div>
Bu basit bir ul listesidir. Her liste öğesi bir menü öğesini içerir. ul listesinin altında, telif hakkı uyarısı bulunduğu bir p öğesi vardır. Şimdi sadece CSS sözdizimi eksik.
.bottom {
background-image: url(../images/footer.jpg);
background-repeat: no-repeat;
background-position: left top;
text-align: center;
width: 1000px;
height: 110px;
float: left;
}
Altbölümü nasıl tasarladığınıza tamamen siz karar verirsiniz. Ben yine bir renk geçişini kullanıyorum. Ancak basit bir arka plan rengi veya doğrudan CSS3 sözdizimini de kullanabilirsiniz. Benim grafik varyantımda önemli olan şey, background-repeat: no-repeat; ile tekrarlamanın önlenmesidir.
Öncelikle sonucu inceleyin:
Burada dikkat çeken şey, her bir menü öğesinin yanında görünen beyaz çizgilerdir. Bu, her birinin sol kenarına uygulanan farklı border-left belirlemeleriyle tanımlanır, ki bu da aslında belirlemelerin her birinin sol kenara uygulandığı anlamına gelir.
Genel olarak alt menü için sözdizimi şöyledir:
.bottom ul {
margin-top: 30px;
list-style-type: none;
}
.bottom ul li {
display: inline;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #fff;
}
.bottom ul li a {
font-size: 12px;
color: #fff;
text-decoration: none;
padding-right: 15px;
padding-left: 15px;
}
.bottom ul li a:hover {
text-decoration: underline;
}
.bottom p {
font-size: 12px;
color: #fff;
margin-top: 40px;
}
.bottom a {
font-size: 12px;
color: #fff;
margin-top: 40px;
}
.bottom a:hover {
text-decoration: none;
}
Burada üst menüye karşı özel bir durum bulunmaktadır. Aslında, Hover durumunda başka bir grafik yüklenmez. Ancak ziyaretçilere farelerini bir bağlantı üzerine getirirken bir vurgu yapmak için, Hover olayı gerçekleştiğinde her bir bağlantı altı çizilir.
Bu öğreticinin sonunda web sitesine temel adımlar atılmıştır. Şimdi eksik olan şey, sayfayı süslemektir. Daha fazlası gelecek öğreticilerde ele alınacaktır.
