Archive for the 'Menü' Category

Tablosuz Katlanır Menü (Collapsible Menu Tableless)

Katlanır menüler menüdeki öğeleri gizlemek ve görüntü kirliliğinden kurtulmak için çok iyi bir seçimdir. Bugünkü yazımda JavaScript ve CSS yardımıyla tablosuz (tableless) katlanır menü nasıl yapabiliriz ondan bahsetmek istiyorum.

Hazırlayacağımız katlanır menü aşağıdaki resimlere benzeyecek.

Katlanır Menü Görüntüsü 1

Katlanır Menü Görüntüsü 2

Bayram ve yılbaşı hediyesi olarak kabul edersiniz inşallah :)

Tablosuz (Tableless) katlanır menümüzü hazırlamak için öncelikle en çok kullandığımız HTML düzenleyicimizi açıyoruz ve daha sonra aşağıdaki kod bloklarını bir bir eklemeye başlıyoruz.

Devamı »

C# İle XML Tabanlı Ağaç Menü (Tree Menu) Tasarımı

Ağaç menüler (tree menu) web sitelerinde bağlantıları kategorize edebilmek ve anlaşılması kolay hale getirebilmek için oldukça kullanışlıdırlar. Bugünkü yazımda C# ile XML tabanlı ağaç menü nasıl yapabiliriz ondan bahsetmek istiyorum.

Menümüze ait taslak görünümü HTML olarak hazırlayalım

<div id="MenuContainer">
<ul id="XmlTreeMenu">
<li><a href="#">Nesne 1</a><ul>
<li><a href="#">Alt Nesne 1</a></li>
<li><a href="#">Alt Nesne 2</a></li>
<li><a href="#">Alt Nesne 3</a></li></ul></li>
<li><a href="#">Nesne 2</a><ul>
<li><a href="#">Alt Nesne 1</a><ul>
<li><a href="#">Alt Nesne 1</a><ul>
<li><a href="#">Alt Nesne 1</a></li></ul></li>
<li><a href="#">Alt Nesne 2</a></li></ul></li></ul></li>
<li><a href="#">Nesne 3</a></li></ul>
</div>

Devamı »

C# İle XML Tabanlı Dinamik Menü Tasarımı

Web sitelerinin vazgeçilmez unsuru olan menüler, web tasarımcılarının en çok zaman harcadıkları yerlerden biridir. Bugünkü yazımda “.Net Framework 2.0” platformunda “C#” dili ile basit ve kullanışlı bir tab menü nasıl oluşturabiliriz ondan bahsetmek istiyorum.

Önce Menümüzü HTML Olarak Kodlayalım

<div id="MenuContainer">
<ul id="XmlMenu">
<li><a href="#">Nesne 1</a></li>
<li><a href="#">Nesne 2</a></li>
<li><a href="#">Nesne 3</a></li>
<li><a href="#">Nesne 4</a></li>
<li><a href="#">Nesne 5</a></li>
</ul>
</div>

Devamı »