Yeniden merhabalar. t'infection.com'da birkaç kez Xhtml/Css bileşimine sahip menüler yapmış ve sizlerle de nasıl yapılacağını paylaşmıştık. Bu makalemizde yine bir menü tasarımını birlikte oluşturacağız. Ancak bu sefer ki menümüz diğerlerinden biraz daha profesyonel olacak. Zira bu menümüzde Xhtml/Css'den daha iyi faydalanacak, menümüzü ikonlarla destekleyecek ve W3C standartlarına uygun bir kod yazımı elde edeceğiz.

Menümüzün yapısal tasarımını hazırlarken Html'de çokça kullandığımız Ul ve Li etiketlerinden faydalanacağız. Bu etiketlerin yazılımını düzgün bir şekilde yaptıktan sonra Stil dosyamızla bu etiketlerin değerlerini düzenleyeceğiz. Her zaman olduğu gibi Xhtml kodumuz gayet basit olacak, görünümümüzü de Css kodlarımızla şekillendireceğiz. Menümüzü oluşturmak için klasik olarak yine ihtiyacımız olan şey boş bir editör sayfası. Ben yine sizlere Notepad++ tavsiye edeceğim. Tabi klasik alışkanlarımızdan vazgeçemiyoruz, siz yine de kendi editörünüzü kullanmaya devam edin. :) Sözü fazla uzatmadan hemen menümüzü yapmaya başlayalım.

Makalemizin başında Ul ve Li etiketlerinden faydalanacağımızı söylemiştik. Menü yapımızda göreceğiniz üzere ul ve li etiketlerinin sıralı başlangıç ve kapanışı ile menümüzü kod olarak inşa ediyoruz. Şimdi aşağıya menümüzün Xhtml kodlarını yazalım.

Yukarıdaki kodlarda gördüğünüz üzere bir Ul etiketi başlattık ve daha sonra gelen Li etiketleriyle menümüzün asıl görünecek bağlantılarını li içinde a etiketiyle tanımladık. Tabi menümüzün ana zeminini oluşturan menu isimli div yapısını da en başta tanımladık ki menümüzün sınırları belli olsun. Yapı bakımından karmaşık birşey yok sanırım.

Şimdi menümüzde yazmış olduğumuz Html etiketlerini stil dosyamızda tanımlayalım. Burada ayrıca bir parantez açmak istiyorum. Şayet bir tasarım yaparken Xhtml/Css kodlama yapmam gerekirse (ki bu en basit menüden en karmaşık Xhtml/Css sayfaya kadar ne olursa olsun) öncelikle Xhtml kodlarını yazmayı tercih ediyorum. Sizlere de bu tarz makalelerde verdiğim örneklerde göreceğiniz gibi her zaman ilk sırayı Xhtml kodları alır. Tabi önce Css kodları yazılıp bu kodlar üzerine Xhtml kodları da yazılabilir. Ancak ben yıllardır böyle bir kodlama yöntemini kendime daha yakın görüyorum. Çünkü Xhtml ile sınırlarını belirlediğim bir yapıda Css ile düzenleme yapmam daha kolay oluyor.

Lafı fazla uzatmadan Xhtml kodunda yazmış olduğumuz tüm etiketlerin sırasıyla stillerini yazalım.

Css kodlarında gördüğünüz üzere öncelikle menü isimli div etiketimizi tanımlıyoruz. Burada menümüzün arkaplanının menu_back.gif olmasını istedik ve yüksekliğini ayarladık.

Daha sonra menu isimli div'in içinde açılacak olan ul etiketinin değerlerini belirliyoruz. Ul etiketinin margin ve padding değerlerini 0 yaptık. Sonrasında ise menu div içinde çağrılan li etiketini düzenliyoruz. Burada dikkat edeceğimiz husus görünümün yani display parametresinin inline olması. Inline değerini kullanıyoruz ki menümüzün ögeleri birbirini izlesin. Şayet bu parametreyi block olarak alırsak menü birimlerimiz birbirinin altına kayacaktır. Sonrasında line-height değerini 40px olarak ayarlıyoruz. Bunu yapmamızın nedeni menu isimli div'e arkaplan olarak atadığımız menu_back.gif isimli resmin 40px yüksekliğe sahip olması. Böylelikle menü birimlerimiz arkaplan üzerinde ortalanmış bir şekilde görünecek.

İşin belkide en öldürücü kısmı tabi ki menümüzün bağlantıları. Xhtml kodlarında gördüğünüz gibi menu li a ile menü birimlerini tanımladık. Bu etikete atayacağımız değerler menümüzün görünümünü büyük oranda şekillendirecek. Tabi sonrasında a etikenin a:hover özelliğinden yararlanarak menümüze fare ile geldiğimizde nasıl bir görünüm alacağını da belirliyoruz.

Bu aşamadan sonra menümüz büyük oranda şekillendi. Ancak makalemizin başında söylediğimiz gibi menümüzü küçük ikonlarla destekleyeceğiz demiştik. Peki bu ikonları yapıları belli olan bir Css dosyasında nasıl tanımlayacağız? Zira menümüz bu haliyle yeni bir Css koduna ihtiyaç duyuyor.

Aslında olay çok basit. Sadece kullanmış olduğumuz menu li a etiketine yeni Css sınıfları ekleyeceğiz. Hatta bu sınıfları öyle inşa edeceğiz ki li class="sinifismi" değeri vererek her şekillendirdiğimiz li a etiketinin görünmesini sağlayacağız. Şimdi dilerseniz sadece gerekli bu alanı yazalım.

Yukarıda yazan koda baktığınızda menu li a etiketine .anasayfa isimli bir Css sınıfı dahil ettik. Normal kodlarımızdan farklı olarak bir arkaplan resmi atadık. Bu arkaplan resmi bizim küçük ikonumuz tabi ki. Başka hiçbir değerle oynamadık. Bu şekilde kodumuzu yazdıktan sonra Xhtml kodu üzerinde Anasayfa bağlantısının li etiketine şunu ekliyoruz.

Böylelikle Css olarak tanımladığımız sınıfı Xhtml koduyla çağırmış olduk. Atamadan sonra menümüzün anasayfa yazan bölümü değişmiş olmalı.

Oluşturduğumuz menüye ait örnek sayfada yazılmış olan tüm sınıfları görebilirsiniz. Ayrıca menümüzün son halini de bulabilirsiniz. Makalemizin sonuna indirme adreslerini yazacağım. Siz bu menüyü ikonları değiştirerek, arkaplanları, hover renklerini değiştirerek dilediğiniz gibi şekillendirebilirsiniz. Menü tasarım mantığını kavramanız açısından kodları incelemenizi tavsiye ediyorum. Son olarak makalemizde kullandığımız küçük ikonlarımızın kaynağını FamFamFam sitesinde bulabilirsiniz.

Umarım sizler için faydalı olmuştur... (Yakın bir zamana kadar sitemizde yazmış olduğumuz bu teknik anlatımlı makaleleri t'infection.com Atölye bölümünde toplayacağım, o yüzden şimdilik örneklerin yeri site üzerinde biraz karışık. İlerleyen günlerde yeni bir alan açıp düzenlemesini yapacağım.)

Menü Örneği | Menüyü İndir (7kb)