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

Tasarladığımız web sitelerinde sıklıkla açılır menüler ve buna benzer navigasyon araçları kullanırız. Belli bir alandaki resim ya da metin tabanlı link üzerine gelindiğinde açılır menü yardımıyla ilgili kategorinin alt dallarını ve menü başlıklarını görebiliriz. Çoğu zaman bu menüler doğru yerlerde kullanıldığında büyük bir navigasyon kolaylığı sağlarlar.

Bu yazımızda kısaca Adobe Dreamweaver ile resim ve metin tabanlı bağlantılarımızla açılır menülerin nasıl oluşturulacağını, özelleştirilmesini ve kullanımını anlatacağız. Öncelikle Dreamweaver üzerinde yeni bir HTML doküman oluşturun. Bu dokümanınızı ister bir dizin isterseniz de farklı bir alana isim vererek kaydedin.

Şimdi bilgisayarınızda hazırlamış olduğunuz bir buton tarzı resmi veya hazır olarak bulunan buton görünümlü bir resmi sayfanıza yerleştirin. Bunu yapabilmek için Common menüsünden Image alanına gelebilir ve burdan sayfaya eklemek istediğiniz resmi seçebilirsiniz. Ben aşağıda görmüş olduğunuz resmi sayfama ekliyor ve çalışmama devam ediyorum.

Bu resmi sayfaya ekledikten sonra sıra açılır menümüzü oluşturacağımız işlem aşamasına geliyor. Resme bir kere tıklayıp seçtikten sonra F9 tuşuna basarak Tag Inspector alanını aktif hale getiriyoruz. Yine resim seçiliyken burada Behaviors >> Show Pop-Up Menu sekmesine geliyoruz. Bu alana tıkladığımız zaman karşımıza bir pencere açılacak ve menü işlemlerimizi bu pencere altında devam ettireceğiz.

Açılan penceremizde açılır menümüze ait bölümleri tanımlayabilir ve bunlara link verebiliriz. İlk alanda bu işlemleri yapabilmemiz için bazı bölümler göreceksiniz. Buraya sırasıyla bir iki link eklemesi yapalım ve işlemi devam ettirelim.

Bu alanda menü birimlerimin görünecek metin bilgisini yukarıya Text olarak bildirilen alana yazıyorum. Onun hemen altındaki link alanına ise bu bağlantının ulaşacağı linki yazıyorum ve daha sonra bu bilgiyi girdikten sonra + tuşuna basarak yeni bir bağlantı eklemeye başlıyorum. Şayet siz yeterli sayıda bağlantı eklediğinizi düşünüyorsanız + tuşuna basmadan diğer sekmelere geçebilirsiniz.

Bundan sonraki sekmelerde sırasıyla Appearance, Advanced ve Position sekmelerinde bazı değişiklikler yaparak menümüzü şekillendireceğiz.

Şimdi Content sekmesinde menümüzün görünecek olan bağlantılarını yazdık ve linklerini verdik. Bundan sonra Appearance kısmına geçerek menümüzün renklerini ayarlayalım.

Appearance sekmesinde üst bölümde menümüzün ne “tipte” bir menü olduğunu belirliyoruz. Karşımıza iki seçenek sunuluyor; Vertical yani dikey ve Horizontal, yatay menü. Bu aşamada menü sisteminin tipini belirlemek size kalmış. Ben bu örnekte Vertical tipi seçtim ve işlemlerime böyle devam edeceğim.

Yine aynı bölümde menü bağlantımızın görüneceği font tipini, boyutunu ve hizasını seçebiliyoruz. Bu işlemlerden sonra aşağı alanda ise menü birimlerimizin fare hareketleri sırasında alacağı renk değerlerini girmemiz gerekiyor.

Up state alanı menümüzün açılır bölümünün kendi renk değerlerini gösterirken Over state alanı ise menü birimlerinin üzerine fare ile gelindiğinde alınacak olan renk değerlerini göstermekte. Bu alandaki renk belirlemelerini siz kendiniz deneyerek yapabilirsiniz. Ben aşağıda görmüş olduğunuz renk biçimlerinde ayarlamalar yaptım ve bunu örneğim üzerine yansıttım.

Bu aşamadan sonra aynı panelde Advanced sekmesine geliyoruz. Bu bölümde ise menü birimlerimizin sahip olacağı hüce boşluklarını ve kenarlık ayarlarını yapıyoruz. Cellpadding ve Cellspacing bölümlerine vereceğiniz farklı değerlerde değimlerin menü sisteminize nasıl yansıdığını anında görebilirsiniz. Bu alanda yukarıda söylediğim gibi menümüze kenarlık (border) ekleyebilir ve kenarlıklarınıza renkler verebilirsiniz. Aşağıda örnek çalışmanın değerlerini görebilirsiniz.

Bu alandaki değerlerimizi de verdikten sonra son sekmemiz olan Position bölümüne geliyoruz. Bu alanda menü birimlerimizin genel pozisyonlarını ayarlayacak ve bunlar hakkında ayarlamalar yapacağız.

Position sekmesinde ise menümüzün fare ile üzerine gelindiğinde alacağı pozisyonu ayarlıyoruz. Bu bölümde genellikle menümüzün ilgili resmin veya bağlantının altında çıkmasını istiyorsak ikinci resmi seçiyoruz. Bu bölümde hangi alanı seçerseniz seçin X ve Y koordinatlarına değerler verebilir ve menü pozisyonunuzu bu şekilde de ayarlayabilirsiniz. Ben yine aşağıda görmüş olduğunuz örnek çalışma için pozisyon bölümünün bir resmini göstermek istiyorum.

Bu aşamadan sonra açılır menümüz hazır vaziyette. Dosyanızı kaydederek F12 tuşuna basıp tarayıcınızda nasıl çalıştığını görebilirsiniz.

Bu makalemizde ben örneğimi tamamladım ve bu alanda örneğin son haline ulaşmanız mümkün. Makale üzerinde bahsettiğimiz gibi tüm işlemleri metin tabanlı bağlantılarınız için de kullanabilir ve menülerinizi oluşturabilirsiniz. Bir sayfa içinde farklı alanlarda ve farklı bölgelerde istediğiniz kadar açılır menü kullanabilir ve bunların tipini belirleyebilirsiniz.

Bu menü sisteminde dikkat etmeniz gereken tek nokta ise programın sizin için oluşturduğu mm_menu.js dosyasının sayfanız ile aynı dizinde olmasına dikkat etmek. Zaten kaydettiğiniz sayfa içinde de bu JS dosyasına ithafta bulunulduğunu ve yolunun yazıldığını göreceksiniz. Web sayfalarınızda veya farklı dizinler içinde bu menü sistemini kullanırken pathlerinizi buna göre ayarlamanız sizin için iyi olacaktır.

Umarım sizler için faydalı olur. Bir başka makalede görüşmek üzere.