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)

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