On Tue, Dec 23, 2008 at 4:20 AM, Jeffrey Jones <j...@jones.be> wrote:

> Lets say I have a simple Radiant based site. Pages with sub-pages etc etc.
> All very simple.
> However the user wants the navigation menu to be scrollable using little
> buttons Like the following
> NAV1 - NAV2- NAV3- NAV4 <>
> Clicking the > button would change the nav to
> NAV5 - NAV6- NAV7- NAV8 <>
> and so on using AJAX to update the navigation menu. This navigation menu is
> going to be on the one layout this site will use so all the pages will have
> it without exception. Now, how can I do this?

If you rely on AJAX to bring in parts of the navigation menu, then your site
won't work for users without JavaScript enabled (read: Google won't be able
to use the navigation menu). Also, you'll be creating superfluous requests
to load a little bit of HTML, which is a big performance hit. Why not do

Have your layout create a list with all of the navigation links that might
otherwise be loaded by AJAX. (This will ensure that the site works for
non-JS users). Use JS to hide all but the first four nav links when
body.onLoad. Bind a function to your little buttons .onClick to hide those
four and show the next four nav links.

Your users won't have to wait for an HTTP request to complete before they
can see the nav links they want, and your menu will be wicked-fast, leaving
some headroom for sexy animations (slides, fades, etc.).

No need to write an extension.

Radiant mailing list
Post:   Radiant@radiantcms.org
Search: http://radiantcms.org/mailing-list/search/
Site:   http://lists.radiantcms.org/mailman/listinfo/radiant

Reply via email to