1

I'm trying to change the way my menu is being displayed.

It works now like this:
The first level is just displayed on home page. Children items are being displayed as a dropline bar under the header.

I want to change to this:
the dropline bar to be displayed only at the second level items.

I have these two files but I don't know what to change:

First one:

(function ($) {
    $.fn.spmenu = function (options) {
        var defaults = {
            startLevel: 0,
            direction: 'ltr',
            center: 0,
            marginLeft: 0,
            marginTop: 0,
            width: 200,
            initOffset: {
                x: 0,
                y: 0
            },
            subOffset: {
                x: 0,
                y: 0
            }
        };

        var options = $.extend(defaults, options);

        return this.each(function () {

                //First Level

                $(this).find('>li.menu-item.parent').each(function (index) {

                        var $this = $(this);
                        var $submenu = $this.find('>.sp-submenu');
                        var rootLevel = ($this.closest('ul.sp-menu').hasClass('level-' + options.startLevel) ? true : false); //Detect Level Root               
                        if (rootLevel) {
                            $submenu.addClass('sub-level');

                            var marginTop = $this.height() + options.marginTop;
                            var marginLeft = options.marginLeft;

                            if (options.center) {
                                marginLeft = -($submenu.width() / 2) + ($submenu.closest('.parent').width() / 2);
                            } else {

                                var offset = $submenu.offset();
                                var submenuWidth = offset.left + $submenu.width();
                                var viewport = $(window).width();

                                if (viewport < submenuWidth) {
                                    var restWidth = submenuWidth - viewport;
                                } 
                                else if(offset.left < 0){
                                    restWidth = offset.left*(-1);
                                }

                                else {
                                    var restWidth = 0;
                                }

                                marginLeft = marginLeft - restWidth;
                            }

                            $submenu.find('>.sp-submenu-wrap').css({
                                    'margin-top': options.initOffset.y,
                                    'margin-left': options.initOffset.x
                            });


                            if (options.direction == 'rtl') {

                                $submenu.css({
                                        'top': marginTop,
                                        'right': marginLeft
                                });

                            } else {

                                $submenu.css({
                                        'top': marginTop,
                                        'left': marginLeft
                                });
                            }

                        } else {
                            $submenu.addClass('sub-level-child');
                            var marginTop = options.marginTop;
                            var offset = $submenu.offset();
                            var viweport = $(window).width();

                            var outerWidth = $submenu.outerWidth(true);
                            var parentouterWidth = $submenu.parent().outerWidth(true);

                            var submenuWidth = $submenu.width();

                            var parentWidth = $submenu.parent().width();

                            var isVisible = function(){
                                if( offset.left < 0 ) return false;
                                else if( viweport < (outerWidth+offset.left+submenuWidth) ) return false;
                                else return true;
                            }

                            var isMegaMenu = function(){
                                if( options.width < submenuWidth ) return true;
                                else return false;
                            }

                            var isRTL = function(){                                    
                                if( options.direction=='rtl' ) return true;
                                else return false;
                            }

                            var moveMenuPX = function(){
                                if (options.direction == 'ltr') {
                                    if( outerWidth > parentouterWidth ){
                                        if( isVisible() ) return parentouterWidth;
                                        else return submenuWidth;
                                    }
                                    else if( parentouterWidth < outerWidth ) return parentWidth;
                                    else if( outerWidth == parentouterWidth ) return outerWidth;
                                    else return options.width;
                                } else {

                                    if( outerWidth > parentouterWidth ){
                                        if( isVisible() ) return submenuWidth;
                                        else return parentouterWidth;
                                        //return submenuWidth;
                                    }
                                    else if( parentouterWidth < outerWidth ) return parentWidth;
                                    else if( outerWidth == parentouterWidth ) return submenuWidth;
                                    else return options.width;
                                }
                            }

                            /*
                            // info graphic
                            $submenu.attr('data-width', submenuWidth);
                            $submenu.attr('data-offset', offset.left);
                            $submenu.attr('data-outerwidth', outerWidth);
                            $submenu.attr('data-isvisible', isVisible);
                            $submenu.attr('data-ismegamenu', isMegaMenu);
                            $submenu.attr('data-viewport', viweport);
                            $submenu.attr('data-parentouterwidth', $submenu.parent().outerWidth(true));
                            */

                            if (options.direction == 'ltr') {

                                if( isVisible() ){
                                    marginLeft = moveMenuPX();
                                } else {
                                    marginLeft = -moveMenuPX();
                                }

                            } else {

                                if( isVisible() ){
                                    marginLeft = -moveMenuPX();
                                } else {
                                    marginLeft = moveMenuPX();
                                }
                            }



                            $submenu.find('>.sp-submenu-wrap').css({
                                    'margin-top': options.subOffset.y,
                                    'margin-left': options.subOffset.x
                            });

                            if (options.direction == 'rtl') {

                                $submenu.css({
                                        'top': 0,
                                        'right': 0
                                });

                                $submenu.css({
                                        'top': marginTop,
                                        'right': marginLeft
                                });

                            } else {

                                $submenu.css({
                                        'top': 0,
                                        'left': 0
                                });

                                $submenu.css({
                                        'top': marginTop,
                                        'left': marginLeft
                                });
                            }
                        }

                        var $timeer;

                        $this.on('mouseenter', function (event) {
                                event.stopImmediatePropagation();
                                $(this).find('>.sp-submenu').removeClass('open');
                                $(this).find('>.sp-submenu').addClass('open');                                    
                        });

                        $this.on('mouseleave', function (event) {
                                var $_this = $(this);
                                $(this).find('>.sp-submenu').removeClass('open');                                   
                        });
                });
        });

    };

})(jQuery);

