<\/div>\n

$\"SagTik\"$ <\/a>
\nYava\u015f yava\u015f web siteler de g\u00f6rselli\u011fin hat safhaya ula\u015ft\u0131\u011f\u0131n\u0131 g\u00f6rmekteyiz.\u00dc\u00e7 boyutlu grafiksel raporlardan tutunda, de\u011fi\u015fik de\u011fi\u015fik animasyonlara kadar bu i\u015f ald\u0131 ba\u015f\u0131n\u0131 gidiyor.(Tabi bu kasteddi\u011fim olaylar Flash ve Silverlight gibi animasyon tabanl\u0131 yaz\u0131l\u0131mlarla olu\u015fturulmam\u0131\u015f sitelerdir)\u00d6zellikle HTML 5’in animasyon mevzusu yok mu?Neyse, o konuya hi\u00e7 girmeyelim.Bu yaz\u0131mda sizlere sitenizde sa\u011f t\u0131k men\u00fcs\u00fc yapmaktan bahsedece\u011fim.\u00d6ncelikle bu eklenti de b\u00fcy\u00fck eme\u011fi olan Taner Tuncer karde\u015fime te\u015fekk\u00fcrlerimi sunuyorum.
\n
\nAsl\u0131nda anlayaca\u011f\u0131n\u0131z gibi, bu yaz\u0131da as\u0131l amac\u0131m men\u00fc yapmak de\u011fil var olan eklenti \u00fczerinde sitemize uygun \u015fekilde \u00e7al\u0131\u015fma yap\u0131p, entegresini anlatmak.Eklentinin dosyalar\u0131n\u0131 buradan<\/a> indirebilirsiniz.<\/p>\n

\u00d6ncelikle, sa\u011f t\u0131klama men\u00fcs\u00fcn\u00fc kullanaca\u011f\u0131m\u0131z sayfaya Jquery K\u00fct\u00fcphanesi(http:\/\/code.jquery.com\/jquery-1.8.3.js),Jquery-UI K\u00fct\u00fcphanesini(http:\/\/code.jquery.com\/jquery-1.8.3.js), JavaScript dosyam\u0131z\u0131(sagTikMenu1.0.js) ve CSS dosyam\u0131z\u0131(sagTikMenu.css) kaynak olarak belirtiyoruz.<\/p>\n

