Youtube’da üye girişi yaptıktan sonra üst sağ alanda yer alan navigasyon sadeliği ve etkili görünümü ile çok hoşuma gitti. Bu yazımızda bu tarz bir menü sistemini basit kodlar yazarak nasıl yapabileceğimizi anlatacağız.

UYGULAMA ÖNİZLEME UYGULAMA İNDİR (8kb)

XHTML
Öncelikle her zaman olduğu gibi Xhtml kodlarımızı yazarak başlayalım.

<div id="youmenu">
<ul>
<li><a href="#">Anasayfa</a></li>
<li><a href="#" class="menu">Seçenekler<span>ok</span></a>
<ul class="menualani">
<li><a href="#">Hesabınız</a></li>
<li><a href="#">Mesajlarınız</a></li>
<li><a href="#">Favorileriniz</a></li>
<li><a href="#">İzledikleriniz</a></li>
</ul>
</li>
<li><a href="#" class="cikis">Oturumu Kapatın</a></li>
<br style="clear:both" />
</ul>
</div>

CSS
Şimdi menümüzün görünümünü düzenleyecek olan Css kodlarımızı yazıyoruz.

/* MENÜ STİLLERİMİZİ TANIMLAMAYA BAŞLIYORUZ */

#youmenu {
font:13px arial, verdana, sans-serif;
display:block;
}

/* Menü bağlantılarımızı tanımlıyoruz... */
#youmenu ul a {
text-decoration:none;
color:#333;
display:block;
margin:0px 5px 0px 5px;
padding:4px 10px 4px 10px;
background:#fff;
border-top:1px solid #fff;
border-left:1px solid #fff;
border-right:1px solid #ccc; /* Sağ tarafta 1px solid bir kenarlık bırakıyoruz. */
border-bottom:1px solid #fff;
outline:none;
zoom:1;
}

#youmenu ul a:hover {
text-decoration:none;
color:#333;
display:block;
margin:0px 5px 0px 5px;
padding:4px 10px 4px 10px;
background:#fff url(menuarkaplan.png) repeat-x; /* Arkaplan resmimizi tanımladık */
border:1px solid #666;
outline:none;

-moz-box-shadow:0px 0px 4px #333; /* Fare üzerine gelince bağlantı alanımızın biraz gölge kazanmasını sağlıyoruz */
-webkit-box-shadow:0px 0px 4px #333; /* Gölge işlemini Chrome ve Safari için yapıyoruz. */
box-shadow:0px 0px 4px #333; /* Opera'yı da unutmayalım :) */

/* IE için gölge işlemini yapıyoruz, bundan sonraki alanlarda yer alan gölge tanımlamalarını IE için yine aynı şekilde yapacağız. */
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#333333, offX=1, offY=1, positive=true);
zoom:1;
}

#youmenu li, #youmenu ul {
float:left;
position:relative;
margin:0px;
padding:0px;
list-style:none;
display:block
}

#youmenu li ul { /* Menümüzün alt birimlerini display:none tanımıyla gizliyoruz */
display:none;
position:relative;
}

/* Menümüzde açılacak olan bağlantı birimini işaret etmesi için span etiketine bazı değerler atıyoruz */
#youmenu span {
background-image: url("ok.png") ;
background-repeat:no-repeat;
background-position: center right;
display:block;
float:right;
padding:0;
margin:0;
width:16px;
height:16px;
text-indent:-9999px;
}

/* Bu alandan sonra yapılan tanımlamalar açılır menümüz için... */

#youmenu ul.menualani {
border:1px solid #333;
display:none;
position:absolute;
padding:0px;
margin:2px 0px 0px 5px;
list-style:none;
-moz-box-shadow:0px 1px 2px #666;
-webkit-box-shadow:0px 1px 2px #666;
box-shadow:0px 1px 2px #666;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#333333, offX=1, offY=1, positive=true);
zoom:1;
}

#youmenu ul.menualani a {
display:block;
color:#666;
float:left;
text-decoration:none;
background:#fff;
width:120px;
padding:4px;
margin:0;
border:none;
}

#youmenu ul.menualani a:hover {
display:block;
color:#333;
float:left;
text-decoration:none;
background:#eaeaea;
width:120px;
padding:4px;
margin:0;
border:none;
-moz-box-shadow:0px 0px 0px #333;
-webkit-box-shadow:0px 0px 0px #333;
box-shadow:0px 0px 0px #333;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#333333, offX=0, offY=0, positive=true);
zoom:1;
}

#youmenu a.cikis {color:#2e83ff;border:1px solid #fff}
#youmenu a.menu {color:#333}

jQUERY
Son olarak menümüze dinamik etkisini katacak olan jQuery kodlarını yazıyoruz.

<script>
$(document).ready(function () {	

	$("a.menu").click(function () {
    $(".menualani").slideToggle(100);

    });
});
</script>

Neler Yaptık?
Bu aşamaya kadar neler yaptığımızdan kısaca bahsetmek istiyorum. Menümüze Youmenu ismini verdiğimiz bir id tanımlayarak başladık. Sonrasında klasik bir Ul Li menü kodu yazdık. Bu menü içinde alt menü şeklinde görünmesini istediğimiz ana menü bağlantımıza class=”menu” şeklinde bir sınıf tanımı verdik. Bu tanımdan daha sonra yararlanacağız. Alt menülerimizin stil tanımlamasını ise “menualani” isimli sınıfımızla yaptık. Menümüz bu aşamaya kadar klasik bir menü görünümü ve özelliği taşımakta.

İşte klasik bir görünüm ve özellikte olan bu menümüzü Css ile şekillendireceğiz. Css kodlarının uzunluğundan bu uygulamanın aslında tamamen Css’de bittiğini söyleyebilirim. Zira hem Xhtml hem de jQuery kodlarımız oldukça kısa.

Css tanımlamalarında dikkat edeceğiniz nokta #Youmenu isimli id içinde tanımladığımız A etiketi. A etiketinin görünümünü tıpkı Youtube sitesinde olduğu gibi düzenledik. Bu görünümü oluşturabilmek için Css3′de tanımlanan box-shadow parametresinden yararlandık. Bu parametreyi uzun uzadıya anlatmayacağım. Çünkü Yatay Gölge Menü Yapımı isimli yazımızda uzunca bu parametreden bahsettik. Dilerseniz o yazıdan yararlanabilirsiniz.

Menümüzde açılacak olan bağlantıya vurgu yapabilmek adına Span etikene bir takım tanımlamalar yaptık. Burada ben Youtube tasarımına benzetebilmek için bir aşağı ok kullandım ve bunu arkaplan resmi olarak tanımladım. Uygun değerleri verdikten sonra açılmasını istediğim menü birimine Xhtml koduyla ekledim. Biraz karışık gelebilir ama kodları incelerseniz ne kadar kolay olduğunu görürsünüz.

Menümüzün alt birimlerini ise Ul etiketi için oluşturduğumuz menualani isimli sınıfta tanımladık. Bu alanda alt menülerimizin nasıl bir görünüme sahip olacağını belirledik.

İşin jQuery boyutunda ise menümüzün açılır hale gelmesi için çok kısa bir kod kullandık. Sanıyorum daha önceki yazılarımızdan birinde de jQuery’nin slideToggle fonksiyonundan yararlanmıştık. jQuery kodunda görebileceğiniz gibi daha önce tanımladığımız menu sınıf ismine sahip a etiketine tıklanınca menualani isimli sınıfın slayt şeklinde açılmasını istedik. Uygulamanın en kolay noktası bu galiba :)

Tarayıcı Uyumu
Şayet Css kodlarını incelediyseniz box-shadow etkisini Internet Explorer’da yakalayabilmek için filter kullandığımı görürsünüz. Aslına bakarsanız bu durumdan nefret ediyorum. Çünkü IE gibi ilkel bir tarayıcıya hala tasarımlarımızı anlatmak, kanıtlamak zorunda olmamız hiç hoşuma gitmiyor. Ne yazık ki ziyaretçilerimizden gelen talep bu yönde. Bundan sonraki yazılarda elimden geldiğince bu konuya dikkat edeceğim.

IE engelini de aştıktan sonra rahatlıkla söyleyebilirim ki bu uygulamamız tüm tarayıcılarda hemen hemen benzer şekilde görünecektir. Ben kontrollerimi yaptım ama sizler de kendi tarayıcılarınızda test ederseniz sevinirim.

Umarım sizler için faydalı olmuştur. Bir diğer makalemizde görüşmek üzere.

UYGULAMA ÖNİZLEME UYGULAMA İNDİR (8kb)

