HTML CSS Tab Menus

I am working with the Google Engine for a class, and I had a question about css tabbed menus. I found a tutorial for tabbed menus, here is the link to that one if it matters:

http://www.marcofolio.net/css/sweet_tabbed_navigation_using_css3.html

I was wondering if anyone knew of a way to make it so that it didn't have to reload the page every time I click a link in the menu. Basically have it already have the info in memory and change just the text, or only refresh a specific part of the page. I have no idea what types of stuff you might need, but I basically copied that code exactly, and used the app engine and template inheritance to get the different page info. Let me know if you need other info. Th开发者_如何学运维anks in advance.

WWaldo

It's possible, yes - gawker recently switched to using this sort of approach. Here's a post by Tim Bray about how it works and why it's a bad idea.

I can suggest at least two possibilities using JavaScript; you could either target the links in your CSS menu items towards:

1. Altering the content (e.g., the value of the src attribute) of a main iframe element (for example), or revealing/replacing preloaded content into/out of div element(s); and/or,
2. Trigger an AJAX call to a server to determine an update, and update the contents of the required components (e.g., div) dynamically.

The difference is pre-loading all the page content first (1) as opposed to accessing it dynamically on command (2). If you don't have control over a server to implement AJAX in suggestion (2), then (1) will suffice, but at the cost of offloading the work (and downloads) to the client.

Both approaches will require dynamic update of page contents using JavaScript. The 'net is littered with examples of this; check out this one, for instance.

It is actually quite easy to make a tabbed menu in HTML, with CSS, javascript is not needed for my design. I did this example in about 1/2 an hour.

Here are some screenshots of my example. (I Censored My Name Out Of The URL, And I Cropped Them)

All you do is make 3 boxes, With links to other webpages in them. It can look the same in all the pages. It is recommended to make rounded corners.

<div id="Tab1"><a href="Template1.html">Tab Numbah One </a></div><div id="Tab2"><a href="Template2.html">Tab Numbah Two </a></div><div id="Tab3"><a href="Template3.html">Tab Numbah Three </a></div>

Go into your external CSS sheet, make them all float left, and on the same line, make it look pretty, and you NEED a border of some sort.

Then make an overriding style in each of your pages. Make the bottom border non-existent, so it looks like the tabs of a binder. I changed the color, so when you were on that page, it looked a bit better. Note, I indent my CSS very unusually.

Page 1

#Tab1 { border-bottom:none; background-color:white; } Page 2

#Tab2 { border-bottom:none; background-color:white; } Page 3

#Tab1 { border-bottom:none; background-color:white; }