Tabbed Menu

[TheFilmGod]

I want to create a tabbed menu where a click on the tab loads new content, but doesn't make a new page to refresh. This can be found on Yahoo's frontpage.

 

How can I do this? Ajax?...

 

I was hoping for a non-ajax solution. I read something about hidden divs. I hope you can help! Thanks.

 

I'm using php, css, and html if that helps... ???

[AndyB]

http://nontroppo.org/test/tab1.html is just one of many ...

 

http://www.google.ca/search?hl=en&q=CSS+tab+menu&btnG=Google+Search&meta=

[ToonMariner]

you could use ajax or just plain js to do this.

 

JS would simply either change a z-index on elements or toggle divs. Ajax could be used to make everything faster by only loading up the content needed to display each tab...

 

From an accessibility point of view though you should code you scripts so that this would work without js (a new page request using url paramerters to dsiplay approrpiate content) and then simply apply ajax wfterwards to make it nicer for the user....

[bronzemonkey]

http://nontroppo.org/test/tab1.html is just one of many ...

 

He said he didn't want the page to refresh.

 

Stu Nicholls has a few css-only tabbed pages that require no refresh.

 

http://www.cssplay.co.uk/menu/one_page

http://www.cssplay.co.uk/menus/page_menu.html

http://www.cssplay.co.uk/menus/page_menu2.html

 

Best to use something like what AndyB linked to above...it's not practical to create a whole website using css or js to avoid a page refresh. For starters it isn't going to help with SEO.

[TheFilmGod]

Best to use something like what AndyB linked to above...it's not practical to create a whole website using css or js to avoid a page refresh. For starters it isn't going to help with SEO.

 

It will only be used for a small part in a webpage. Not for page navigation, but to increase user friendly search of content. - A neat feature, but nothing that will hurt SEO dramatically.

 

Thanks for the links though! Helps a lot!!