Bu makalemizde de Css ile basit bir yatay menu yapacak, bu menüye gölge efekti verecek ve biraz da jQuery ile animasyon katacağız. Özellikle box-shadow ve border-radius bu makalemizde üzerinde duracağımız konulardan.

UYGULAMA ÖNİZLEME UYGULAMAYI İNDİR (3kb)

1. ADIM Xhtml
Her uygulama yazımızda olduğu gibi önce menümüzün Xhtml kodlarını yazarak başlıyoruz.

<div id="menu">
<ul>
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Xhtml / Css</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Fireworks</a></li>
<li><a href="#">Dreamweaver</a></li>
<li><a href="#">Php / Mysql</a></li>
<li><a href="#">Flash / AS</a></li>
<li><a href="#">Worms Armageddon :)</a></li>
<br style="clear:both" />
</ul>
</div>

2. ADIM CSS
Menümüzün genel görünümünü düzenleyecek olan stilleri Css kodlarımız ile tanımlıyoruz. Css kodlarında kullandığımız parametrelere ilişkin açıklamaları makalenin ilerleyen bölümlerinde okuyabilirsiniz.

#menu {font:14px arial, verdana, sans-serif;-moz-box-shadow:0px 2px 5px  2px #999; -webkit-box-shadow:  0px 2px 5px  2px #999;} /* Burada menümüze bir miktar gölge veriyoruz */

#menu ul{background:#fff url(../img/menubg.gif) repeat-x;margin:0;padding:0;list-style:none;border:1px solid #c0c0c0;padding:10px 0px 10px 0px;}

#menu li{margin:0;display:inline;float:left;padding:0px;}

#menu ul li a {padding:10px;color:#444;text-decoration:none;} /* Menü bağlantılarımızı burada tanımlıyoruz */

#menu ul li a:hover { /* Bağlantılarımızın hover durumundaki tanımlamalarını yapıyoruz */
padding:10px;
background:#6bbef0 url(../img/menu2.gif) repeat-x;
color:#fff;
text-decoration:none;

-moz-box-shadow:0px 2px 5px  2px #2e83ff;		/* Bu iki satırda gölge tanımlamaları yapılıyor. */
-webkit-box-shadow:  0px 2px 5px  2px #2e83ff;

-moz-border-radius: 0px 0px 4px 4px;			/* Bu iki satırda ise yuvarlak köşeler için tanımlamalar yapılıyor */
-webkit-border-radius: 0px 0px 4px 4px;
}

3. ADIM jQuery
Bu adımda menümüz bağlantıların etkileyecek küçük bir animasyon oluşturuyoruz.

<script>
	// menü bağlantılarımız için küçük bir animasyon oluşturuyoruz

	$(document).ready(function() {
			$('#menu a').hover(function() { // fare üzerine gelince yapılacaklar
				$(this).animate({ paddingBottom: '15px', paddingTop: '10px'  },300);

			}, function() { // fare gidince yapılacaklar
				$(this).animate({ paddingBottom: '10px', paddingTop: '10px' }, 300);
			});
		});

	</script>

Menümüz Hakkında Küçük Ayrıntılar
Xhtml ve Css kodlarında görmüş olduğunuz gibi gayet basit ve sade bir menü oluşturduk. Menüye artı olarak kattığımız şey sadece gölge efekti ve bağlantıların hover efektinde vermiş olduğumuz yuvarlak köşe görünümü. Geri kalan kısmı ise jQuery ile basit bir animasyon yaparak hallettik. Xhtml kodlarında klasik olarak bir ul li menü dizilimi yaptık ve etiketlerimizi kapattık. Css kodlarında ise ul ve li etiketlerine uygun padding ve görünüm değerleri atadık.

Box Shadow ve Border Radius değerlerimizi neye göre verdik?
Aslında bu makaleyi yazmamın bir amacı da box-shadow ve border-radius parametrelerini anlatabilmekti. Örneğimizde de hem Menu isimli div etikemizte hem de menümüzün bağlantılarında bu parametreleri kullandık. Şimdi kısaca bu parametrelerin kullanımından bahsedelim.

Öncelikle box-shadow’dan başlamak istiyorum. Box shadow isminden de anlaşılacağı üzere oluşturduğumuz alanlara gölge etkisi vermemizi sağlıyor. Kullanımı ise şöyle;

