不同的尺寸下调用不同的导航。假设浏览器1200px以上调用large-menu.html里的导航代码。1200px及以下宽度时调用small-menu.html里的导航代码。
$(“.global-nav”) 在这里调用导航。

function LoadMenu() {
        if ($(window).width() > 1200) {
            if (!$(".global-nav").hasClass("largeClient")) {
                $(".global-nav").addClass("largeClient").removeClass("smallClient");
                $(".global-nav").load("large-menu.html", function () {
                    //可执行函数
                })
            } else {
                return false;
            }
        } else {
            if (!$(".global-nav").hasClass("smallClient")) {
                $(".global-nav").addClass("smallClient").removeClass("largeClient");
                $(".global-nav").load("small-menu.html", function () {
                    //可执行函数
                })
            } else {
                return false;
            }
        }
    }

 
然后在指定事件下执行即可。
例如，页面DOM加载完后与窗口尺寸发生改变时，均执行该函数。

$(function () {
    LoadMenu();
});
$(window).on("resize", function () {
    LoadMenu();
});