SanalDuvar » menü http://www.sanalduvar.com İnternet ve Teknoloji Rehberi - Google, Facebook, Twitter, WordPress Mon, 06 Feb 2012 22:04:15 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 jQuery ve CSS: Çok Seviyeli Drop Down Menülere Çözümler http://www.sanalduvar.com/jquery-ve-css-cok-seviyeli-drop-down-menulere-cozumler-1766.html http://www.sanalduvar.com/jquery-ve-css-cok-seviyeli-drop-down-menulere-cozumler-1766.html#comments Sun, 06 Mar 2011 17:18:47 +0000 Veysel http://www.sanalduvar.com/?p=1766 Webmasterların, tasarladıkları web sitelerinde kullanmaları için menü bölümlerinde kendilerine çözüm sağlayabilecek “Drop Down” yani aşağıya doğru açılan menü çeşitlerine örnekleri aşağıda sizin için bir araya getirdim. Özellikle ücretsiz olarak kullanıma sunulanları dile getirdim. Görsellik olarak ziyaretçilerinize sıra dışılık sağlayabileceğiniz bu derlemeleri kullanmak da gayet basit olduğunu düşünüyorum. Siz webmasterlara iyi görsellikler diyorum. (:

1- Dock and Stack – jQuery

Demo – İndir

2- Vertical Sliding Menu – jQuery

Demo – İndir

3- Professional DropDown

Demo – İndir

4- MenuMatic

Demo1 – Demo2 – İndir

5- Perfect Signin Dropdown Box Likes Twitter with jQuery

Demo -İndir

6- jQuery Drop Line Tabs

Demo – Kodlar

7- A Different Top Navigation

Demo – İndir

8- Fancy Sliding Menu For Mootools

Demo – İndir

9- Sexy Drop Down Menu w/ jQuery & CSS

Demo – Kodlar

10- Cut & Paste jQuery Mega Menu

Demo – Kodlar

]]> http://www.sanalduvar.com/jquery-ve-css-cok-seviyeli-drop-down-menulere-cozumler-1766.html/feed 3 Fish Eye Menü Çeşitleri, Demoları ve Anlatımları http://www.sanalduvar.com/fish-eye-menu-cesitleri-demolari-ve-anlatimlari-740.html http://www.sanalduvar.com/fish-eye-menu-cesitleri-demolari-ve-anlatimlari-740.html#comments Sat, 13 Jun 2009 19:36:02 +0000 Veysel http://www.sanalduvar.com/?p=740 Web tasarımcıların web2.0 bağlamında tasarlamış oldukları sitelerde dinamik menüleri terçih ediyor olmaları onları daha farklı menü sistemlerine yönlendiriyor. Bunlardan en göz alıcı olanları da Fish Eye Menüler tıpkı Windows Vista da Dock Menü gibi fa imleci ile menünün üzerine geldiğinizde büyüyen ikonlar ile ziyaretçilerinizi büyüleyebilirsiniz. Aşağıda vermiş olduğum kaynaklarda menüler kodlama farklılıkları ile değişik özellikler gösterebiliyorlar. Menülerin demolarını ve sayfanıza yerleştirilmesine kadar anlatımlarını bulabilirsiniz.

CSS Dock Menu
http://sanalduvar.googlepages.com/css-dock-menu.png

Fish Eye Menu Tutorial
http://sanalduvar.googlepages.com/fisheye-menu-tutorial.png

http://sanalduvar.googlepages.com/fisheye-tutorial2.png

Fish Eye Menu for Prototypejs
http://sanalduvar.googlepages.com/prototype-fisheye.png

