{"id":1022,"date":"2012-01-30T12:38:46","date_gmt":"2012-01-30T17:38:46","guid":{"rendered":"http:\/\/yuguangzhang.com\/blog\/?p=1022"},"modified":"2012-01-30T12:56:44","modified_gmt":"2012-01-30T17:56:44","slug":"jquery-scrolling-menu","status":"publish","type":"post","link":"http:\/\/yuguangzhang.com\/blog\/jquery-scrolling-menu\/","title":{"rendered":"jQuery Scrolling Menu"},"content":{"rendered":"

When implementing the scrolling menu for Chrome and Firefox<\/a>, I prototyped the menu using fiddlesalad’s LESS CSS editor<\/a>. Then, I copied the compiled CSS and started coding with a straight forward procedural approach.
\n[cc lang=”javascript”]
\nfunction displayMenu() {
\n var selected = [$(‘#menu ul:first li.selected’), $(‘#menu ul:eq(1) li.selected’)];
\n if (selected[0].length) $(‘#menu div:first’).scrollTo(selected[0]);
\n if (selected[1].length) $(‘#menu div:eq(1)’).scrollTo(selected[1]);
\n $(‘#menu ul:first’).parallax({
\n takeoverFactor: .2,
\n mouseport: $(‘#menu ul:first’).parent(),
\n xparallax: false
\n });
\n $(‘#menu ul:eq(1)’).parallax({
\n takeoverFactor: .2,
\n mouseport: $(‘#menu ul:eq(1)’).parent(),
\n xparallax: false
\n });
\n $(‘#menu ul:first li’).click(function () {
\n window.location.assign(ajax_url + ‘calendar\/’ + $(this).text() + ‘\/’);
\n });
\n $(‘#menu ul:eq(1) li’).click(function () {
\n var course = $(this).text().split(‘ ‘);
\n window.location.assign(ajax_url + ‘calendar\/’ + course[0] + ‘\/’ + course[1] + ‘\/’);
\n });
\n}<\/p>\n

$(‘#menu ul:first li.last’).livequery(displayMenu);
\n[\/cc]
\nLater, I noticed that the performance can be improved by caching jQuery results. Also, many lines of code were repetitive. Before moving onto the more challenging part of the menu design, scrolling to the current location, I made it object oriented using plain JavaScript.
\n[cc lang=”javascript”]
\nfunction Menu(selector) {
\n\tthis.selector = selector; \/\/ #menu ul:first
\n\tthis.$list = $(this.selector);
\n\tthis.$container = this.$list.parent();
\n\tthis.display = bindMethod(this, function () {
\n\t\tvar selected = this.$list.find(‘.selected’).prev(),
\n\t\t\tprevCount = 0;
\n\t\tvar prev = selected.prev();
\n\t\twhile (selected.length && prevCount++ < 3)\n\t\t\tselected = selected.prev();\n\t\t\/\/ only course pages have enough height, otherwise the courses at the top cannot be reached\n\t\tif (selected.length && window.location.pathname.split('\/').length == 5)\n\t\t\tthis.$container.scrollTo(selected);\n\t\tthis.$list.parallax({\n\t\t\ttakeoverFactor: .2,\n\t\t\tmouseport: this.$container,\n\t\t\txparallax: false\n\t\t});\n\t});\n\tthis.$list.find('.last').livequery(this.display);\n\tthis.scrollTop = bindMethod(this, function () {\n\t\tif (this.activated)\n\t\t\tthis.$container.scrollTo(this.$list.find('li:first'));\n\t});\n\tthis.$container.mouseenter(bindMethod(this, function () {\n\t\tthis.activated = true;\n\t}))\n\tthis.width = function () {\n\t\treturn this.$container.width();\n\t}\n}\n[\/cc]\nWriting classes in JavaScript brings unexpected quirks, such as this<\/em> being set to an HTML Element. However, using an additional helper, bindMethod<\/em>, this problem is avoided. I used the scrollTop method to scroll to the top of the menu:<\/p>\n

[cc lang=”javascript”]<\/p>\n

var deptMenu = new Menu(‘#menu ul:first’), courseMenu = new Menu(‘#menu ul:eq(1)’);
\nvar $deptTop = $(‘#menu’).prev().find(‘div:first’), $courseTop = $(‘#menu’).prev().find(‘div:eq(1)’);
\n$deptTop.width(deptMenu.width());
\n$courseTop.width(courseMenu.width());
\n$deptTop.hover(deptMenu.scrollTop);
\n$courseTop.hover(courseMenu.scrollTop);<\/p>\n

[\/cc]<\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

When implementing the scrolling menu for Chrome and Firefox, I prototyped the menu using fiddlesalad’s LESS CSS editor. Then, I copied the compiled CSS and started coding with a straight forward procedural approach. [cc lang=”javascript”] function displayMenu() { var selected = [$(‘#menu ul:first li.selected’), $(‘#menu ul:eq(1) li.selected’)]; if (selected[0].length) $(‘#menu div:first’).scrollTo(selected[0]); if (selected[1].length) $(‘#menu div:eq(1)’).scrollTo(selected[1]); […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[29],"tags":[152,133],"class_list":["post-1022","post","type-post","status-publish","format-standard","hentry","category-coursetree","tag-css3","tag-javascript"],"aioseo_notices":[],"_links":{"self":[{"href":"http:\/\/yuguangzhang.com\/blog\/wp-json\/wp\/v2\/posts\/1022","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/yuguangzhang.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/yuguangzhang.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/yuguangzhang.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/yuguangzhang.com\/blog\/wp-json\/wp\/v2\/comments?post=1022"}],"version-history":[{"count":0,"href":"http:\/\/yuguangzhang.com\/blog\/wp-json\/wp\/v2\/posts\/1022\/revisions"}],"wp:attachment":[{"href":"http:\/\/yuguangzhang.com\/blog\/wp-json\/wp\/v2\/media?parent=1022"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/yuguangzhang.com\/blog\/wp-json\/wp\/v2\/categories?post=1022"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/yuguangzhang.com\/blog\/wp-json\/wp\/v2\/tags?post=1022"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}