window.$ = HTMLElement.prototype.$ = function (selector) { return (this == window ? document : this).querySelectorAll(selector); } window.onload = function () { nav.init(); } var nav = { LIHEIGHT: 110, moved: 0, count: 0, ul: null, btnT: null, btnB: null, init: function () { this.ul = $("#nav")[0]; this.btnT = this.ul.parentNode.$("i")[0]; this.btnB = this.ul.parentNode.$("i")[1]; this.btnT.onclick = this.btnB.onclick = function () { nav.move(this); }; this.count = this.ul.$("li").length; }, move: function (btn) { if (typeof String.prototype.endsWith != 'function') { String.prototype.endsWith = function (suffix) { return this.indexOf(suffix, this.length - suffix.length) !== -1; }; } if (!btn.className.endsWith("_disabled")) { this.count = this.ul.$("li").length; if (this.count < 5) { this.btnT.className += "_disabled"; this.btnB.className += "_disabled"; } else { if (btn == this.btnB) { this.ul.style.top = -(this.LIHEIGHT * (++this.moved) - 30) + "px"; } else { this.ul.style.top = -(this.LIHEIGHT * (--this.moved) - 30) + "px"; } this.btnEnable(); } } }, btnEnable: function () { this.count = this.ul.$("li").length; if (this.moved == 0) { this.btnT.className += "_disabled"; if (this.count == 5) { this.btnB.className = this.btnB.className.replace("_disabled", ""); } } else if (this.count - this.moved == 4) { this.btnB.className += "_disabled"; if (this.count == 5) { this.btnT.className = this.btnT.className.replace("_disabled", ""); } } else { this.btnT.className = this.btnT.className.replace("_disabled", ""); this.btnB.className = this.btnB.className.replace("_disabled", ""); } } }