Update 10.07.2007
There is a brand new Version of the Tab Menu available – it’s called Easy Tabs 1.2 and you can find and download it here.
A lot of people ask me about the Tabs i’m using on this page – so i decided to pack it in a zip file for you. You can use this Menu for your own Projects and Websites.
A few Infos
- If you want that the tabs are changing on click and not on mouseover -> then just change the onmouseover to onclick 😉
- Of course you can set a link to each Menu Tab – just set the linkurl in the href and delete the onclick=”return false;”
- At the moment it’s not usable with disabled Javascript but i will fix this as soon i have time
- If you want to activate the Tabs via Keyboard – just add an onfocus=”” with the same functions as the onmouseover in it.
- I’ve packed everything in 1 File – but you can also put the css in an external css file and the javascript in an external javascript file
- There are a lot of other ways how you can do something like this but if you use more then one of these tabmenus, i think this is one of the best solutions.
- Questions? Just post a comment and i will help you.
Download the File (old Version)
Easy Tabs 1.0 (1,2 KiB, 11.193 hits)
Download the Version 1.1 (All Infos here)
Easy Tabs 1.1 (7,0 KiB, 12.750 hits)
Download the new Version 1.2 (All Infos here)
Easy Tabs 1.2 (9,9 KiB, 572.614 hits)
Example
This Related Posts, Tags, Rating, Statistic Menu..
Blue schreibt:
ei dont spik englsich weri well, plies reit it olso in tschörman
Sirsly schreibt:
Hi!
Can i translate your post in italian and put it in my blog?
Ciao!
Webdawson schreibt:
Hi Sirsly sure you can,
but please set the download link to my Website (for example: You can download the package over @ Kollermedia.at )
Thank you!!
Arun schreibt:
This is good stuff!
Sirsly schreibt:
Ok, i set the link to your web site.
Thanks to you !
Manara schreibt:
Hello, nice stuff.
Just a point considering the accessibility. I tried to use the tab key for navigation pourpose between the tab links in this page and I notice it doesn't work. is it correct? Is it made only for mouse users? Thank you.
Webdawson schreibt:
Hi Manara – good point. For keyboard navigation you can add a onfocus="" to the tabs with the same functions as the onmouseover – then you can also navigate between the tabs with the keyboard.
John Faulds schreibt:
From another link that’s on the same Max Design list of links as this page, it’s better to move the display: none out of the HTML and into the css/script so those without js enabled can still access the content.
Martin schreibt:
Very nice, but doesn't seem to degrade very well for me. If i turn of javascript i cant get to any of the tabs, shouldnt these all collapse into one list?
Webdawson schreibt:
Good points – i will fix it as soon i have time, that the menu is also working without javascript ok.
Thanks
zoel schreibt:
nice , thanx for it
Jagdish schreibt:
usable & useful
saumendra swain schreibt:
there is some problem related to keyboard tabbing: which is very wired. will get back to you after note down the same problem
slacko schreibt:
Very nice done!
Thank you
TK421 schreibt:
This is flipping sweet!
Hey, would there be any way to have them rotate/animate automatically?
Ex. Show tab1 for 10 sec. tab2 for 10sec. etc. without user having to click/rollover?
I see alot of sites that use tab ads that rotate as explained but could never figure out how they do it.
Cheers
Webdawson schreibt:
Hi Tk421,
i'm sure you can do this with javascript but don't ask me how.
Can you show me an example?
hallo schreibt:
boe
XavierP schreibt:
Thanks for this, easy and good job.
If you want, i made some improvements:
/* To be in each page linked by the menu, change as desired.*/
var thisPageTab=1
/*Important Function to blend the tabs in and out*/
var numTabs=4
function blendoff(idname) {document.getElementById(idname).style.display = 'none';}
function blendon(idname) {document.getElementById(idname).style.display = 'block';}
/*Function for our Tabmenu with 4 Tabs*/
function swichtabs(wert) {
for (x=1;x
<–Start of the Tabmenu –>
Tab 1
Tab 2
Tab 3
Tab 4
<– End of the Tabmenu –>
Genç Ha schreibt:
hi, greetings. it s really very nice. bu i have a problem .
i tried to use this tab menu but i couldnt be success. i dont know where i do mistake(s). it s not seem like in this site 🙁 i tried with FireFox 2.0.x and IE7, it s same. how can i get or fix this tab menu like in this site. i want to use so much. i liked so. if u can help me i ll be happy.
Yogi schreibt:
Thank you for sharing, your contribution really help me 🙂
Ronald schreibt:
Hi Jürgen, a very nice solution that I implemented in a WP site as well (still under construction).
I ran into a few (layout) problems with the html in I.E. though. I managed to "fix" it by removing the "width" declarations for the .postoptions a.printit/a.emailit/createpdf etc. in the CSS. This might be useful to others, or maybe it's just me.
It works fine in IE and FF, but could you explain why? 😉 It seems to work fine on your site? Also I hope this doesn;t break somewhere else.
@XavierP:
Could you elaborate on where to change what? And if it's an improvement, it might be included in the download.
Thanks anyway!
Genç Ha schreibt:
ok, i fixed my problem. it works very well. i ll use my website after first update. thanks again. good job 😉
ramdhar schreibt:
Hi Koller, many thanks for a great script. An example of an auto-scroll tabs menu is here: http://www.moneycontrol.com/newsindia/
How can your script be configured to make it auto-scroll?
Regards,
ramdhar
brad schreibt:
Does your tabbed system have the ability to support sub-menus for each of the tabs?
Ricardo Sousa schreibt:
Hi,
First off all congratulations for the great work… 😀
I am considering to make a joomla! module with this script…
Can you please tell me if this keyboard navigation is just with the tab key or we can use other?
Regards.
seo yarı schreibt:
Thanks i am try on my wp blog. Thanks again
www.r10.net kür schreibt:
Love a you blog
www.r10.net kür schreibt:
Thank u Webdawson ,
Great 😉
www.r10.net kür schreibt:
thanks..
www.r10.net kür schreibt:
I see alot of sites that use tab ads that rotate as explained but could never figure out how they do it.
www.r10.net kür schreibt:
I will try 🙂
veljko schreibt:
this is very nice meny,i try this…
NBA schreibt:
This is right. Espciallity if we want to keep userability in mind.
Very good article.
www.r10.net kür schreibt:
thnks dude.
mp3 schreibt:
Nice . . . !
urcityspot schreibt:
Cool. That's the most easy-to-use tab menu I have ever seen.
Thanks for the great work!
mp3 indir schreibt:
Thanks … !
flodby schreibt:
Nice
wmwebtr ödü schreibt:
great
cep telefon schreibt:
A lot of people ask me about the Tabs i’m using on this page – so i decided to pack it in a zip file for you. You can use this Menu for your own Projects and Websites., yeah thanks for sharing bro;) this other my site's; Dizi and Erotik
person who is failin schreibt:
danke! es ist fantastisch!
i had been lookin gfor how to do this kind of menu fr months now and i guiesss this ends my search! now maby i will puplish my site! (when i perfect it of course!)
sohbet schreibt:
Thanks … !
Ensest Hikayeler schreibt:
nice site. nice theme
kral oyun schreibt:
Thanks
automotive repair ma schreibt:
I am considering to make a joomla! module with this script…
Can you please tell me if this keyboard navigation is just with the tab key or we can use other?
çeviri schreibt:
thanks
hikaye schreibt:
thank you admin.
Mp3 indir schreibt:
Thanks ..!!!
porno schreibt:
4ever blog. thank you
jacin schreibt:
Muchas Gracias.
Thanks.
Is very cool. Great Job
Lucas schreibt:
How to set fixed height so a scollbar jumps in if the text is to long. Like you have on your site with teh You Tube section.
Greatz, Lucas
Lucas schreibt:
Could you also setup an example-file of the tabbed 'Topnews' dropdown menu, so I can use Easy Tab that way. Great solutions in saving screen property!
Greatz, Lucas
Webdawson schreibt:
HI Lucas, just give your tab content div a fix height and a overflow:auto via css.
For Example:
.yourtabcontent {height:200px; overflow:auto;}
Lucas schreibt:
Great thanx, I wil show off the use of you very nice work soon!
Thanx, iVent
Chris schreibt:
Hello,
Great Script. I noticed in Feb 2007 you were talking about adding noscript to the scripting, for those whose javascript is turned off. Has that been done?
Thanks
Igor schreibt:
Hi, just wanted to let you know how great your script is. I also wanted to ask you few things. When my page is opens first it shows all the tabs and then a second after it shows only one tab that is suppose to. Do you know how to fix this error because it would be nice if that wouldn't happen. Plus, what if you want 2 different boxes on one page, one to be width 400 no auto scroll, and the other to be different shape with auto scroll and other features? What needs to be changed in order to achieve that? That would be great if you can help with that. Thanks a lot anyways, you are helping people a lot. Great job.
Webdawson schreibt:
Hi Igor,
thanks for your kind words.
For the "loading problem" you can use Ruzee Events (http://www.ruzee.com/blog/ruzeeevents/)
For the "width problem" – give every box another width via CSS via an class or directly in the html file with style="width:400px;"
porno schreibt:
Thanks.
Is very cool. Great Job
nokia oyun, nokia te schreibt:
thnks
ghkj schreibt:
fghgfhgfdh
varmıs& schreibt:
yes you right, I know 🙂
I have a habit of adding display property everywhere.
iÅŸ ilanl schreibt:
good article thank you
video izle schreibt:
hank you for sharing, your contribution really
ihsan schreibt:
Thanks.
facebook schreibt:
Thanks!
smith schreibt:
Good. Thanks.
harita schreibt:
thanks.
Gocmenim schreibt:
good article thank you
jade schreibt:
yes you right, I know 🙂 I have a habit of adding display property everywhere.減肥,去斑,家居風水,å…¬å¸è¨»å†Š
Oyun schreibt:
thank you
flashgamemania schreibt:
Good. Thanks.