Demo | Download

Demoyu incelediğinizde gerçekten hayran bırakan ve extra seçim aralıklarıyla, menü açıklamaları ve ajax kullanımıyla göz kabartan menü özellğine sahip.. Şimdiye kadar zingocan.com da verdiğimiz dropdown menülerden en iyisi diyebilirim..Ajax menü, Submenü ve submenü başlıkları, menü içerisinde form oluşturabilme ve header image kullanabilme şansımız var…Ayrıca iki çeşit renk düzenine sahip demo1 ve demo 2 de inceyebilirsiniz.

Hemen scrptin kullanımına geçelim..

Scriptin bağımlılıkları;

optional: jquery.metadata.plugin

optional: jquery.hoverIntent.plugin

aşağıda javascriptimizi çağırıyoruz;


&lt;code&gt;$(&quot;.myMenu&quot;).buildMenu(
 {
 template:&quot;menuVoices.jsp&quot;,
 additionalData:&quot;&quot;,
 menuWidth:200,
 openOnRight:false,
 menuSelector: &quot;.menuContainer&quot;,
 iconPath:&quot;ico/&quot;,
 hasImages:true,
 &lt;/code&gt;&lt;code&gt; fadeInTime:200,
 fadeOutTime:100,
 &lt;/code&gt;&lt;code&gt;adjustLeft:2,
 adjustTop:10,
 opacity:.95,
 shadow:true,&lt;/code&gt;&lt;code&gt;
 closeOnMouseOut:true,&lt;/code&gt;&lt;code&gt;
 closeAfter:500,
 minZindex:200,
 hoverIntent:0
 });&lt;/code&gt;

veya aşağıdaki ile asıl menüyü çağırıyoruz;

(bu bağlam opera sistemlerinde tam çalışmayabilir)


&lt;code&gt;$(document).buildContextualMenu(
 {
 template:&quot;menuVoices.html&quot;,
 menuWidth:200,
 overflow:2,
 menuSelector: &quot;.menuContainer&quot;,
 iconPath:&quot;ico/&quot;,
 hasImages:false,&lt;/code&gt;&lt;code&gt;
 &lt;/code&gt;&lt;code&gt; fadeInTime:200,&lt;/code&gt;
 &lt;code&gt; fadeOutTime:100,&lt;/code&gt;
 &lt;code&gt; adjustLeft:0,
 adjustTop:0,
 opacity:.99,
 shadow:true,
 &lt;/code&gt;&lt;code&gt;onContextualMenu:function(o,e){}&lt;/code&gt;
 &lt;code&gt; });&lt;/code&gt;

Aşağıda verdiğim kodda menü başlıkları yeralmaktaır;


&lt;code&gt;&lt;!-- menu voices --&gt;&lt;div&gt;&lt;table  class=&quot;rootVoices&quot; cellspacing='0' cellpadding='0'  border='0'&gt;&lt;tr&gt;
 &lt;td menu=&quot;menu_12&quot; &gt;ajax menu 1&lt;/td&gt;
 &lt;td menu=&quot;menu_2&quot; &gt;menu 2&lt;/td&gt;
 &lt;td menu=&quot;menu_3&quot; &gt;menu 3&lt;/td&gt;
 &lt;/tr&gt;&lt;/table&gt;
 &lt;/div&gt;
 &lt;/code&gt;
 &lt;!– end menu voices –&gt;

ve diğer her submenü için;


&lt;code&gt;&lt;!-- example code --&gt;&lt;div id=&quot;menu_1&quot;  class=&quot;menu&quot;&gt;&lt;a rel=&quot;title&quot; &gt;title menu_1.1&lt;/a&gt; &lt;!--  menuvoice title--&gt;
 &lt;a href=&quot;../mb_carusel/carousel.html&quot; target=&quot;_blank&quot; img=&quot;image.gif&quot;  &gt;menu_1.1 (href)&lt;/a&gt; &lt;!-- menuvoice with href--&gt;
 &lt;a action=&quot;document.title=('menu_1.2')&quot; &gt;menu_1.2&lt;/a&gt;  &lt;!-- menuvoice with js action--&gt;
 &lt;a rel=&quot;separator&quot;&gt;&lt;/a&gt; &lt;!-- menuvoice separator--&gt;
 &lt;a action=&quot;document.title=('menu_1.3')&quot;  disabled=true&gt;menu_1.3&lt;/a&gt; &lt;!-- menuvoice disabled--&gt;
 &lt;a action=&quot;document.title=('menu_1.4')&quot; menu=&quot;menu_1&quot;  img=&quot;image.png&quot;&gt;menu_1.4&lt;/a&gt;&lt;!-- menuvoice with js action,  image and submenu--&gt;
 &lt;/div&gt;&lt;/code&gt;

Bölgelerini kendinize göre değişerek sonuca ulaşınız..Teşekkürler..İşte Örnekler;

Zingocan | jQuery, CSS, Wordpress Dersleri

Bir Başkadır bu Wordpress Sitesi

Tag Archives: Overflow

jQuery & CSS Vertical Scrol Menu Dersi

jQuery & CSS Horizontal Scrol Menu Dersi

jQuery hover ve chlidren Metodu – Video Ders