-moz-box-shadow:5px 8px 10px 6px #f91365;

Parametrede verdiğimiz ilk değer (5px) gölgemizin yatay konumda (X ekseninde) ne kadar yayılacağını gösteriyor. Eğer bu değeri pozitif olarak verirsek bu yayılma alanın sağına doğru oluyor. Değeri – (eksi) olarakta vermek mümkün. 0 değeri ise X ekseninde (Horizontal konumda) yayılma olmayacağını gösteriyor.

Sonra verdiğimiz 8px’lik değer ise dikey konumda (Y ekseninde) yayılma miktarını gösteriyor. Aynı X ekseninde olduğu gibi yine buraya da eksi değerler atayabiliyorsunuz. Değeriniz pozitif bir değer olursa alanın altına doğru gölgeniz yerleşiyor. 0 değeri Y ekseninde gölgeyi ortadan kaldırıyor.

Vermiş olduğumuz 3. değer ise (10px) gölgemizin ne kadar bulanık görüneceğini belirleyen blur değeri. Bu değeri eksi olarak vermemiz mümkün değil. Bulanıklık değerini verdiğimiz gölge oranına göre ayarlamak en iyisi. Bu sayede gölgenizin daha iyi şekilde görünmesini sağlıyorsunuz.

Son vermiş olduğumuz değer ise (6px) gölgemizin hem bulanıklık hem de x-y ekseninde genel yayılımını (Spread) gösteriyor. Bu değeri eksi olarak atayabiliyoruz. Bu durumda gölgemizin keskinliği biraz azalıyor. Pozitif değerlerde ise yükseliyor.

Gelgelelim border-radius değerine. Border radius parametresi ile belirlediğimiz alanların köşelerini yuvarlatabiliyoruz. Şimdi bir örnek kod yazalım ve üzerinden değerleri açıklayalım;

-moz-border-radius: 8px 6px 4px 2px;

Border radius’un verilen değerleri nispeten daha kolay anlaşılır. 8px’lik ilk değer üst soldaki yuvarlamanın değerini, sonraki 6px’lik değer üst sağdaki değeri, 4px’lik değer alt sağdaki değeri, son değer ise alt soldaki değeri ifade etmekte. Daha kolay bir anlatımla sırasıyla bu dört değer “saat yönünü” takip ediyor.

Tarayıcı Uyumluluğu
Ne yazık ki her uygulamada olduğu gibi burada da tarayıcı uyumuna takılıyoruz. Örneğimizde verdiğimiz kodlar Firefox 3.6, Google Chrome ve Safari tarayıcılarda sorunsuzca görüntülenecektir. (Bu nedenle sadece -moz-box-shadow değil -webkit-box-shadow değerini de yazdık, bu sayede Webkit tabanlı tarayıcılarda da uyum sağladık) Ne yazık ki Opera 10.10 ve IE8 desteği bulunmuyor. Yani menü örneğimizi belli taraycılar ile görüntüleyebilirsiniz. Ben her zaman olduğu gibi Firefox tavsiye ediyorum. (Zaten uygulamayı geliştirirken de hep Firefox ile izledim)

Tarayıcıların ilerleyen dönemlerde CSS3 desteğini arttırması ile birlikte bu tür örneklere daha çok rastlayacağız. Bu nedenle sanırım bu tür uygulamaları kullanmak için biraz erken. Hele ki IE faktörü göz önüne alınırsa ne demek istediğim daha kolay anlaşılır sanırım. Makalemizde elimden geldiğince kodları sade tutmaya ve amacımıza yönelik olarak sade bir anlatım kullanmaya çalıştım. Eksiklerim veya atladığım noktalar olursa bunları yorumlarınızla tartışmak isterim. Umarım sizler için faydalı olmuştur.

Kaynaklar
http://www.w3.org/TR/2008/WD-css3-background-20080910/#border-radius
http://www.w3.org/TR/2008/WD-css3-background-20080910/#the-box-shadow
https://developer.mozilla.org/en/CSS/-moz-box-shadow
http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/
http://css.flepstudio.org/en/css3/box-shadow.html
http://www.css3.info/preview/box-shadow/

Hemen belirtmeliyim ki bu makaleyi yazarken Smashing Magazine‘in yeni tasarımından esinlendim.  Kategorileri görüntülediğimiz menü oldukça hoşuma gitti. Bu tarz bir menü yapımını sizlerle paylaşmaya karar verdim.

