Xhtml & Css ile Basit Bir Menü Yapalım
W3C standartlarında kodlama yapmaya başlamadığım zamandan bu yana klasik table aç, tr aç, td aç kapat gibi basit menüler yapıyordum. Açıkçası bunları yaparken hiç zorluk çekmiyordum çünkü klasik Html yazımına hakim bir insanım ve biraz Css ile menüme dilediğim özelliği katabiliyordum. Ancak standartlara uygun kod yazma dönemine geçişle birlikte table ve td gibi etiketleri yavaş yavaş terketmeye başladım. Şu ana kadar tasarımlarımda çokça kullandığım ve zaman zaman sitemin tüm omurgasını yaptığım table kodunun bazı parametreleri bildiğiniz gibi standart kod yazarken insanı çileden çıkarabiliyor. Bunu en çok yaptığım menülerde hissettim. Birçok kez Xhtml ve Css’e uygun bir menü kodlamayı denedim ve açıkça söylemem gerekirse table ile yaptığım menülerden daha kolay oldu. Bu yazımda sizlere biraz teknik ayrıntıya girerek bir Xhtml, Css menünün nasıl yapılacağından bahsedeceğim.
Öncelikle bu menümüzü oluşturmanın iki ayağı vardır. Birincisi Stil dosyamız, ki bu dosyamızda menümüzün ne şekilde görüneceğini ne kadar boyutta olacağını, rengini, arkaplan rengini (belki de resmini) yazıtipini ve bilimum özelliklerini belirliyoruz. Daha sonra stil dosyamızda belirttiğimiz css kodlarımızı bir Html dokümanda sergilemek kalıyor geriye. İsterseniz önce ben Html dosyamızdan başlamak istiyorum. Klasik Xhtml yazım şeklinde olacağı için bu kod standartlara uygun görünecektir. Şimdi aşağıdaki kodu dikkatle inceleyin.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>deneme menü</title>
<style type=”text/css” media=”screen”>
@import url(style.css );
</style>
</head>
<body>
<div class=”menu”>
<ul>
<li><a xhref=”http://t-infection.com/#”>Anasayfa</a></li>
<li><a xhref=”http://t-infection.com/#”>Hakkımda</a></li>
<li><a xhref=”http://t-infection.com/#”>Portfolyo</a></li>
<li><a xhref=”http://t-infection.com/#”>Referanslarım</a></li>
<li><a xhref=”http://t-infection.com/#”>İletişim</a></li>
</ul>
</div>
</body>
</html>
Gördüğünüz gibi öncelikle doküman tipimi belirledim ve Geçişli Doküman Tipi ile tanımlı bir Xhtml dosyasının yazımına başladım. Sonrası malumunuz Head, Title ve Style etiketlerinin açılıp kapanması. Bunları zaten Html 4.01 yazımından biliyoruz. Bu kodları yaptıktan sonra Body etiketimi açtım ve artık menümün görüneceği ana alanı kodlamaya başladım. Ben menümü yaparken öncelikle Html dosyamı kodluyorum böylelikle Css’de nasıl bir mimariye gideceğimi belirlemiş oluyorum. Bunu tam tersi de olabilir ancak ben diğer türlü çok kod yanlışlığı yapıyorum. Style dosyasını kodlarken daha önce oluşturduğum Html dosyasından referans almak daha kolay oluyor. Söylediğim gibi Body kodumuzu açtık ve artık menümüzün görünen alanı için kodlamaya başlıyoruz.
<div class=”menu”>, bu etiket ile benim bir menu isminde css sınıfına sahip olduğum (olacağım) anlamına geliyor. Bu sınıf sayesinde menü alanım belirlenmiş oluyor ve menü içeriği bundan sonra süregeliyor. Daha sonrasında <ul> etiketini kullanarak bir unordered list açıyorum. Yani düzensiz bir listeye başlangıç yapıyorum. Bunu değişik etiketlerle de yapabilirim ancak böylesi hem kolay geliyor hem de bugüne kadar gördüğüm birçok menü sisteminde ul etiketi neredeyse tümünde kullanılmış. Bu yüzden bende menülerimi ul ile kodlamaya başladım. Lafı fazla uzatmadan devam edelim. Ul etiketimden sonra artık listemdeki görünür öğelerin sıralanacağı Li etiketini açtım ve daha sonrasında A etiketiyle bir bağlantı ekledim ve önce A daha sonra Li etiketimi kapattım. Bu listeyi istediğim kadar uzatabilirim bu alan benim menümün görünür kısmı olacak ve bağlantılarımı ben dilediğim kadar çoğaltabilirim. Yukarıdaki örnekte Anasayfa, Hakkımda, Portfolyo, Referanslarım, İletişim gibi bağlantılar kullandım. (Klasik menü bağlantıları işte :)
Sonrası malumunuz üzere tüm etiketlerimin sırasıyla kapatılmasında. Ul, Div, Body ve Html etiketlerimi kapattıktan sonra bu dosyayı menu.html veya index.html gibi bir isimle istediğim bir klasöre kaydediyorum. Buraya kadar menümüzün Html ayağını tamamlamış oluyoruz ve asıl düzeneğimizi sağlayacağımız style.css dosyasına geçiyoruz.
Css dosyasının açılımını vermeden önce şunu belirtmek istiyorum ki yukarıdaki menüde kullandığım Html etiketlerinin her birini tanımlayarak işe başlıyorum ve bunu hiyerarşik bir sırada sürdürüyorum. Nasıl ki Html dosyasında öncelikle Div etiketim ile menü alanımı açtıysam Css dosyamda da öncelikle Div’e ait menü sınıfını kodlayarak başlıyorum. Aşağıdaki kodları incelerseniz ne demek istediğimi anlayacaksınız.
.menu {
width:200px;
background:transparent;
color:#333;
padding:0px;
margin:0px;}
.menu ul {text-decoration:none;}
.menu li {
text-decoration:none;
list-style:none;}
.menu ul li a {
text-decoration:none;
font:12px arial, verdana, helvetica, sans-serif;
color:#F91364;
background:#fff;
display:block;
width:200px;
text-align:left;
padding:5px 5px 5px 5px;
border-bottom:1px solid #eee;}
.menu ul li a:hover {
text-decoration:none;
font:12px arial, verdana, helvetica, sans-serif;
color:#fff;
background:#333;
display:block;
width:200px;
text-align:left;
border-bottom:1px solid #ccc;}
Evet menüme ait stil dosyası da yalnızca bu kadar. Şimdi tek tek stil dosyamızda ne gibi kodlar yazdığımızı anlatalım. Öncelikle menu isimli sınıfımızı tanımladık. Bunu yaparken önce nokta sonra da menu ismini yazarak sınıf tanımlama işlemini başlattık. 200 piksel genişliğinde, arkaplanı transparan renkte ve margin değerleri 0 olan bir alan oluşturduk. Daha sonrasında ise .menu ul {} şeklinde menu sınıfımızdaki ul etiketinin nasıl görüneceğini tanımladık. Ben burda sadece yazıların alt çizgisiz olmasını istedim ve tanımlayı kapattım. .menu li tanılamasında ise bu sefer listemin başında yer alacak olan içi dolu daireyi list-style:none diyerek iptal ettim. Birçok menüde bu alanın görünmesini istemeyiz.
Bu tanımlardan sonra Xhtml kodlarıma tabi kalarak devam ettiğim Css kodlamasında .menu li a tanımlamasına sıra geldi. İşte menümüzün görünür öğelerinin şekillendiği asıl alan burası. Burada menümün blok halinde görünmesini, hafif bir pembe renkte olmasını, arkaplanının beyaz olmasını, linkimin metin bölümünün tüm yönlerden 5px boşlukta olmasını, yazıtipinin arial (ana font olarak kalmasını istedim) ve 12 piksel büyüklükte olmasını istedim. Bu değerleri yazdıktan sonra yine aynı tanımlamanın devamı olacak olan .menu li a:hover bölümünde ise sadece arkaplan ve yazı renkleri, kenarlık renklerini değiştirdim. Yaptığım şey sadece renkleri değiştirmek oldu. Menünün görünümü ya da işleyişini engelleyecek bir kodlama yapmadım. Bu şekilde de Css dosyamızı tamamlamış olduk. Artık dosyalarımızı kaydedip menümüzü görüntüleyebiliriz.
Temelde mantığı Xhtml ve Css kodlarının semantik bir şekilde düzenlenmesi olan bu menünün değişik varyasyonlarını siz de yapabilirsiniz. Bunun için birkaç Css tekniği bilmek yeterli. Örneğin yukarıda vermiş olduğum menü örneğinde arkaplana resim atayabilir, fontu değiştirebilir, link marjlarını yeniden ayarlayabilir belki de küçük bir javascript ile daha dinamik özellikler ekleyebilirsiniz. Burada yapılacak olan müdahale benim dahilimde değil sizin elinizdedir. İleride menünüzün bir bölümünü değiştirmek isterseniz sadece Css dosyasını yada sadece Xhtml dosyasını düzenleyerek bu işlemi yapabilirsiniz.
Bu menü sistemi; başlangıç seviyesinde olan arkadaşlarımız için semantik bir kod yazımının nasıl olabileceğini göstermek açısından ideal olabilir. Ayrıca yine standartlara bağlı bir kodlamanın hem Internet Explorer hem de Firefox tarayıcılarda aynı görüntüyü verdiğini görmek onları bu iş için yüreklendirebilir. Başka bir makale de görüşmek üzere (saat 04:55 bitti, t-infection.com’un bir yılını doldurmasını şimdi kutlayabiliyorum)
8 yorum yapılmış
Yorum Yapın
Volkan abi yine coşmuşsun!!
Teşekkürler ;)
Merhaba, güzel yazın için teşekkürler. CSS ile ilgili kaynakların ve alternatiflerin çoğalmasu güzel gelişmeler olacağının habercisi. CSS ve XHTML az kodla çok iş mantığından yola çıkılarak uygulandığında tadından yenmez.
Bu konuda kodların daha stabil ve az olabilecek bazı önerilerde bulunmak isterim.
Aşağıda sadeleştirilmiş olan kod daha az parametre ve dolayısı ile daha az byte demektir. Bu en basit uygulamada belki gereksizdir, ancak css dosya boyutunun artması hem yavaşlığa hem de kullanışlı kod yazımını zorlaştırmaya neden olacaktır.
.menu { width:200px; color:#333; padding:0px; margin:0px;}
.menu ul {list-style:none; list-style-position:outside;}
.menu ul li a { text-decoration:none !important; font:12px arial, verdana, helvetica, sans-serif; color:#F91364; background:#fff; display:block; padding:5px; border-bottom:1px solid #eee;}
.menu ul li a:hover { color:#fff; background:#333; border-bottom:1px solid #ccc;}
Tekrar eline sağlık ;)
Denizcim teşekkür ederim, ilgin için sağol.
Ceyhun hocam elinize sağlık, bende kodları bayağı bir sadeleştirebilirdim ancak bunun bir anlatım olduğunu düşünerek kodları hantal bir halde bıraktım açıkçası. Düşündüm ki bu menü daha önce yapmamış olan veya çok az tecrübesi olan insanların okuyabileceği bir anlatım olsun. O yüzden söylediğim nitelikte insanlar görürse ne kadar çok parametre ve değer görürlerse onlar için o kadar iyi olur diye aklımdan geçirmiştim. Kodlardaki sadelik ve hız tabi ki çokça uyguladığım birşey. Değerli yorumunuz için teşekkür ederim. (sitenize yorum yazamıyorum ama elimden geldiğince takip etmeye gayret ediyorum, ah sınavlarım olmasa…)
Hemen Bir Menü Tasarlamanın Kolay Yolu…
Anlatım harika. Paylaşılan bilgi çok faydalı. Hemen herkes bu sayfada aktarılan tecrübeyi takip ederek kısa sürede CSS ve XHTML destekli menü hazırlayabilir.
Sayfadaki bilgileri okumadan önce, yazının en altında verilen bağlantı tak…
Harika bir yazı,tebrikler..
[...] Original post by http://www.t-infection.com/xhtml-css-ile-basit-bir-menu-yapalim/ [...]
ben böyle bir menü oluşturdum ama linklere sub menü nasıl eklerim yardımcı olabilirmisiniz
ben oluşturamadım