Fish Eye Menu for Mootools
http://sanalduvar.googlepages.com/mootools-fisheye2.png

]]> http://www.sanalduvar.com/fish-eye-menu-cesitleri-demolari-ve-anlatimlari-740.html/feed 1 jQuery eklentisi: Akordiyon Menü http://www.sanalduvar.com/jquery-eklentisi-akordiyon-menu-385.html http://www.sanalduvar.com/jquery-eklentisi-akordiyon-menu-385.html#comments Sun, 06 Jul 2008 15:48:54 +0000 Veysel http://www.sanalduvar.com/?p=385 jQuery eklentileri katkılarıyla websitelerinin görselli bir adım daha ilerlerken tasarımcıların ihtiyaç duydukları özellikler hazırladıkları websitelerine kazandırmak için daha az çaba sarf ediyor olmaları sanırım özellikle kodlama safhasıyla  ilgilenenler için büyük nimet olsa gerek.

Başlıktan da anlaşılacağı gibi şimdi bahsedeceğim eklenti sayesinde sitenize akordiyon menü yapabilirsiniz. Beş çeşit akordiyon menünün kodlarını elde edebilirsiniz. Jörn Zaefferer‘in yazısında gördüğüm bu jQuery eklentisini inceledim ve daha önce görmediğim sıra dışı akordiyon menülerin olduğunu gördüm. Hatta beğendiğim bir tanesinini kodlarını ayırıp WordPress “Default” temasında denedim. “#list2″ olarak adlandırılan akordiyon menünün bahsettiğim temanın sidebar.php dosyasına uygun hale getirdim.

jQuery akordiyon menü eklentisini indirmek için şuradaki sayfayı ziyaret edebilirsiniz.

Şimdi gelelim WordPress’in “Default” taması için uyarladığım #list2 olarak adlandırılan menünün kodlarına ve sayfaya yerleştirilmesine;

Önelikle yukarıda belittiğim sayfadan gerekli dosyaları indirin ve .zipli dosyadan çıkarın.

Klasörün içindeki “lib” klasörünü ve “jquery.accordion.js” dosyasını temanın içine atın.( gerekli .js dosyalarımızı elde ettik)

Şimdi de gerekli kodlara sıra geldi.

Bir metin editörü açın ve içine aşağıdaki kodları yapıştırıp menu.css olarak kaydedin.


fieldset { padding: 0px; }
legend { font-weight: bold; }

pre { margin-bottom: 1em; }
li { list-style-type: none; }
#list2 { width:195px; }

#list2 {
height: 210px;
border: 1px solid #eee;
overflow: hidden;
}
#list2 .red {
height:25px;
font-size:20px;
width:195px;
color: #ffffff;
background-color: red;
}
#list2 .green {
height:25px;
font-size:20px;
width:195px;
color: #ffffff;
background-color: green;
}
#list2 .blue {
height:25px;
font-size:20px;
width:195px;
color: #ffffff;
background-color: blue;
}
#list2 dd { height: 130px; overflow: hidden; }

}

Evet gerekli stil dosyamızıda oluşturduk. Bu dosyayıda tema klasörünün içine atıyoruz.

Şimdi de dosyalarınımı çapırmaya geldi. Tema klasöründeki head.php dosyasını açıpyoruz ve <head> </head> taglerinin arasına aşağıdaki kodu yapıştırıyoruz.


<!-- Akordiyon Menü -->
	<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/lib/jquery.js"></script>
	<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/lib/chili-1.7.pack.js"></script>
	<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/lib/jquery.easing.js"></script>
	<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/lib/jquery.dimensions.js"></script>
	<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/jquery.accordion.js"></script>
	<script type="text/javascript">
	jQuery().ready(function(){
		// highly customized accordion
		jQuery('#list2').accordion({
			event: 'mouseover',
			active: '.selected',
			selectedClass: 'active',
			animated: "bounceslide",
			header: "dt"
		}).bind("change.ui-accordion", function(event, ui) {
			jQuery('<div>' + ui.oldHeader.text() + ' hidden, ' + ui.newHeader.text() + ' shown</div>').appendTo('#log');
		});
		// bind to change event of select to control first and seconds accordion
		// similar to tab's plugin triggerTab(), without an extra method
		var accordions = jQuery('#list2');
		jQuery('#switch select').change(function() {
			accordions.accordion("activate", this.selectedIndex-1 );
		});
		jQuery('#close').click(function() {
			accordions.accordion("activate", -1);
		});
		jQuery('#switch2').change(function() {
			accordions.accordion("activate", this.value);
		});
		jQuery('#enable').click(function() {
			accordions.accordion("enable");
		});
		jQuery('#disable').click(function() {
			accordions.accordion("disable");
		});
		jQuery('#remove').click(function() {
			accordions.accordion("destroy");
			wizardButtons.unbind("click");
		});
	});
	</script>
