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..

  1. 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.

  2. 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.

  3. 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

  4. 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 –>

  5. 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.

  6. 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!

  7. 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.

  8. 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

  9. 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!)

  10. 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

  11. 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

  12. 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.