MENÜ ÖNİZLEME MENÜ DOSYASI İNDİR

Öncelikle menümüzde/navigasyonumuzda kullanmak üzere arkaplanımızı oluşturacak resmimizi Photoshop’ta oluşturalım ve uygulamamıza başlayalım.

Photoshop’ta 400*400px boyutunda yeni bir doküman açalım. Yeni bir katman oluşturarak Rectangular Marquee Tool aracını seçelim. Üst menüden Style bölümünü Fixed Size yaparak 300*250px bir değer verelim. 300*250px’lik bir dörtgenimiz oldu. Bu dörtgeni siyah renk ile (#000000) dolduralım.

Şimdi yeni bir layer daha oluşturarak oluşturduğumuz dörtgenin üzerinde küçük bir üçgen oluşturalım. Üçgenimizi yapmak için ben Polygonal Lasso Tool (L) kullandım. Küçük bir üçgen çizdikten sonra yine siyah renk ile dolduruyoruz.

Şu anda bir dörtgen ve bir de küçük üçgenimiz var. Üçgenimizi dörtgenimizin üzerinde 30-40px boşluk kalacak şekilde konumluyoruz. Sonrasında Layer penceresinden Layer 1 ve Layer 2′yi Ctrl tuşuna basarak aynı anda seçiyoruz. Seçim yapıldığında da Ctrl+E tuş kombinasyonu ile iki katmanı birleştiriyoruz. Böylelikle dokümanımızda sadece Layer 2 kalmış oluyor.

Bu aşamadan sonra bu katmana istediğimiz özellikleri vererek daha iyi bir görünüm sağlayacağız. Şimdi Layer 2 üzerine iki kez tıklayarak layer özelliklerine geliyoruz. Aşağıda yer alan değerleri girerek çalışmamıza uyguluyoruz.

Resimlerde görülen değerleri uyguladıysak hemen hemen aşağıdaki gibi bir görüntüye sahip olacağız.

Çalışmamızı bu aşamada uygun yerlerden kesecek ve resmi 2 bölüme ayıracağız. (Kodlama esnasında ikiye ayırma bize büyük kolaylık sağlayacak) Photoshop’ta Crop Tool’u (C) seçerek resmimizi uygun alanlardan kesiyoruz. Ben çalışmanın üstünden, altından ve yanlardan 2px fazlalık vererek kesim yaptım. Siz dilediğiniz gibi kesebilirsiniz.

Kesim işleminden sonra Üst alanda yer alan üçgen bölümü 20px’lik bölüm halinde kılavuz çizgimizle ayıralım ve kesip kaydedelim. Sonrasında kalan bölümü de kesip ayrı şekilde kaydedelim. Böylelikle resmimizin üst ve alt kısmını ayrı ayrı keserek kaydetmiş olduk. (Kestiğimiz resimlere nav_ust ve nav_alt şeklinde isimler verebiliriz)

Evet menümüzde kullanacağımız görselleri oluşturduk. Şimdi dilerseniz Xhtml ve Css kodlarını yazalım ve menümüzü oluşturmaya başlayalım. Önce Xhtml kodlarımızı yazarak başlıyoruz. Aşağıda yer alan kodları bir metin editörüne yazarak index.html olarak kaydedelim.

<ul class="menu">
<li><a href="#" class="menu">Anasayfa</a></li>

<li><a href="#" class="menu">Kategoriler (+)</a>
	<ul class="sub"><li>

<div class="nav">
	<div class="nav_ust">&nbsp;</div>
	<div class="nav_alt">
	<h2>Tüm Kategorileri Görüntülüyorsunuz</h2>
	<div class="navlink1">

	<a href="#">Css & Xhtml</a>
	<a href="#">Javascript</a>
	<a href="#">Php & Mysql</a>
	<a href="#">Asp.NET</a>
	<a href="#">Dreamweaver</a>
	<a href="#">Tasarım Genel</a>
	</div>

	<div class="navlink2">
	<a href="#">Photoshop</a>
	<a href="#">Illustrator</a>
	<a href="#">Fireworks</a>
	<a href="#">Gimp</a>
	<a href="#">Flash</a>
	<a href="#">Web Grafik Genel</a>
</div>
</div>
</div>

</li>

</ul>
</li>
<li><a href="#" class="menu">Makaleler</a></li>
<li><a href="#" class="menu">Videolar</a></li>
<li><a href="#" class="menu">Arşiv</a></li>
<li><a href="#" class="menu">Forum</a></li>
<li><a href="#" class="menu">Hakkımızda</a></li>
<li><a href="#" class="menu">İletişim</a></li>

</ul>

Kısaca Xhtml kodlarında yaptığımız şeyden bahsetmek istiyorum. Gördüğünüz gibi önce Ul etiketi ile sırasız listemizi oluşturduk, yani menümüzün görünür ögelerini yerleştirmeye başladık. Ul ve li etiketleri ile arka arkaya menümüzü inşa etmeye başladık. Kategori linkinde ise menümüzü oluşturacak olan alt menü için ayrıca bir ul ve li etiketi açtık. Li etiketi açıkken menümüzü gösterecek olan ana kodlamayı yaptık. Önce div class=”nav” isimli div etiketimizi açtık ve sonrasında navlink1 ve navlink2 etiketleri ile devam ederek içlerinde yer alacak olan linkleri yerleştirdik. Sırasıyla etiketlerimizi kapatarak menü yazımına devam ettik ve diğer görünür linklerimizi yazdık.

Bu noktaya kadar işin büyük bölümünü hallettik. Şimdi ise en can alıcı noktayı yani Css kodlarımızı yazacağız. Aşağıdaki Css kodlarını bir metin editörüne yazarak style.css olarak kaydedin.

ul.menu {list-style:none;margin:0;padding:0;font:bold 14px/24px arial, verdana, sans-serif;}
ul.menu  li {float:left;position:relative;}
li ul {display:none;list-style:none;}
ul li a.menu{float:none;padding:8px 10px 8px 10px;background:#333;color:#fff;display:block;text-decoration:none;border-bottom:4px solid #666}
ul li a.menu:hover{color:#999;background:#666}

li:hover > ul {display:block;position:absolute;margin:0;padding:0;}

.nav {width:250px;display:block;position:absolute}
.nav h2 {color:#333;background:#f5f5f5;display:block;margin:0 auto;padding-left:5px;font:bold 12px/24px arial, verdana, sans-serif;width:95%}
.nav_ust {display:block;background:url(navust.png) no-repeat;float:left;width:304px;height:20px;margin:-6px 0 0 0px;}
.nav_alt {display:block;background:url(navalt.gif) no-repeat;float:left;width:304px;height:247px;}

.navlink1, .navlink2 {width:125px;margin:10px 15px 10px 10px;float:left;display:inline;font:14px/20px arial, verdana, sans-serif;}
.navlink1 a, .navlink2 a {display:block;color:#666;background:transparent;text-decoration:none;padding:6px}
.navlink1 a:hover, .navlink2 a:hover {color:#fff;background:#333;text-decoration:none;padding:6px}

Css kodlarımızdan kısaca bahsedecek olursak. Burada yaptığımız en önemli şey menümüzün görünürlük ve gizlilik durumunu ayarlamak. Bunu da li ul bölümünde display:none değerini vererek yaptık. Alt birimlerin görünmesini sağlamak içinse li:hover > ul bölümüne display:block değerini kullandık. Diğer css kodlarına dikkat ettiyseniz Nav isimli sınıfımızı oluşturduk. Sonrasında nav_ust isimli alanı oluşturduk. Bu alana Photoshop’ta yaptığımız ilk resmi arkaplan resmi olarak atadık. Sonrasında nav_alt sınıfını oluşturduk. Bu sınıfa da sonradan kaydettiğimiz resmi arkaplan resmi olarak atadık. Gerekli değerleri verdik ve sonrasında navlink1 ve navlink2 alanlarını oluşturduk. Bu alanlarda kategorilerimizi 2 sütun olacak şekilde göstereceğimiz için 2 alan oluşturduk. Sonrasında alanlarımızda Css düzenlemelerini sınıflara uygun değerleri atayarak tamamladık.

Belgeyi kaydedip görüntülediğinizde örneğimize benzer bir menü elde etmiş olacaksınız. Uygulamanın kolay ve basitçe uygulanabilir olması nedeniyle herbirinizin bunu yapabileceğini düşünüyorum. Mantık olarak klasik Css açılır bir menü oluşturduk sadece. Bu menünün bir biriminde klasik menü birimlerini göstermek yerine kendi yapmış olduğumuz Css stil ve tanımlamalarını kullandık hepsi bu :)

Bu uygulama modern tarayıcıların hepsinde çalışacaktır. Firefox, Opera, Chrome, IE8 üzerinde denenmiştir. Yalnız bu uygulama IE5+ ve IE6 üzerinde çalışmayacaktır! Çünkü IE eski sürümleri uygulamada kullandığımız :hover sınıfını (pseudo class) desteklemez. Bunu çalıştırabilmek için birçok küçük düzeltme js uygulaması mevcut. Ancak ben fix ile uğraşıp kafanızı karıştırmak istemedim, mazur görün. Şayet soru olarak gelirse yorumlarımda da anlatabilirim.

Unuttuğum veya atladığım noktalar varsa özür dilerim. Umarım sizler için faydalı olmuştur…

Menü Önizleme Menü Dosyası İndir

W3C standartlarına uygun kodlama için (valid code) Xhtml bilgimiz olması şart. Daha önceki zamanlarda sitemizde Xhtml dersleri yayınlamıştık, dilerseniz o derslerden yararlanabilirsiniz. Ancak standartlara uygun bir sayfa kodlaması için yalnızca Xhtml bilgisi başlı başına yeterli değil. Xhtml ile oluşturduğumuz kodların görünümünü düzenleyecek olan stilleri yazmak için CSS’ye de hakim olmak gerekli. Kaldı ki yazacağımız Css kodlarının da standartlara uygun olması gerekiyor. Css yazarken de belli kurallara bağlı kalmamız gerekiyor. Geçerli bir sayfa kodlaması için Xhtml ve Css’ye başlangıç aşamasında hakim olmak yeterli.

Öncelikle Xhtml kodlarımızı yazarak işe başlayalım. Sayfamız klasik olarak bir Üst bölüm (Header), bir Navigasyon alanı (Navigation), bir İçerik alanı (Content), bir Menü bölümü (Menubar veya Sidebar) ve bir Alt bilgi (Footer) alanı barındıracak. Şimdi bu alanları Xhtml olarak yazalım.

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
	<title>Xhtml Css Sayfa Şablonu</title>
	<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-9" />
	<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<!-- XHTML KODLARIMIZ BAŞLIYOR -->

<div id="sayfa">
<div id="ustbolum">Üst Bilgi Alanı</div>
<div id="navigasyon">Navigasyon Alanı</div>
<div id="icerik">Ana İçerik Alanı</div>
<div id="yanmenu">Yanmenü Alanı</div>
<div id="altbilgi">Alt bilgi Alanı</div>
</div> 

</body>
</html>

Xhtml kodlarında gördüğünüz üzere her bir Div için yukarıda bahsettiğimiz alanları tanımladık. Id seçiciler kullanarak div etiketlerimizi sırasıyla yazdık. Buraya kadar sayfamızın Xhtml kodları hazır görünüyor. Şimdi asıl önemli olan kısma geçiyoruz. Css ile Id’lerimize değerler atayacağız ve görünümü şekillendireceğiz. Css kodlarından sonra her Id’de kısaca ne yaptığımızı anlatacağız.

#sayfa {width:800px;margin:0 auto;font:bold 16px "Arial", Verdana, Helvetica, sans-serif;}
#ustbolum {height:100px;background:#2e83ff;color:#fff;}
#navigasyon {height:40px;background:#666;color:#fff;}
#icerik {width:500px;height:500px;float:left;background:#999;color:#333;}
#yanmenu {width:300px;height:500px;float:right;background:#888;color:#333;}
#altbilgi {width:100%;height:50px;background:#777;color:#fff;clear:both;}

Css kodlarımızı da yukarıdaki gibi yazdıktan sonra style.css adıyla kaydediyoruz. Sonuç BURADA yer alan sayfa gibi görünmeli. Şimdi dilerseniz kısaca Css kodlarıyla neler yaptığımızı biraz anlatalım.

Önce Sayfa isimli id’mizi tanıtmaya başladık. Burada sayfa seçicisine 800 piksel genişlik atadık. Margin değerini 0 auto yaparak sayfa id’si içinde kalacak bölümlerin tarayıcımızda ortalanmasını sağladık. Son olarak yazıtipi belirledik. Örnek sayfada dikkat ederseniz diğer alanlarda yazıtipi tanımlaması olmadığı için tüm yazılar 16 piksel Arial yazıtipinde görünmekte. Sayfa id seçiciyi en son kodlama bittikten sonra kapattık.

Ustbolum isimli id’mizde iste sayfamızın Üst bilgisini oluşturacak bir tanılamaya gittik. Yüksekliğini 100 piksel olarak atadık. Arkaplan rengi ve yazı rengini ayrı ayrı tanımlayarak Ustbolum id yazımını bitirdik.

Navigasyon bölümünde ise bir navigasyon alan görünümü istediğimiz için yüksekliğini 40 piksel tuttuk. Yine Ustbolum gibi arkaplan ve yazı rengi atamalarını yaptık.

İcerik ve Yanmenu seçici id’lerinde ise yine öncelikle genişlik ve yükseklik tanımlamaları yaptık. Burada dikkat ettiyseniz fazla olarak float değerini atadık. İcerik için float:left değerini yanmenu içinse float:right değerini kullandık. Böylelikle icerik alanındaki tüm içerik sola, yanmenu alanındaki tüm içerik ise sağa yaslanmış vaziyette görünecek.

Altbilgi bölümünde ise yer alacak içeriğin üstte görünen icerik ve yanmenu’den bağımsız olarak hizalanması içinse clear:both değerini kullandık. Böylelikle Css kodlarımızı tamamlamış olduk.

Gördüğünüz gibi yazmış olduğumuz basit kodlar sayesinde sayfa şablonumuzu oluşturduk. Üstelik W3C’nin sevdiği ve geçerli kabul ettiği bir kodlama ile bunu yaptık. Yukarıda yazılan kodlar ile oluşturduğumuz bu basit sayfayı bir nevi sayfa iskeletimiz gibi düşünebilirsiniz. Zira henüz hiçbir ekstra tanımlama ve kod eklemesi yapmadık. Sadece şablon olarak neyin nerede duracağını belirttik. Css’nin türlü nimetlerinden yararlanarak sayfalarımızı geliştirebilir ve farklı görünümler ortaya çıkarabiliriz.

Tasarım yaparken renkler ve renk seçimi oldukça önemlidir. Ben de tasarımlarımı yaparken mutlaka birbirine uyumlu renkler seçmeye özen gösteriyorum. Hem göz yormayacak hem de birbiriyle uyumlu olabilecek renkleri yan yana getirmeye çalışıyorum. Yukarıdaki resimde kullanmış olduğum renklerden bazılarını görüyorsunuz. Bu renklerin birçoğunu t-infection.com üzerinde de görebilirsiniz. Renklerin metin olarak sıralı halini yazının sonunda görebilirsiniz.

Renk seçimi konusunda Adobe Kuler ve benzeri servisler size oldukça yardımcı olabilir. Ayrıca Ertuğrul sağolsun ColourLovers‘tan haberdar olmamı sağladı. Renk seçimi konusunda size yardımcı olabilecek bir başka kaynakta burası bana kalırsa.

#2E83FF #E6E6E6 #F91364 #6A8C0F #95CB01
#F0F6F8 #83AA19 #93CA01 #EB157A #C0C0C0
#121212 #28E3FF #74CFF9 #B8DDFF #FF9000

Bu yazımızda sizlere ikonlarla ilgili bir web servisini tanıtacağım. İconza isimli bu servis ile kendi ikonlarınızı özelleştirip siteden indirebiliyorsunuz. Site size anasayfada verilen ikonların renk, arkaplan rengi, boyutu gibi özellikleriyle dilediğiniz değişikliği yapıp bu ikonları indirme fırsatı sunuyor. Bu değişiklikler sonucunda birbirinden güzel 70 ikona sahip olabiliyorsunuz. Dilerseniz özelleştirdiğiniz bir ikonun üzerine tıklayıp sadece onu indirme şansınız da bulunuyor. İkonların hem tek tek hem de topluca indirilebilmesi güzel bir seçenek olmuş. Açıkçası Iconza’dan neden bu kadar geç haberim oldu kendime kızıyorum. Servisi görüp denediğimde oldukça hızlı olduğunu ve basit yapısı sayesinde tüm kullanıcılara hitap edebileceğini gördüm. İkon arayışı içindeyseniz ve ikonlarınızda kendi renklerinizi istiyorsanız Iconza tam size göre.