<!-- Akordiyon Menü-->

Bu işlemi de tamamladıktan sonra temamızda görüntüleme işi kaldı. Bunun için sidebar.php dosyamızı açıyoruz ve yan menüden sonra görüntülemek istiyorsak oryada aşağıdaki kodları yağıştırıyoruz.


<!-- Akordiyon Menü -->
	<fieldset>
		<legend>Akordiyon deneme</legend>
		<dl id="list2">
			<dt class="red">Kırmızı</dt>
			<dd>
				Buraya ekleme yapın. <BR>
				Buraya ekleme yapın. <BR>
				Buraya ekleme yapın. <BR>
				Buraya ekleme yapın. <BR>
				Buraya ekleme yapın. <BR>
			</dd>
			<dt class="green selected">Yeşil</dt>
			<dd>
				Buraya ekleme yapın. <BR>
				Buraya ekleme yapın. <BR>
				Buraya ekleme yapın. <BR>
				Buraya ekleme yapın. <BR>
				Buraya ekleme yapın. <BR>
				Buraya ekleme yapın. <BR>
				Buraya ekleme yapın. <BR>
			</dd>
			<dt class="blue">Mavi</dt>
			<dd>
				Buraya ekleme yapın. <BR>
				Buraya ekleme yapın. <BR>
				Buraya ekleme yapın. <BR>
				Buraya ekleme yapın. <BR>
				Buraya ekleme yapın. <BR>
			</dd>
		</dl>
	</fieldset>
<!-- Akordiyon Menü -->

İşte menümüz hazır. yukarıda belirttiğim “ Buraya ekleme yapın.” yerine isterseniz metin girebilir yada göstermek istediğiniz menün kodlarını yapıştırabilirsiniz. Mesela arşivinizi aylara göre görüntülemek istiyorsanız bu cümllerin yerine aşağıdaki kodu girebilirsiniz.

<?php wp_get_archives('type=monthly'); ?>

Çalışmamızın sonunda elde edeceğimiz çıktı aşağıdaki gibi olması gerekiyor.

Mümkün oldukça basite indirgeyerek anlatmaya çalıştım umarım faydalı olmuştur. Kolay gelsin.

]]> http://www.sanalduvar.com/jquery-eklentisi-akordiyon-menu-385.html/feed 5 Ajax-Dynamic-CSS-DHTML Menü Programı http://www.sanalduvar.com/ajax-dynamic-css-dhtml-menu-programi-382.html http://www.sanalduvar.com/ajax-dynamic-css-dhtml-menu-programi-382.html#comments Sat, 05 Jul 2008 18:21:02 +0000 Veysel http://www.sanalduvar.com/?p=382 Şimdi bu başlığı gören arkadaşlar hem Dynamic(Dinamik) yazmış hemde DHTML yazmış, ikiside aynı şey diyebilirler. Evet öyle fakat bahsedeceğim ürün kendisini DHTML Menü olarka tanıtmış. Hal böyle olunca başlık biraz garip görünebilir. Önemli olan işlev olduğu için buna takılmaya gerek yok. Bahsedeceğim program webmasterların bir numaralı bir yardımcı olacağını düşünüyorum.

