Gönderen Konu: Photoshop ile Açılan Navigasyon Menü Yapımı (Örnek Çalışması)  (Okunma sayısı 946 defa)

Çevrimdışı orhan

  • Yönetici
  • Trade Sayısı: (0)
  • *
  • İleti: 384
  • Karma +19/-1
  • Cinsiyet: Bay
    • Profili Görüntüle
    • webtiryaki.com
[solresim]http://img152.imageshack.us/img152/733/navih.jpg[/solresim]Yeni Bir dersle merhabalar.  Bu makalemizde sizlerle web tasarımında son dönemlerde oldukça sık kullanılan açılır navigasyonları nasıl oluşturacağımızı anlatacağız.
Ö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.

Kod: [Seç]
<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.

Kod: [Seç]
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.

Ornek calismayi ekten indirebilirsiniz
« Son Düzenleme: 15 Ara 2012, 08:23:15 Gönderen: orhan »