How do I get a static menu on a website?
April 13, 2011 5:11 AM Subscribe
Web design – how do you make a site where the top menu doesn't reload (example site)?
I'd like to make a small site (~10 pages) that allows linking to individual pages and have human-readable URLs. I'll most likely be building this in Joomla. Is there a simple way to keep the menu static and just have the body content of the page load on clicking?
I don't want to use flash.
Any help gratefully received!
I'd like to make a small site (~10 pages) that allows linking to individual pages and have human-readable URLs. I'll most likely be building this in Joomla. Is there a simple way to keep the menu static and just have the body content of the page load on clicking?
I don't want to use flash.
Any help gratefully received!
Best answer: Looking at the source of the page you linked, Their menu does reload. It just reloads really fast. Basically, they copied and pasted the top few lines of every page, and because there's so little information there and it transfers so quickly, you can't tell the difference.
posted by yeolcoatl at 5:18 AM on April 13, 2011
posted by yeolcoatl at 5:18 AM on April 13, 2011
Best answer: Are you using IE9?
That site loads an entirely new page each time, including the menu. IE9 (and maybe some other browsers - I'm not sure) seems to render differently in that the transition between pages is seamless. If you're using Firefox you'll see the whole thing reload.
posted by le morte de bea arthur at 5:19 AM on April 13, 2011
That site loads an entirely new page each time, including the menu. IE9 (and maybe some other browsers - I'm not sure) seems to render differently in that the transition between pages is seamless. If you're using Firefox you'll see the whole thing reload.
posted by le morte de bea arthur at 5:19 AM on April 13, 2011
Don't know Joomla, but isn't this the whole point of AJAX?
If a user action makes the browser request and receive a resource (webpage) at a particular URL - by definition the browser will clear the current page and load the new one.
With ajax, you use javascript to get some data in whatever format from a server, and then fill a page element (div) with this data - the page as a whole is never reload. jQuery makes this very very easy.
posted by tempythethird at 5:20 AM on April 13, 2011
If a user action makes the browser request and receive a resource (webpage) at a particular URL - by definition the browser will clear the current page and load the new one.
With ajax, you use javascript to get some data in whatever format from a server, and then fill a page element (div) with this data - the page as a whole is never reload. jQuery makes this very very easy.
posted by tempythethird at 5:20 AM on April 13, 2011
Yes, you can use something like jQuery to load new content into a container div, leaving the rest of the page untouched. There are techniques that will give you a unique URL for each bit of content; one such is jQuery Address.
posted by le morte de bea arthur at 5:25 AM on April 13, 2011 [1 favorite]
posted by le morte de bea arthur at 5:25 AM on April 13, 2011 [1 favorite]
Best answer: Dammit "the page as a whole is never reloaded"
Oh and I forgot to mention that your requirements are at cross-purposes. If you want your navigation to never reload - that means your entire site, as far as the browser is concerned, will reside at exactly one URL. AJAX by its nature won't change the URL ever - and if you want the URL to change you have to engage in some trickery involving hash-bangs. The result is brittle, behaves differently on different browsers and faceplants on some.
I would say, spare yourself the headache and just make the page load really really fast.
posted by tempythethird at 5:25 AM on April 13, 2011
Oh and I forgot to mention that your requirements are at cross-purposes. If you want your navigation to never reload - that means your entire site, as far as the browser is concerned, will reside at exactly one URL. AJAX by its nature won't change the URL ever - and if you want the URL to change you have to engage in some trickery involving hash-bangs. The result is brittle, behaves differently on different browsers and faceplants on some.
I would say, spare yourself the headache and just make the page load really really fast.
posted by tempythethird at 5:25 AM on April 13, 2011
You can do that kind of thing using frames. This site is an example.
posted by Chocolate Pickle at 5:39 AM on April 13, 2011
posted by Chocolate Pickle at 5:39 AM on April 13, 2011
Frames don't meet the poster's requirements ("allows linking to individual pages and have human-readable URLs").
posted by Rhomboid at 5:55 AM on April 13, 2011
posted by Rhomboid at 5:55 AM on April 13, 2011
This Coda Slider Effect Tutorial does something similar to what you want. A bit more advanced perhaps, though.
posted by backwards guitar at 7:01 AM on April 13, 2011
posted by backwards guitar at 7:01 AM on April 13, 2011
@tempythethird: That's not strictly true. The HTML5 history API lets you change the URL in modern browsers without reloading the page. GitHub makes use of this mechanism in their source tree browser in Chrome (and maybe FF4? Safari? I don't use them often enough to know): for example click the folders and files and watch the new state slide in. The back/forward buttons work as expected.
Doing such things is a huge PITA, though, so I don't recommend doing it if you aren't sure you know what you're doing.
posted by TeslaNick at 1:54 PM on April 13, 2011
Doing such things is a huge PITA, though, so I don't recommend doing it if you aren't sure you know what you're doing.
posted by TeslaNick at 1:54 PM on April 13, 2011
This thread is closed to new comments.
posted by mary8nne at 5:18 AM on April 13, 2011 [1 favorite]