Programımızın adı “DHTML Menu”; sayesinde dinamik, ajax, css gibi menüleri çok çok kolay bir şekilde hazırlamanızı sağlıyor. Buradaki sitesinden indireceğiniz programını kurup çalışmaya başladığınız zaman zaten hazır bir menü geliyor isterseniz onun üzüerinde de kendi isteğinize göre değikliği fazla uğraşmadan yapabiliyorsunuz.

Programda Windows, Vista, Sample, Clear gibi temalar mevcut. bunlardan birini seçip bir kaç dakikada muşteşem bir menü(normal, ağaç, tab menüleri) hazırlayabilirsiniz. Örnekte gösterdiğim gibi.

Sadece bununla da kalmıyor :) Birde tek bir tıklama ile “sitemap”iniz hazır. Eğer yine sizi tatmin etmediyse söyleyeyim, tekrar bir tıklama ile gerekli kodları size sunuyor. Gerek “Google XML Sitemap” olsun, gerek “SE-Friendly Code” olsun hemen oluşturuluyor.

Yalnız hemen hatırlatayım, program ücretli olup, malumunuz deneme sürümün kullandım. Satın almak isterseniz 49.95$ ila 499.95$ gibi bir fiyatı gözden çıkarmanız gerek.

]]> http://www.sanalduvar.com/ajax-dynamic-css-dhtml-menu-programi-382.html/feed 0 Ajax Akordiyon Menü! http://www.sanalduvar.com/ajax-akordiyon-menu-334.html http://www.sanalduvar.com/ajax-akordiyon-menu-334.html#comments Sun, 27 Apr 2008 16:19:11 +0000 Veysel http://www.sanalduvar.com/?p=334 Sanki internetin gereklerinden biri haline gelmiş, sanki web2′nin olmazsa olmazı(buarada bende kullanıyom gördüğünüz gibi)! bir zamanlar "tab menü" meşhurdu, fakat artık reğabet akordiyon menülerde ta ki alternatifler sunulana kadar. Size bir akordiyon menü nasıl yapılır hazır dosyalarıyla birlikte sunacağım.

Günümüzde internet yapmcılarının vazgeçemedikleri bir olan AJAX teknolojisi kullananların sayfalarında çekiciklik katıyor. Neyse artık konuya geçmenin zamanı geldi sanırım.

Nasıl bir görünüm kazanaksınız

Yukarıdaki gibi bir görünüm fakat yeterli değil diyorsanız buradan demoyu inceleyebilirsiniz.

İcraat Bölümü

  1. Gerekli dosyalarınız öncelikle buradan indir ve .rarlı dosyadakileri çıkarın.
  2. JScript dosylarını ana dizine atın.
  3. Style.css dosyasındaki kodları kendi temanızın style dosyasının içine yapıştırın(*dikkat edilmesi gereken konu .body bölümü, çünkü kendi temanızda muhtemelen body olarak tanımlı bölüm mevcut olacaktır.)
  4. .rarlı dosyaan çkardığınız klasörün içindeki örenklerden(HTML dosyalarını inceleyin) hangisini beğendiyseniz. onu açın ve görüntüleyin. Ekrana fare ile sağ tıklayın ve kaynağ görüntüleyi seçin.
  5. Aşağıdaki koduları JScript dosyasını çağırmak için görüntülemek istediğiniz dosyanın içine yağıştırın.

 

Kod

<script type="text/javascript" src="accordian.pack.js"></script>

<body onload="new Accordian(‘basic-accordian’,5,’header_highlight’);">

<div id="test-header" class="accordion_headings header_highlight" >Home</div>

    <div id="test-content">

        <div class="accordion_child">

Buraya görüntülenmesini istediğniz yazıyı ya da kodu ekleyin

        </div>

</div>

Turuncu ile gösterdiğim bölgelere alternatifler üretebilirsiniz. 

Elimden geldikçe basit anlatmaya çalıştım, gereksiz bilgilerden kaçındım. Umarım faydalı olmuştur.

 

]]> http://www.sanalduvar.com/ajax-akordiyon-menu-334.html/feed 0