\r\n\t<script type="text\/javascript" src="http:\/\/code.jquery.com\/jquery-1.8.3.js"><\/script>\r\n\t<script type="text\/javascript" src="http:\/\/code.jquery.com\/ui\/1.9.2\/jquery-ui.js"><\/script>\r\n\t<script type="text\/javascript" src="sagTikMenu1.0.js"><\/script>\r\n\t<link rel="stylesheet" href="sagTikMenu.css" type="text\/css"\/>\r\n<\/pre>\nEvet art\u0131k bu kaynaklar\u0131 belirttikten sonra men\u00fcm\u00fcz\u00fcn kodlar\u0131n\u0131 yazabiliriz…taglar\u0131 aras\u0131na JavaScript kodlar\u0131m\u0131z\u0131 yazal\u0131m.<\/p>\n\r\n\t<script type="text\/javascript">\r\n\t$(function(){\r\n\t\t$("html,body").sagTikMenu({\r\n\t\t\tliste : '<li><a href="#">Gen\u00e7ay<\/a><\/li><li><a href="#">Y\u0131ld\u0131z<\/a><\/li>'\r\n\t\t});\r\n\t});\r\n\t<\/script>\r\n<\/pre>\nYukar\u0131daki kod blo\u011funda, ‘$(“html,body”)<\/em><\/strong>‘ etiketiyle bu fonksiyonun t\u00fcm<html><body>..<\/html><\/body>taglar\u0131 aras\u0131nda \u00e7al\u0131\u015faca\u011f\u0131n\u0131 belirtiyoruz.
\n‘$(“html,body”).sagTikMenu<\/em><\/strong>‘ isimli fonksiyonumuzun i\u00e7ine “Liste:” anahtar s\u00f6zc\u00fc\u011f\u00fcn\u00fcn i\u00e7ine g\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi men\u00fc kodlar\u0131n\u0131 yaz\u0131yoruz.<\/p>\nSayfaya gelip sa\u011f t\u0131klad\u0131\u011f\u0131m\u0131z zaman a\u015fa\u011f\u0131daki gibi men\u00fcm\u00fcz olu\u015fmaktad\u0131r.
\n<\/a><\/p>\n
E\u011fer herhangi bir men\u00fcye k\u0131sayol a\u00e7\u0131klamas\u0131 vermek istiyorsak a\u015fa\u011f\u0131daki gibi d\u00fczenlememiz yeterlidir.<\/p>\n
\r\n\t<script type="text\/javascript">\r\n\t$(function(){\r\n\t\t$("html,body").sagTikMenu({\r\n\t\t\tliste : '<li><a href="#">Gen\u00e7ay<span class="kisayol">ctrl + c<\/span><\/a><\/li><li><a href="#">Y\u0131ld\u0131z<\/a><\/li>'\r\n\t\t});\r\n\t});\r\n\t<\/script>\r\n<\/pre>\nG\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi “<a href>..<\/a><\/a>” tag\u0131n\u0131n i\u00e7ine bir “<span>..<\/span>” tag\u0131 a\u00e7mam\u0131z yeterlidir.Dikkat etmemiz gereken nokta, span tag\u0131n\u0131n class \u00f6zelli\u011fi “kisayol” olmal\u0131d\u0131r.
\nK\u0131sayol a\u00e7\u0131klamam\u0131z a\u015fa\u011f\u0131daki gibi g\u00f6z\u00fckmektedir.
\n<\/a><\/p>\n
E\u011fer herhangi bir men\u00fcm\u00fcze a\u00e7\u0131l\u0131r men\u00fc \u00f6zelli\u011fi katmak istiyorsak e\u011fer a\u015fa\u011f\u0131daki gibi yap\u0131land\u0131rma yapmal\u0131y\u0131z.<\/p>\n
\r\n\t<script type="text\/javascript">\r\n\t$(function(){\r\n\t\t$("html,body").sagTikMenu({\r\n\t\t\tliste : '<li><a href="#">Gen\u00e7ay<span class="kisayol">ctrl + c<\/span><\/a><\/li><li><a href="#">Y\u0131ld\u0131z<\/a><ul><li><a href="#">Acilir Menu<\/a><\/li><li><a href="#">Acilir Menu2<\/a><\/li><\/ul><\/li>'\r\n\t\t});\r\n\t});\r\n\t<\/script>\r\n<\/pre>\nG\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi,”<ul><li><a href>..<\/a><\/li><\/ul>” taglar\u0131n\u0131 a\u00e7t\u0131\u011f\u0131m\u0131z zaman a\u00e7\u0131l\u0131r men\u00fc \u00f6zelli\u011fini katm\u0131\u015f oluyoruz.<\/p>\nEkran g\u00f6r\u00fcnt\u00fcs\u00fc a\u015fa\u011f\u0131dad\u0131r.
\n<\/a><\/p>\n
E\u011fer a\u00e7\u0131l\u0131r men\u00fcyede k\u0131sayol a\u00e7\u0131klamas\u0131 eklemek istiyorsak, bildi\u011fimiz gibi span tag\u0131n\u0131 ekleyebiliriz.<\/p>\n
\r\n\t<script type="text\/javascript">\r\n\t$(function(){\r\n\t\t$("html,body").sagTikMenu({\r\n\t\t\tliste : '<li><a href="#">Gen\u00e7ay<span class="kisayol">ctrl + c<\/span><\/a><\/li><li><a href="#">Y\u0131ld\u0131z<\/a><ul><li><a href="#">Acilir Menu<\/a><\/li><li><a href="#">Acilir Menu2<span class="kisayol">ctrl + g<\/span><\/a><\/li><\/ul><\/li>'\r\n\t\t});\r\n\t});\r\n\t<\/script>\r\n<\/pre>\nEkran g\u00f6r\u00fcnt\u00fcs\u00fc a\u015fa\u011f\u0131dad\u0131r.
\n<\/a><\/p>\n
E\u011fer men\u00fcy\u00fc a\u00e7mak istemiyorsan\u0131z a\u015fa\u011f\u0131daki gibi yap\u0131land\u0131rma yapmam\u0131z gerekiyor.<\/p>\n
\r\n\t<script type="text\/javascript">\r\n\t$(function(){\r\n\t\t$("html,body").sagTikMenu({\r\n\t\t\tliste : '<li><a href="#">Gen\u00e7ay<span class="kisayol">ctrl + c<\/span><\/a><\/li><li><a href="#">Y\u0131ld\u0131z<\/a><ul><li><a href="#">Acilir Menu<\/a><\/li><li><a href="#">Acilir Menu2<span class="kisayol">ctrl + g<\/span><\/a><\/li><\/ul><\/li>',\r\n\t\t\tmenu : 'kapali'\r\n\t\t});\r\n\t});\r\n\t<\/script>\r\n<\/pre>\nE\u011fer bu \u015fekilde denerseniz sayfada sa\u011f t\u0131klad\u0131\u011f\u0131n\u0131z zaman hi\u00e7 bir men\u00fc a\u00e7\u0131lmayacakt\u0131r.(Browser’\u0131n manuel men\u00fcs\u00fcde dahil.)<\/p>\n
Men\u00fcn\u00fcn en can al\u0131c\u0131 noktalar\u0131ndan biriside, a\u00e7\u0131l\u0131\u015f an\u0131ndaki efektini ayarlayabiliyoruz.Bu efektleri “http:\/\/jqueryui.com\/show\/” sayfas\u0131ndaki efekt isimlerinden herhangi birini se\u00e7erek yapabiliyoruz.Bu linkte efektlerin nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 deneyerek g\u00f6rebilirsiniz.\u00d6rnek olarak “Bounce” tipindeki efekti kullanal\u0131m.Kodu a\u015fa\u011f\u0131daki gibi yap\u0131land\u0131rmal\u0131s\u0131n\u0131z.<\/p>\n
\r\n\t<script type="text\/javascript">\r\n\t$(function(){\r\n\t\t$("html,body").sagTikMenu({\r\n\t\t\tliste : '<li><a href="#">Gen\u00e7ay<span class="kisayol">ctrl + c<\/span><\/a><\/li><li><a href="#">Y\u0131ld\u0131z<\/a><ul><li><a href="#">Acilir Menu<\/a><\/li><li><a href="#">Acilir Menu2<span class="kisayol">ctrl + g<\/span><\/a><\/li><\/ul><\/li>',\r\n\t\t\tefektTip:'bounce'\r\n\t\t});\r\n\t});\r\n\t<\/script>\r\n<\/pre>\nAyn\u0131 \u015fekilde se\u00e7ti\u011fimiz efektin hareket h\u0131z\u0131n\u0131 ayarlayabiliyoruz.<\/p>\n
\r\n\t<script type="text\/javascript">\r\n\t$(function(){\r\n\t\t$("html,body").sagTikMenu({\r\n\t\t\tliste : '<li><a href="#">Gen\u00e7ay<span class="kisayol">ctrl + c<\/span><\/a><\/li><li><a href="#">Y\u0131ld\u0131z<\/a><ul><li><a href="#">Acilir Menu<\/a><\/li><li><a href="#">Acilir Menu2<span class="kisayol">ctrl + g<\/span><\/a><\/li><\/ul><\/li>',\r\n\t\t\tefektTip:'bounce',\r\n\t\t\tefektHiz: 3500\r\n\t\t});\r\n\t});\r\n\t<\/script>\r\n<\/pre>\nEklentimizin son \u00f6zelli\u011fi ise, sayfam\u0131zdaki herhangi belirtti\u011fimiz bir alanda sa\u011f t\u0131klama durumunda nas\u0131l men\u00fc olu\u015fturaca\u011f\u0131n\u0131 se\u00e7ebiliyoruz.
\n\u00d6rnek olarak ben bir div i\u00e7inde men\u00fcm\u00fcz\u00fcn farkl\u0131 bir \u015fekilde \u00e7al\u0131\u015fmas\u0131n\u0131 istiyorsam kodlar\u0131m\u0131z\u0131 a\u015fa\u011f\u0131daki gibi yap\u0131land\u0131rmam\u0131z laz\u0131m.<\/p>\n
\r\n\t<style type="text\/css">\r\n\tbody {margin: 0; padding: 0;}\r\n\t#a {border: 1px solid #ddd; margin: 20px; background-color:#9C6 ; width: 400px; height: 300px;}\r\n\t<\/style>\r\n\t<div id="a"><\/div>\r\n\/\/Divimiz bu olsun\r\n\r\n    \t<script type="text\/javascript">\r\n\t$(function(){\r\n\t\t$("html,body").sagTikMenu({\r\n\t\t\tliste : '<li><a href="#">Gen\u00e7ay<span class="kisayol">ctrl + c<\/span><\/a><\/li><li><a href="#">Y\u0131ld\u0131z<\/a><ul><li><a href="#">Acilir Menu<\/a><\/li><li><a href="#">Acilir Menu2<span class="kisayol">ctrl + g<\/span><\/a><\/li><\/ul><\/li>',\r\n\t\t\tefektTip:'bounce',\r\n\t\t\tefektHiz: 3500\r\n\t\t});\r\n\r\n\t\t$("#a").sagTikMenu({\r\n\t\t\tliste: '<li><a href="#">Kopyala<\/a><\/li>'\r\n\t\t});\r\n\t});\r\n\t<\/script>\r\n<\/pre>\nSonu\u00e7 olarak ekran \u00e7\u0131kt\u0131s\u0131 a\u015fa\u011f\u0131daki gibi olacakt\u0131r.<\/p>\n\n\n\n\n<\/a><\/td>\n<\/tr>\n
<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\nBir ka\u00e7 noktaya daha de\u011finmek istiyorum.
\nEklentimizin g\u00fczel \u00f6zelliklerinden biriside, sayfan\u0131n en sa\u011f\u0131nda sa\u011f t\u0131klan\u0131rsa, a\u00e7\u0131l\u0131r men\u00fcler sol tarafta a\u00e7\u0131lmaktad\u0131r.Men\u00fcy\u00fc a\u00e7\u0131k b\u0131rakt\u0131ktan sonra herhangi bir sekme ya da ekran a\u00e7\u0131ld\u0131\u011f\u0131 zaman men\u00fc otomatik olarak kendili\u011finden kapanmaktad\u0131r.Ayr\u0131ca bu eklentinin CSS dosyas\u0131 \u00fczerinde oynayarak men\u00fc renklerini zevkinize g\u00f6re de\u011fi\u015ftirebilirsiniz.<\/p>\n
Tekrardan Taner Tuncer arkada\u015f\u0131m\u0131za b\u00f6yle g\u00fczel bir eklenti payla\u015ft\u0131\u011f\u0131 i\u00e7in te\u015fekk\u00fcrlerimi sunar\u0131m.
\nFaydalanman\u0131z dile\u011fiyle…
\n\u0130yi \u00e7al\u0131\u015fmalar..<\/p>\n","protected":false},"excerpt":{"rendered":"
Yava\u015f yava\u015f web siteler de g\u00f6rselli\u011fin hat safhaya ula\u015ft\u0131\u011f\u0131n\u0131 g\u00f6rmekteyiz.\u00dc\u00e7 boyutlu grafiksel raporlardan tutunda, de\u011fi\u015fik de\u011fi\u015fik animasyonlara kadar bu i\u015f ald\u0131 ba\u015f\u0131n\u0131 gidiyor.(Tabi bu kasteddi\u011fim olaylar Flash ve Silverlight gibi animasyon tabanl\u0131 yaz\u0131l\u0131mlarla olu\u015fturulmam\u0131\u015f...<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18,19,23],"tags":[341,340],"class_list":["post-1325","post","type-post","status-publish","format-standard","hentry","category-javascript","category-jquery","category-web-tasarim","tag-eklenti","tag-sag-tik"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/1325","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=1325"}],"version-history":[{"count":1,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/1325\/revisions"}],"predecessor-version":[{"id":10381,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/1325\/revisions\/10381"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=1325"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=1325"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=1325"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}