Question

I need menu tabs that link to separate HTML files on my server, with unique URLs. I know this by itself doesn’t require anything but CSS, but I would also like to retain the “instant load” effect of Javascript-enable menus, as well as loading only the relevant section of the page. (a CSS-only menu, I think, would reload the entire page). Is this possible?

Answer 1

It’s possible with the help of Knockout.js and/or JQuery.

You could do it all with JQuery using the Tabs plugin provided by JQuery UI. You would have to write all of your own CSS so that you don’t get the default “tabbed” look but something that resemble a menu.

Or, you could use Knockout.js to create a client-side view model with a set of commands that are bound to your menu items. Each command would then trigger a page update, most likely using JQuery.

Here’s a very high-level example of how this might work starting with a basic menu:

<ul>
 <li data-bind="menuOption1">
 ...
 </li>
</li>

A Knockout.js view model

var MenuViewModel = function ()
{
  this.menuOption1 = function () {
    // TODO: show the discreet HTML page
  }
}

ko.applyBindings(new MenuViewModel());

How you actually show the page is up to you. It’s probably easiest to use a JQuery AJAX call to load the page contents.