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
- (function ($) {
- // default settings
- var defaultSettings = {
- // DESKTOP MODE SETTINGS
- logo_align: 'left', // align the logo left or right. options (left) or (right)
- links_align: 'left', // align the links left or right. options (left) or (right)
- socialBar_align: 'left', // align the socialBar left or right. options (left) or (right)
- searchBar_align: 'right', // align the search bar left or right. options (left) or (right)
- trigger: 'hover', // show drop down using click or hover. options (hover) or (click)
- effect: 'fade', // drop down effects. options (fade), (scale), (expand-top), (expand-bottom), (expand-left), (expand-right)
- effect_speed: 400, // drop down show speed in milliseconds
- 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)
- 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)
- top_fixed: false, // fixed the menu top of the screen. options (true) or (false)
- sticky_header: false, // menu fixed on top when scroll down down. options (true) or (false)
- 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.
- menu_position: 'horizontal', // change the menu position. options (horizontal), (vertical-left) or (vertical-right)
- full_width: true, // make menu full width. options (true) or (false)
- // MOBILE MODE SETTINGS
- mobile_settings: {
- collapse: false, // collapse the menu on click. options (true) or (false)
- sibling: true, // hide the others showing drop downs when click on current drop down. options (true) or (false)
- scrollBar: true, // enable the scroll bar. options (true) or (false)
- scrollBar_height: 400, // scroll bar height in px value. this option works if the scrollBar option true.
- top_fixed: false, // fixed menu top of the screen. options (true) or (false)
- sticky_header: false, // menu fixed on top when scroll down down. options (true) or (false)
- 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.
- }
- };
- // extend function
- $.fn.megaMenu = function (settings) {
- settings = $.extend({}, defaultSettings, settings || {});
- return this.each(function () {
-
- // variables
- var $this = $(this),
- $ul = 'ul',
- $li = 'li',
- $a = 'a',
- menu_logo = $this.find('.menu-logo'),
- menu_logo_li = menu_logo.children($li),
- menu_links = $this.find('.menu-links'),
- menu_links_li = menu_links.children($li),
- menu_socialBar = $this.find('.menu-social-bar'),
- menu_searchBar = $this.find('.menu-search-bar'),
- mobile_trigger_button = '.menu-mobile-collapse-trigger',
- mobile_dropDown_trigger = '.mobileTriggerButton',
- desktop_dropDown_trigger = '.desktopTriggerButton',
- activeClass = 'active',
- activeTrigger = 'activeTrigger',
- activeTriggerMobile = 'activeTriggerMobile',
- dropDown = '.drop-down-multilevel, .drop-down, .drop-down-tab-bar',
- desktopTopFixed = 'desktopTopFixed',
- mobileTopFixed = 'mobileTopFixed',
- fullWidth = 'menuFullWidth',
- Canvas;
-
- // Main Object
- Canvas = {
- // menu full width function
- menu_full_width: function () {
- // check if the full_width options true
- if (settings.full_width === true) {
- // add class menu full width
- $this.addClass(fullWidth);
- }
- },
- // logo align function
- logo_Align: function () {
- // check is the logo align right
- if (settings.logo_align === 'right') {
- // add class menu align right
- menu_logo.addClass('menu-logo-align-right');
- }
- },
- // menu links align right
- links_Align: function () {
- // check if the links align right
- if (settings.links_align === 'right') {
- // add class menu menu links align
- menu_links.addClass('menu-links-align-right');
- }
- },
- // menu social bar align right
- social_bar_Align: function () {
- // check if the social bar align right
- if (settings.socialBar_align === 'right') {
- // add class menu social bar align
- menu_socialBar.addClass('menu-social-bar-right');
- }
- },
- // menu search bar align right
- search_bar_Align: function () {
- // check if the search bar align right
- if (settings.searchBar_align === 'left') {
- // add class menu search bar align
- menu_searchBar.addClass('menu-search-bar-left');
- }
- },
- // mobile collapse trigger button
- collapse_trigger_button: function () {
- // check if the collapse true
- if (settings.mobile_settings.collapse === true) {
- // append the mobile collapse trigger button
- menu_logo_li.append('<div class="menu-mobile-collapse-trigger">' +
- '<span></span>' +
- '</div>');
- // hide the menu links, menu social bar
- var drop_down = menu_links.add(menu_socialBar);
- drop_down.hide(0);
- // apply css
- menu_searchBar.addClass(activeClass);
- // add the click trigger
- $this.find(mobile_trigger_button).on('click', function () {
- // check if the menu links and menu social bar hide
- if (drop_down.is(':hidden')) {
- // show the drop down
- $(this).addClass(activeClass);
- drop_down.show(0);
- } else {
- // hide the drop down
- $(this).removeClass(activeClass);
- drop_down.hide(0);
- }
- return false;
- });
- }
- },
- // switch effects
- switch_effects: function () {
- switch (settings.effect) {
- case 'fade':
- $this.find(dropDown).addClass('effect-fade');
- break;
- case 'scale':
- $this.find(dropDown).addClass('effect-scale');
- break;
- case 'expand-top':
- $this.find(dropDown).addClass('effect-expand-top');
- break;
- case 'expand-bottom':
- $this.find(dropDown).addClass('effect-expand-bottom');
- break;
- case 'expand-left':
- $this.find(dropDown).addClass('effect-expand-left');
- break;
- case 'expand-right':
- $this.find(dropDown).addClass('effect-expand-right');
- break;
- }
- },
- // transition delay
- transition_delay: function () {
- // add the effects class on drop down
- $this.find(dropDown).css({
- 'webkitTransition': 'all ' + settings.effect_speed + 'ms ease ',
- 'transition': 'all ' + settings.effect_speed + 'ms ease '
- });
- },
- // hover trigger for desktop mode
- hover_trigger: function () {
- // check if the trigger hover
- if (settings.trigger === 'hover') {
- // add the effects class on drop down
- Canvas.transition_delay();
- // add hover trigger
- $this.find(dropDown).parents($li).addClass('hoverTrigger');
- // switch effects
- Canvas.switch_effects();
- }
- },
- // click trigger for mobile mode
- mobile_trigger: function () {
- // append the mobile trigger div
- $this.find(dropDown).prev($a).append('<div class="mobileTriggerButton"></div>');
- // add the click trigger on mobile trigger div
- $this.find(mobile_dropDown_trigger).on('click', function () {
- // variables
- var elem = $(this),
- parents = elem.parents($a),
- drop_down = parents.next(dropDown);
- // check if the drop down is hidden
- if (drop_down.is(':hidden')) {
- // check if the sibling true
- if (settings.mobile_settings.sibling === true) {
- // hide the others opens drop downs
- elem.parents($this).siblings($ul + ',' + $li).find(dropDown).hide(0);
- // remove active class
- elem.parents($this).siblings($li).removeClass(activeTriggerMobile);
- elem.parents($this).siblings($ul).find($li).removeClass(activeTriggerMobile);
- }
- // add active class
- parents.parent($li).addClass(activeTriggerMobile);
- // show drop down
- drop_down.show(0);
- } else {
- // remove active class
- parents.parent($li).removeClass(activeTriggerMobile);
- // hide drop down
- drop_down.hide(0);
- }
- // stop a tag going to anywhere
- return false;
- });
- // stop icons click behaviour
- $this.find('i.fa.fa-indicator').on('click', function () {
- return false;
- });
- },
- // click trigger for desktop mode
- click_trigger: function () {
- // check if the trigger click
- if (settings.trigger === 'click') {
- // append the desktop trigger div
- $this.find(dropDown).prev($a).append('<div class="desktopTriggerButton"></div>');
- // add click trigger div
- $this.find(dropDown).parents($li).addClass('ClickTrigger');
- // add the transition on drop down
- Canvas.switch_effects();
- Canvas.transition_delay();
- // add the click trigger on desktop trigger div
- $this.find(desktop_dropDown_trigger).on('click', function (event) {
- event.stopPropagation();
- event.stopImmediatePropagation();
- // variables
- var elem = $(this),
- parents = elem.parents($a),
- drop_down = parents.next(dropDown);
- // check if the drop down is hidden
- if (!(drop_down.hasClass(activeClass))) {
- // check if the sibling true
- if (settings.sibling === true) {
- // hide the others opens drop downs
- elem.parents($this).siblings($ul + ',' + $li).find(dropDown).removeClass(activeClass);
- // remove active class
- elem.parents($this).siblings($li).removeClass(activeTrigger);
- elem.parents($this).siblings($ul).find($li).removeClass(activeTrigger);
- }
- // add active class
- parents.parent($li).addClass(activeTrigger);
- // show drop down
- drop_down.addClass(activeClass);
- } else {
- // remove active class
- parents.parent($li).removeClass(activeTrigger);
- // hide drop down
- drop_down.removeClass(activeClass);
- }
- // stop a tag going to anywhere
- //return false;
- });
- }
- },
- // outside click to close drop downs
- /*outside_close: function () {
- // check if the outside close setting true for desktop
- if (settings.outside_click_close === true
- && settings.trigger === 'click'
- && $this.find(dropDown).is(':visible')) {
- // add the click trigger on document
- $(document).off('click').on('click', function (event) {
- if (!$this.is(event.target) && $this.has(event.target).length === 0) {
- $this.find(dropDown).removeClass(activeClass);
- menu_links_li.removeClass('activeTrigger');
- }
- });
- } else {
- // on mobile mode off the click trigger
- $(document).off('click');
- }
- },*/
- // scroll bar for mobile mode
- scroll_bar: function () {
- // check if the scroll bar true
- if (settings.mobile_settings.scrollBar === true) {
- // add the css on menu links
- menu_links.css({
- 'maxHeight': settings.mobile_settings.scrollBar_height + 'px',
- 'overflow': 'auto'
- });
- }
- },
- // menu fixed on top
- top_Fixed: function () {
- // check if the top fixed true for desktop mode
- if (settings.top_fixed === true) {
- $this.addClass(desktopTopFixed);
- }
- // mobile mode top fixed
- if (settings.mobile_settings.top_fixed) {
- $this.addClass(mobileTopFixed);
- }
- },
- // sticky header
- sticky_Header: function () {
- // variable
- var $window = $(window),
- scrollFlag = true,
- scrollFlagMobile = true;
- // media query
- if (!($this.find(dropDown).is(':hidden'))) {
- // off the scroll
- $window.off('scroll');
- // check if the sticky header true
- if (settings.sticky_header === true
- && settings.menu_position === 'horizontal'
- && settings.top_fixed === false) {
- // scroll function
- $window.on('scroll', function () {
- if ($window.scrollTop() > settings.sticky_header_height) {
- // check if flag true
- if (scrollFlag === true) {
- // fade out
- $this.fadeOut(200, function () {
- // add class and fade in
- $(this).addClass(desktopTopFixed).fadeIn(200);
- });
- // scroll flag false
- scrollFlag = false;
- }
- } else {
- // check if flag false
- if (scrollFlag === false) {
- // fade out
- $this.fadeOut(200, function () {
- // add class and fade in
- $(this).removeClass(desktopTopFixed).fadeIn(200);
- });
- // scroll flag true
- scrollFlag = true;
- }
- }
- });
- }
- } else {
- // off the scroll
- $window.off('scroll');
- // check if the mobile sticky true
- if (settings.mobile_settings.sticky_header === true
- && settings.top_fixed === false) {
- // on the scroll
- $window.on('scroll', function () {
- if ($window.scrollTop() > settings.mobile_settings.sticky_header_height) {
- // check if flag true
- if (scrollFlagMobile === true) {
- // add class
- $this.addClass(mobileTopFixed);
- // flag false
- scrollFlagMobile = false;
- }
- } else {
- // check if flag false
- if (scrollFlagMobile === false) {
- // remove class
- $this.removeClass(mobileTopFixed);
- // scroll flag true
- scrollFlagMobile = true;
- }
- }
- });
- }
- }
- },
- // position change
- position: function () {
- // check if the position left
- if (settings.menu_position === 'vertical-left') {
- $this.addClass('vertical-left');
- } else if (settings.menu_position === 'vertical-right') {
- $this.addClass('vertical-right');
- }
- }
- };
-
- // call functions
- Canvas.menu_full_width();
- Canvas.logo_Align();
- Canvas.links_Align();
- Canvas.social_bar_Align();
- Canvas.search_bar_Align();
- Canvas.collapse_trigger_button();
- Canvas.hover_trigger();
- Canvas.mobile_trigger();
- Canvas.click_trigger();
- // Canvas.outside_close();
- Canvas.scroll_bar();
- Canvas.top_Fixed();
- Canvas.sticky_Header();
- Canvas.position();
- // window resize function used for update the function on windows resize
- $(window).resize(function () {
- // Canvas.outside_close();
- Canvas.sticky_Header();
- });
- });
- };
- /*global $, jQuery, document*/
- }(jQuery));