And the second one:

(function($) {
    $.fn.spmenu = function(o) {
        var p = {
            startLevel: 0,
            direction: 'ltr',
            center: 0,
            marginLeft: 0,
            marginTop: 0,
            type: 'mega',
            mainWidthFrom: '.container',
            initOffset: {
                x: 0,
                y: 0
            },
            subOffset: {
                x: 0,
                y: 0
            }
        };
        var o = $.extend(p, o);
        return $(this).each(function() {
            $(this).find('>li.menu-item.parent').each(function(e) {
                var f = $(this);
                var g = f.find('>.sp-submenu');
                g.attr('style', '');
                var h = (f.closest('ul.sp-menu').hasClass('level-' + o.startLevel) ? true : false);
                if (h) {
                    g.addClass('sub-level');
                    var i = f.height() + o.marginTop;
                    var j = o.marginLeft;
                    if (o.center) {
                        j = -(g.width() / 2) + (g.closest('.parent').width() / 2)
                    } else {
                        var k = g.offset();
                        var l = $(o.mainWidthFrom).width();
                        if (l < n) {
                            var m = n - l
                        } else {
                            var m = 0
                        }
                        j = j - m
                    }
                    g.find('>.sp-submenu-wrap').css({
                        'margin-top': o.initOffset.y,
                        'margin-left': o.initOffset.x
                    })
                } else {
                    g.addClass('sub-level-child');
                    var i = o.marginTop;
                    var j = f.children('.sp-submenu').parent().width();
                    var k = g.offset();
                    var n = k.left + g.width();
                    var l = $(o.mainWidthFrom).width();
                    if (l > $(window).width()) {
                        l = $(window).width()
                    }
                    if (o.mainWidthFrom == 'body') l = l - (g.width() / 2);
                    if (l < n) {
                        j = -(g.width())
                    }
                    g.find('>.sp-submenu-wrap').css({
                        'margin-top': o.subOffset.y,
                        'margin-left': o.subOffset.x
                    })
                }
                f.hover(function(a) {
                    a.stopImmediatePropagation();
                    $(this).find('>.sp-submenu').removeClass('open');
                    var b = $(this).find('>.sp-submenu');
                    if (f.parent().hasClass('level-0')) {
                        b.css({
                            top: f.height(),
                            left: 0
                        }).addClass('open');
                        return true
                    }
                    if (o.type == 'split' && f.parent().hasClass('level-1')) {
                        b.css({
                            top: f.height(),
                            left: 0
                        }).addClass('open');
                        return
                    }
                    var c = $(window).width();
                    if (o.direction == 'rtl') {
                        if (f.offset().left < b.width()) {
                            var d = 0 - b.width();
                            b.css({
                                right: d
                            })
                        } else {
                            var d = f.width();
                            b.css({
                                right: d
                            })
                        }
                        b.addClass('open');
                        return true
                    }
                    if (f.offset().left + f.width() + b.width() > c) {
                        var d = 0 - b.width();
                        b.css({
                            left: d
                        })
                    } else {
                        var d = f.width();
                        b.css({
                            left: d
                        })
                    }
                    b.addClass('open')
                }, function(a) {
                    $(this).find('>.sp-submenu').removeClass('open')
                })
            })
        })
    }
})(jQuery);
(function($) {
    $.fn.spmenudrop = function(p) {
        var q = {
            startLevel: 0,
            direction: 'ltr',
            center: 0,
            marginLeft: 0,
            marginTop: 0,
            mainWidthFrom: '.container',
            initOffset: {
                x: 0,
                y: 0
            },
            subOffset: {
                x: 0,
                y: 0
            }
        };
        var p = $.extend(q, p);
        var r = $('ul.sp-menu.level-0 > li.active');
        var s = $('ul.sp-menu.level-0').find('li.parent').index(r);
        if (s != -1) $('#sublevel ul.level-1').not('.empty').eq(s).css({
            display: 'block'
        });
        $('ul.level-0 > li').not('.parent').hover(function() {
            clearInterval(p.Interval);
            $('#sublevel ul.level-1').css({
                display: 'none'
            })
        }, function() {
            p.Interval = setInterval(function() {
                $('#sublevel ul.level-1').css({
                    display: 'none'
                });
                var a = $('ul.sp-menu.level-0 > li.active');
                var b = $('ul.sp-menu.level-0').find('li.parent').index(a);
                if (b != -1) $('#sublevel ul.level-1').not('.empty').eq(b).css({
                    display: 'block'
                })
            }, 1000)
        });
        $('#sublevel, ul.level-0 li.parent').hover(function(a) {
            clearInterval(p.Interval)
        }, function() {
            p.Interval = setInterval(function() {
                $('#sublevel ul.level-1').css({
                    display: 'none'
                });
                var a = $('ul.sp-menu.level-0 > li.active');
                var b = $('ul.sp-menu.level-0').find('li.parent').index(a);
                if (b != -1) $('#sublevel ul.level-1').not('.empty').eq(b).css({
                    display: 'block'
                })
            }, 1000)
        });
        return $(this).each(function() {
            $(this).find('>li.menu-item.parent').each(function(f) {
                var g = $(this);
                var h = g.find('>.sp-submenu');
                h.attr('style', '');
                var i = (g.closest('ul.sp-menu').hasClass('level-' + p.startLevel) ? true : false);
                if (i) {
                    h.addClass('sub-level');
                    var j = g.height() + p.marginTop;
                    var k = p.marginLeft;
                    if (p.center) {
                        k = -(h.width() / 2) + (h.closest('.parent').width() / 2)
                    } else {
                        var l = h.offset();
                        var m = $(p.mainWidthFrom).width();
                        if (m < o) {
                            var n = o - m
                        } else {
                            var n = 0
                        }
                        k = k - n
                    }
                    h.find('>.sp-submenu-wrap').css({
                        'margin-top': p.initOffset.y,
                        'margin-left': p.initOffset.x
                    })
                } else {
                    h.addClass('sub-level-child');
                    var j = p.marginTop;
                    var k = g.children('.sp-submenu').parent().width();
                    if (g.parent().hasClass('level-1')) {
                        j = 37
                    } else {
                        k = g.parents('.sp-submenu-inner').width() - 45
                    }
                    var l = h.offset();
                    var o = l.left + h.width();
                    var o = h.parent().offset().left + h.parent().width() + h.width();
                    var m = $(p.mainWidthFrom).width();
                    h.find('>.sp-submenu-wrap').css({
                        'margin-top': p.subOffset.y,
                        'margin-left': p.subOffset.x
                    })
                }
                g.hover(function(a) {
                    $(this).find('>.sp-submenu').removeClass('open');
                    var b = $(this).find('>.sp-submenu');
                    if (g.parent().hasClass('level-0')) {
                        var c = g.parent().find('li.parent').index(g);
                        $('#sublevel ul.level-1').css({
                            display: 'none'
                        });
                        $('#sublevel ul.level-1').not('.empty').eq(c).css({
                            display: 'block'
                        });
                        return true
                    }
                    if (g.parent().hasClass('level-1')) {
                        b.css({
                            top: g.height(),
                            left: 0
                        }).addClass('open');
                        return true
                    }
                    var d = $(window).width();
                    if (p.direction == 'rtl') {
                        if (g.offset().left < b.width()) {
                            var e = 0 - b.width();
                            b.css({
                                right: e
                            })
                        } else {
                            var e = b.width() - 20;
                            b.css({
                                right: e
                            })
                        }
                        b.addClass('open');
                        return true
                    }
                    if (g.offset().left + g.width() + b.width() > d) {
                        var e = 0 - b.width();
                        b.css({
                            left: e
                        })
                    } else {
                        var e = b.width() - 20;
                        b.css({
                            left: e
                        })
                    }
                    b.addClass('open')
                }, function(a) {
                    $(this).find('>.sp-submenu').removeClass('open')
                })
            })
        })
    }
})(jQuery);

closed as too broad by johanpw, Lodder, Anibal, TryHarder, David Fritsch Apr 13 '15 at 0:43

Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.

  • The second Javascript snippet is pretty much unreadable. Please can you deobfuscated your code – Lodder Feb 20 '15 at 11:40