Yazılım.
CevapSitesi.com Beta!
Çözüm Noktası
Bu siteyi Facebook, Twitter, Google+ veya e-posta ile paylaşın.
| Sorular | Makaleler | Üyeler | Etiketler  | İletişim
Soru sormak ya da cevap vermek için;
giriş yapın veya üye olun.

Sosyal medya hesaplarınızla da giriş yapabilirsiniz.

0



mega_menu.js dosyamda bir sorun var

mega_menu.js dosyamı html dosyama eklediğimde banner görünmeye başlıyor ama sitemin footer bölümünün üstünde bulunan haberler bölümüm çalışmıyor. Hatayı bulamıyorum. 

mega_menu.js dosyam



  1. (function ($) {
  2. // default settings
  3. var defaultSettings = {
  4. // DESKTOP MODE SETTINGS
  5. logo_align: 'left', // align the logo left or right. options (left) or (right)
  6. links_align: 'left', // align the links left or right. options (left) or (right)
  7. socialBar_align: 'left', // align the socialBar left or right. options (left) or (right)
  8. searchBar_align: 'right', // align the search bar left or right. options (left) or (right)
  9. trigger: 'hover', // show drop down using click or hover. options (hover) or (click)
  10. effect: 'fade', // drop down effects. options (fade), (scale), (expand-top), (expand-bottom), (expand-left), (expand-right)
  11. effect_speed: 400, // drop down show speed in milliseconds
  12. sibling: true, // hide the others showing drop downs if this option true. this option works on if the trigger option is "click". options (true) or (false)
  13. outside_click_close: true, // hide the showing drop downs when user click outside the menu. this option works if the trigger option is "click". options (true) or (false)
  14. top_fixed: false, // fixed the menu top of the screen. options (true) or (false)
  15. sticky_header: false, // menu fixed on top when scroll down down. options (true) or (false)
  16. sticky_header_height: 200, // sticky header height top of the screen. activate sticky header when meet the height. option change the height in px value.
  17. menu_position: 'horizontal', // change the menu position. options (horizontal), (vertical-left) or (vertical-right)
  18. full_width: true, // make menu full width. options (true) or (false)
  19. // MOBILE MODE SETTINGS
  20. mobile_settings: {
  21. collapse: false, // collapse the menu on click. options (true) or (false)
  22. sibling: true, // hide the others showing drop downs when click on current drop down. options (true) or (false)
  23. scrollBar: true, // enable the scroll bar. options (true) or (false)
  24. scrollBar_height: 400, // scroll bar height in px value. this option works if the scrollBar option true.
  25. top_fixed: false, // fixed menu top of the screen. options (true) or (false)
  26. sticky_header: false, // menu fixed on top when scroll down down. options (true) or (false)
  27. sticky_header_height: 200 // sticky header height top of the screen. activate sticky header when meet the height. option change the height in px value.
  28. }
  29. };
  30. // extend function
  31. $.fn.megaMenu = function (settings) {
  32. settings = $.extend({}, defaultSettings, settings || {});
  33. return this.each(function () {
  34.  
  35. // variables
  36. var $this = $(this),
  37. $ul = 'ul',
  38. $li = 'li',
  39. $a = 'a',
  40. menu_logo = $this.find('.menu-logo'),
  41. menu_logo_li = menu_logo.children($li),
  42. menu_links = $this.find('.menu-links'),
  43. menu_links_li = menu_links.children($li),
  44. menu_socialBar = $this.find('.menu-social-bar'),
  45. menu_searchBar = $this.find('.menu-search-bar'),
  46. mobile_trigger_button = '.menu-mobile-collapse-trigger',
  47. mobile_dropDown_trigger = '.mobileTriggerButton',
  48. desktop_dropDown_trigger = '.desktopTriggerButton',
  49. activeClass = 'active',
  50. activeTrigger = 'activeTrigger',
  51. activeTriggerMobile = 'activeTriggerMobile',
  52. dropDown = '.drop-down-multilevel, .drop-down, .drop-down-tab-bar',
  53. desktopTopFixed = 'desktopTopFixed',
  54. mobileTopFixed = 'mobileTopFixed',
  55. fullWidth = 'menuFullWidth',
  56. Canvas;
  57.  
  58. // Main Object
  59. Canvas = {
  60. // menu full width function
  61. menu_full_width: function () {
  62. // check if the full_width options true
  63. if (settings.full_width === true) {
  64. // add class menu full width
  65. $this.addClass(fullWidth);
  66. }
  67. },
  68. // logo align function
  69. logo_Align: function () {
  70. // check is the logo align right
  71. if (settings.logo_align === 'right') {
  72. // add class menu align right
  73. menu_logo.addClass('menu-logo-align-right');
  74. }
  75. },
  76. // menu links align right
  77. links_Align: function () {
  78. // check if the links align right
  79. if (settings.links_align === 'right') {
  80. // add class menu menu links align
  81. menu_links.addClass('menu-links-align-right');
  82. }
  83. },
  84. // menu social bar align right
  85. social_bar_Align: function () {
  86. // check if the social bar align right
  87. if (settings.socialBar_align === 'right') {
  88. // add class menu social bar align
  89. menu_socialBar.addClass('menu-social-bar-right');
  90. }
  91. },
  92. // menu search bar align right
  93. search_bar_Align: function () {
  94. // check if the search bar align right
  95. if (settings.searchBar_align === 'left') {
  96. // add class menu search bar align
  97. menu_searchBar.addClass('menu-search-bar-left');
  98. }
  99. },
  100. // mobile collapse trigger button
  101. collapse_trigger_button: function () {
  102. // check if the collapse true
  103. if (settings.mobile_settings.collapse === true) {
  104. // append the mobile collapse trigger button
  105. menu_logo_li.append('<div class="menu-mobile-collapse-trigger">' +
  106. '<span></span>' +
  107. '</div>');
  108. // hide the menu links, menu social bar
  109. var drop_down = menu_links.add(menu_socialBar);
  110. drop_down.hide(0);
  111. // apply css
  112. menu_searchBar.addClass(activeClass);
  113. // add the click trigger
  114. $this.find(mobile_trigger_button).on('click', function () {
  115. // check if the menu links and menu social bar hide
  116. if (drop_down.is(':hidden')) {
  117. // show the drop down
  118. $(this).addClass(activeClass);
  119. drop_down.show(0);
  120. } else {
  121. // hide the drop down
  122. $(this).removeClass(activeClass);
  123. drop_down.hide(0);
  124. }
  125. return false;
  126. });
  127. }
  128. },
  129. // switch effects
  130. switch_effects: function () {
  131. switch (settings.effect) {
  132. case 'fade':
  133. $this.find(dropDown).addClass('effect-fade');
  134. break;
  135. case 'scale':
  136. $this.find(dropDown).addClass('effect-scale');
  137. break;
  138. case 'expand-top':
  139. $this.find(dropDown).addClass('effect-expand-top');
  140. break;
  141. case 'expand-bottom':
  142. $this.find(dropDown).addClass('effect-expand-bottom');
  143. break;
  144. case 'expand-left':
  145. $this.find(dropDown).addClass('effect-expand-left');
  146. break;
  147. case 'expand-right':
  148. $this.find(dropDown).addClass('effect-expand-right');
  149. break;
  150. }
  151. },
  152. // transition delay
  153. transition_delay: function () {
  154. // add the effects class on drop down
  155. $this.find(dropDown).css({
  156. 'webkitTransition': 'all ' + settings.effect_speed + 'ms ease ',
  157. 'transition': 'all ' + settings.effect_speed + 'ms ease '
  158. });
  159. },
  160. // hover trigger for desktop mode
  161. hover_trigger: function () {
  162. // check if the trigger hover
  163. if (settings.trigger === 'hover') {
  164. // add the effects class on drop down
  165. Canvas.transition_delay();
  166. // add hover trigger
  167. $this.find(dropDown).parents($li).addClass('hoverTrigger');
  168. // switch effects
  169. Canvas.switch_effects();
  170. }
  171. },
  172. // click trigger for mobile mode
  173. mobile_trigger: function () {
  174. // append the mobile trigger div
  175. $this.find(dropDown).prev($a).append('<div class="mobileTriggerButton"></div>');
  176. // add the click trigger on mobile trigger div
  177. $this.find(mobile_dropDown_trigger).on('click', function () {
  178. // variables
  179. var elem = $(this),
  180. parents = elem.parents($a),
  181. drop_down = parents.next(dropDown);
  182. // check if the drop down is hidden
  183. if (drop_down.is(':hidden')) {
  184. // check if the sibling true
  185. if (settings.mobile_settings.sibling === true) {
  186. // hide the others opens drop downs
  187. elem.parents($this).siblings($ul + ',' + $li).find(dropDown).hide(0);
  188. // remove active class
  189. elem.parents($this).siblings($li).removeClass(activeTriggerMobile);
  190. elem.parents($this).siblings($ul).find($li).removeClass(activeTriggerMobile);
  191. }
  192. // add active class
  193. parents.parent($li).addClass(activeTriggerMobile);
  194. // show drop down
  195. drop_down.show(0);
  196. } else {
  197. // remove active class
  198. parents.parent($li).removeClass(activeTriggerMobile);
  199. // hide drop down
  200. drop_down.hide(0);
  201. }
  202. // stop a tag going to anywhere
  203. return false;
  204. });
  205. // stop icons click behaviour
  206. $this.find('i.fa.fa-indicator').on('click', function () {
  207. return false;
  208. });
  209. },
  210. // click trigger for desktop mode
  211. click_trigger: function () {
  212. // check if the trigger click
  213. if (settings.trigger === 'click') {
  214. // append the desktop trigger div
  215. $this.find(dropDown).prev($a).append('<div class="desktopTriggerButton"></div>');
  216. // add click trigger div
  217. $this.find(dropDown).parents($li).addClass('ClickTrigger');
  218. // add the transition on drop down
  219. Canvas.switch_effects();
  220. Canvas.transition_delay();
  221. // add the click trigger on desktop trigger div
  222. $this.find(desktop_dropDown_trigger).on('click', function (event) {
  223. event.stopPropagation();
  224. event.stopImmediatePropagation();
  225. // variables
  226. var elem = $(this),
  227. parents = elem.parents($a),
  228. drop_down = parents.next(dropDown);
  229. // check if the drop down is hidden
  230. if (!(drop_down.hasClass(activeClass))) {
  231. // check if the sibling true
  232. if (settings.sibling === true) {
  233. // hide the others opens drop downs
  234. elem.parents($this).siblings($ul + ',' + $li).find(dropDown).removeClass(activeClass);
  235. // remove active class
  236. elem.parents($this).siblings($li).removeClass(activeTrigger);
  237. elem.parents($this).siblings($ul).find($li).removeClass(activeTrigger);
  238. }
  239. // add active class
  240. parents.parent($li).addClass(activeTrigger);
  241. // show drop down
  242. drop_down.addClass(activeClass);
  243. } else {
  244. // remove active class
  245. parents.parent($li).removeClass(activeTrigger);
  246. // hide drop down
  247. drop_down.removeClass(activeClass);
  248. }
  249. // stop a tag going to anywhere
  250. //return false;
  251. });
  252. }
  253. },
  254. // outside click to close drop downs
  255. /*outside_close: function () {
  256. // check if the outside close setting true for desktop
  257. if (settings.outside_click_close === true
  258. && settings.trigger === 'click'
  259. && $this.find(dropDown).is(':visible')) {
  260. // add the click trigger on document
  261. $(document).off('click').on('click', function (event) {
  262. if (!$this.is(event.target) && $this.has(event.target).length === 0) {
  263. $this.find(dropDown).removeClass(activeClass);
  264. menu_links_li.removeClass('activeTrigger');
  265. }
  266. });
  267. } else {
  268. // on mobile mode off the click trigger
  269. $(document).off('click');
  270. }
  271. },*/
  272. // scroll bar for mobile mode
  273. scroll_bar: function () {
  274. // check if the scroll bar true
  275. if (settings.mobile_settings.scrollBar === true) {
  276. // add the css on menu links
  277. menu_links.css({
  278. 'maxHeight': settings.mobile_settings.scrollBar_height + 'px',
  279. 'overflow': 'auto'
  280. });
  281. }
  282. },
  283. // menu fixed on top
  284. top_Fixed: function () {
  285. // check if the top fixed true for desktop mode
  286. if (settings.top_fixed === true) {
  287. $this.addClass(desktopTopFixed);
  288. }
  289. // mobile mode top fixed
  290. if (settings.mobile_settings.top_fixed) {
  291. $this.addClass(mobileTopFixed);
  292. }
  293. },
  294. // sticky header
  295. sticky_Header: function () {
  296. // variable
  297. var $window = $(window),
  298. scrollFlag = true,
  299. scrollFlagMobile = true;
  300. // media query
  301. if (!($this.find(dropDown).is(':hidden'))) {
  302. // off the scroll
  303. $window.off('scroll');
  304. // check if the sticky header true
  305. if (settings.sticky_header === true
  306. && settings.menu_position === 'horizontal'
  307. && settings.top_fixed === false) {
  308. // scroll function
  309. $window.on('scroll', function () {
  310. if ($window.scrollTop() > settings.sticky_header_height) {
  311. // check if flag true
  312. if (scrollFlag === true) {
  313. // fade out
  314. $this.fadeOut(200, function () {
  315. // add class and fade in
  316. $(this).addClass(desktopTopFixed).fadeIn(200);
  317. });
  318. // scroll flag false
  319. scrollFlag = false;
  320. }
  321. } else {
  322. // check if flag false
  323. if (scrollFlag === false) {
  324. // fade out
  325. $this.fadeOut(200, function () {
  326. // add class and fade in
  327. $(this).removeClass(desktopTopFixed).fadeIn(200);
  328. });
  329. // scroll flag true
  330. scrollFlag = true;
  331. }
  332. }
  333. });
  334. }
  335. } else {
  336. // off the scroll
  337. $window.off('scroll');
  338. // check if the mobile sticky true
  339. if (settings.mobile_settings.sticky_header === true
  340. && settings.top_fixed === false) {
  341. // on the scroll
  342. $window.on('scroll', function () {
  343. if ($window.scrollTop() > settings.mobile_settings.sticky_header_height) {
  344. // check if flag true
  345. if (scrollFlagMobile === true) {
  346. // add class
  347. $this.addClass(mobileTopFixed);
  348. // flag false
  349. scrollFlagMobile = false;
  350. }
  351. } else {
  352. // check if flag false
  353. if (scrollFlagMobile === false) {
  354. // remove class
  355. $this.removeClass(mobileTopFixed);
  356. // scroll flag true
  357. scrollFlagMobile = true;
  358. }
  359. }
  360. });
  361. }
  362. }
  363. },
  364. // position change
  365. position: function () {
  366. // check if the position left
  367. if (settings.menu_position === 'vertical-left') {
  368. $this.addClass('vertical-left');
  369. } else if (settings.menu_position === 'vertical-right') {
  370. $this.addClass('vertical-right');
  371. }
  372. }
  373. };
  374.  
  375. // call functions
  376. Canvas.menu_full_width();
  377. Canvas.logo_Align();
  378. Canvas.links_Align();
  379. Canvas.social_bar_Align();
  380. Canvas.search_bar_Align();
  381. Canvas.collapse_trigger_button();
  382. Canvas.hover_trigger();
  383. Canvas.mobile_trigger();
  384. Canvas.click_trigger();
  385. // Canvas.outside_close();
  386. Canvas.scroll_bar();
  387. Canvas.top_Fixed();
  388. Canvas.sticky_Header();
  389. Canvas.position();
  390. // window resize function used for update the function on windows resize
  391. $(window).resize(function () {
  392. // Canvas.outside_close();
  393. Canvas.sticky_Header();
  394. });
  395. });
  396. };
  397. /*global $, jQuery, document*/
  398. }(jQuery));

Soran:22.06.18 14:52
misafir  
Büyük ihtimalle bunda bir hata yoktur. Kullandığınız sayfadan kaynaklanan bir şey olabilir veya menü tanımlamalarını hatalı yapmış olabilirsiniz. →  cevapsitesi 22.06.18 23:53

Henüz cevap veren yok.

Bir cevap yazın: