Easy Tabs 1.1 – free Tab Menu

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.

The first Version of my free Tab Menu has been downloaded over 5000 times. The script was ok but far away from perfect. So i've optimized the code (as good as i could) and made a few improvements to the menu. The Menu is now called Easy Tabs 1.1 (free for private and commercial projects).

Features and Infos

  • successfully tested in IE5.0, IE5.5, IE6, IE7, Firefox 2, Opera 9.2
  • if Javascript is disabled - the content is now visible
  • You can navigate between the tabs with the keyboard TAB Key
  • you can easy define which Tab shoud be active @ start
  • it's really easy now to add more tabmenus @ the same site [see the examples below]
  • If you want that the tabs are changing on click and not on mouseover -> then just change the onmouseover to onclick icon wink
  • Of course you can set a link to each Menu Tab - just set the linkurl in the href and delete the onclick="return false;"
  • In the Examples below i've packed everything (Html, CSS, Javascript) in 1 File - but you can also put the css in an external css file and the javascript in an external javascript file. I've included one clean example in the Download Zip File.

Live Examples

Here are three basic examples:

Code Explanation

There are 4 Settings you have to set in the javascript:

//Set the id names of your tablink (without a number at the end)
var tablink_idname = new Array("tablink")
//Set the id name of your tabcontentarea (without a number at the end)
var tabcontent_idname = new Array("tabcontent")
//Set the number of your tabs
var tabcount = new Array("4")
//Set the Tab wich should load at start (In this Example:Tab 2 is visible on load)
var loadtabs = new Array("2")

If you have more than one tabmenu, just enter another value in the Arrays for Example:

//Set the id names of your tablinks (without a number at the end)
var tablink_idname = new Array("tablink","anotherlink")
//Set the id names of your tabcontentareas (without a number at the end)
var tabcontent_idname = new Array("tabcontent","anothercontent")
//Set the number of your tabs in each menu
var tabcount = new Array("4","6")
//Set the Tabs wich should load at start (In this Example:Menu 1 -> Tab 2 visible on load, Menu 2 -> Tab 5 visible on load)
var loadtabs = new Array("2","5")

For better understanding -> In the tablinks you call the easytabs function with 2 values. The first value is the Menu and the second the Tabnumber. So the easytabs call for the third tab of the first menu would be:

 onmouseover="easytabs('1', '3');"

The call for the 4 tab in the 3rd menu would be:

onmouseover="easytabs('3', '4');"

I hope this Tab Menu is useful for you, if you have questions or improvements please post a comment, thank you.

Download EasyTabs 1.1 Example Package

zip  Easy Tabs 1.1 (7,0 KiB, 10.608 hits)

Download EasyTabs 1.2 Example Package - New Version (Infos here)

zip  Easy Tabs 1.2 (9,9 KiB, 569.272 hits)

Another live Example

This Related Posts, Tags, Rating, Statistic Menu:


31 Kommentare

  1. daniel k. gebhart, f 4. Juli 2007 um 12:49

    Warning: array_filter() [function.array-filter]: The first argument should be an array in /homepages/20/d406144833/htdocs/kollermedia/wp-content/plugins/wp-product-review/inc/cwp_comment.php on line 49

    Sehr nett! Hätte ich das ein wenig früher gewusst, dann hätte ich mir mein selbst gemurxtes PHP Tab Menü auf meiner neuen Homepage fürs Fotostudio in Wien sparen können.

  2. goetsu 4. Juli 2007 um 13:50

    Warning: array_filter() [function.array-filter]: The first argument should be an array in /homepages/20/d406144833/htdocs/kollermedia/wp-content/plugins/wp-product-review/inc/cwp_comment.php on line 49

    great script but with some accessibility issue for keyboard navigation.
    If i use tab key to go trought the page :
    - when the onmouseover is used i can't reach the content of the tab except for the last one)
    - when the onclick is used the focus must move to the content of the tab not to the next tab then at the end of the tab content the focus must go to the next tab

  3. University Update - 4. Juli 2007 um 14:50

    Warning: array_filter() [function.array-filter]: The first argument should be an array in /homepages/20/d406144833/htdocs/kollermedia/wp-content/plugins/wp-product-review/inc/cwp_comment.php on line 49

    [...] Link to Article firefox Easy Tabs 1.1 - free Tab Menu » Posted at Kollermedia.at - The Website [...]

  4. Webde kolay tablar y 4. Juli 2007 um 23:14

    Warning: array_filter() [function.array-filter]: The first argument should be an array in /homepages/20/d406144833/htdocs/kollermedia/wp-content/plugins/wp-product-review/inc/cwp_comment.php on line 49

    [...] Klavyedeki TAB tuÅŸu iÅŸe tablar arası geçiÅŸ yapabilme özelliÄŸi olan bu ilginç çalışma bu adreste incelenebilir. Canlı örnek için ise burdan [...]

  5. NADA 6. Juli 2007 um 20:49

    Warning: array_filter() [function.array-filter]: The first argument should be an array in /homepages/20/d406144833/htdocs/kollermedia/wp-content/plugins/wp-product-review/inc/cwp_comment.php on line 49

    [...] but not least, the Easy Tabs from Koller Jürgen, which is a very nifty tabs menu that works on hover or onclick instant content [...]

  6. porno 7. Juli 2007 um 21:26

    Warning: array_filter() [function.array-filter]: The first argument should be an array in /homepages/20/d406144833/htdocs/kollermedia/wp-content/plugins/wp-product-review/inc/cwp_comment.php on line 49

    Thanks.

  7. links for 2007-07-08 8. Juli 2007 um 1:43

    Warning: array_filter() [function.array-filter]: The first argument should be an array in /homepages/20/d406144833/htdocs/kollermedia/wp-content/plugins/wp-product-review/inc/cwp_comment.php on line 49

    [...] Kollermedia.at - The Website of the Freelancer Koller Jürgen » Easy Tabs 1.1 - free Tab Menu (tags: tabs javascript css menu webdesign tabmenu free ajax horizontal js navigation) [...]

  8. Turlough 14. August 2007 um 10:33

    Warning: array_filter() [function.array-filter]: The first argument should be an array in /homepages/20/d406144833/htdocs/kollermedia/wp-content/plugins/wp-product-review/inc/cwp_comment.php on line 49

    Your tabbed menu works great for us.

    We are developing site where there could be two three or four tabs on the menu depending on what content the user decides to use.

    Is there a workaround for this as it seems to me that there can only be a specific number of tabs per menu.
    Thanks

  9. Webdawson 14. August 2007 um 11:22

    Warning: array_filter() [function.array-filter]: The first argument should be an array in /homepages/20/d406144833/htdocs/kollermedia/wp-content/plugins/wp-product-review/inc/cwp_comment.php on line 49

    Hi, you can set as much tabs as you want - but you have to set the number in the javascript:

    For example:
    var tabcount = new Array("4","6")

    (first menu 4 tabs, second menu 6 tabs)

    Just check out the example:
    http://www.kollermedia.at/wp-content/themes/kollermedia/specials/easytabs1.1/example_three_menus.html there are menus with 4, 6 and 3 tabs.

  10. Benn 14. August 2007 um 22:09

    Warning: array_filter() [function.array-filter]: The first argument should be an array in /homepages/20/d406144833/htdocs/kollermedia/wp-content/plugins/wp-product-review/inc/cwp_comment.php on line 49

    Great script, easy light and usefull. I will be creating new designs with your help. Once done I will not forget to post back link to your site

  11. Webdawson 15. August 2007 um 8:16

    Warning: array_filter() [function.array-filter]: The first argument should be an array in /homepages/20/d406144833/htdocs/kollermedia/wp-content/plugins/wp-product-review/inc/cwp_comment.php on line 49

    Thank you Benn :)

  12. Stelian 19. August 2007 um 3:16

    Warning: array_filter() [function.array-filter]: The first argument should be an array in /homepages/20/d406144833/htdocs/kollermedia/wp-content/plugins/wp-product-review/inc/cwp_comment.php on line 49

    Hi,

    I'm trying to use your script but for some reason i can't have the tab to stay active, it keeps reseting immediately to the value that is set for the "loadtabs" at start.

    Thanks.

  13. Webdawson 19. August 2007 um 8:32

    Warning: array_filter() [function.array-filter]: The first argument should be an array in /homepages/20/d406144833/htdocs/kollermedia/wp-content/plugins/wp-product-review/inc/cwp_comment.php on line 49

    could you please send me a link - i'll have a look.

  14. Download Tabmenu for 14. März 2008 um 11:47

    Warning: array_filter() [function.array-filter]: The first argument should be an array in /homepages/20/d406144833/htdocs/kollermedia/wp-content/plugins/wp-product-review/inc/cwp_comment.php on line 49

    [...] Download the Version 1.1 (All Infos here) [...]

  15. Easy Tabs 1.2 - now 14. März 2008 um 11:49

    Warning: array_filter() [function.array-filter]: The first argument should be an array in /homepages/20/d406144833/htdocs/kollermedia/wp-content/plugins/wp-product-review/inc/cwp_comment.php on line 49

    [...] 1.1 (Infos here) Name: EasyTabs 1.1 Size: 6.98KB Added on 14/03/2008 Downloads: [...]

  16. YuzeroK 14. März 2008 um 12:01

    Warning: array_filter() [function.array-filter]: The first argument should be an array in /homepages/20/d406144833/htdocs/kollermedia/wp-content/plugins/wp-product-review/inc/cwp_comment.php on line 49

    Хороший заработок в интернете. Нужно покоментировать страницы, которые вам откроют после регистрации, и за это платят денги и не малые. Я лично зарабатываю около 500$ в месяц.

    Регистрируемся тут awsurveys.com

    1.Нажимите Create A Free Account

    UserName - имя пользователя
    Password - пароль 7-15 знаков
    First Name - имя
    Last Name - Фамилия
    Email Address - почтовый ящик
    Далее вводим цифорки-буковки, нажимаем кнопку Create A Free Account
    Вы зарегистрировались!

    2.Далее видим таблицу, имеющую такой вид:

    The Following Surveys are Available:
    Welcome Survey -- A $6.00 Website Evaluation is Available.
    A $4.00 Website Evaluation is Available.
    A $4.00 Website Evaluation is Available.
    A $4.00 Website Evaluation is Available.
    A $4.00 Website Evaluation is Available.
    A $4.00 Website Evaluation is Available.

    3.Щелкаем по одной из ссылок на этой странице, попадаем на следущюю страницу и там щелкаем по надписи "Start Survey Now"

    4.Здесь 2 ссылки и 2 поля, в них нужно написать отзыв о сайте на англ языке.

    (пример: It is an excellent site, I shall advise its all, this is good job, it's very usefull web-resource и т.п)

    5.Щелкае по кнопке внизу "Click to submit ..." Щелкаем по ссылке "Click Here to go Home and..."

    6.И так далее по ссылкам и так каждый день.

    7.Для вывода денег воспользуйтесь кнопкой "Redeem Money"
    выводятся деньги в системе PayPal (легко переводятся в вебмани)
    могу помочь тем кто не знаком с электронными платежными системами

  17. faineant 29. März 2008 um 7:26

    Warning: array_filter() [function.array-filter]: The first argument should be an array in /homepages/20/d406144833/htdocs/kollermedia/wp-content/plugins/wp-product-review/inc/cwp_comment.php on line 49

    Óñëóãè âåòåðèíàðà. Âûåçä.
    Âåòåðèíàðíàÿ ïîìîùü

  18. John 6. April 2008 um 22:58

    Warning: array_filter() [function.array-filter]: The first argument should be an array in /homepages/20/d406144833/htdocs/kollermedia/wp-content/plugins/wp-product-review/inc/cwp_comment.php on line 49

    Hi,

    I am in the process of creating a website and would really like to use your tab script. However I am a total .CSS newbie but learning fast! Could you therefore please advise when I put the code that I have downloaded.

    The reason I ask this question is I cut and pasted the code into my .css style sheet and when I tried to access it from Dremweaver I found only a blank box was displayed.

    Any help would be much appreciated.

    Regards. John.

  19. Nick 17. September 2008 um 18:30

    Warning: array_filter() [function.array-filter]: The first argument should be an array in /homepages/20/d406144833/htdocs/kollermedia/wp-content/plugins/wp-product-review/inc/cwp_comment.php on line 49

    Hi,

    Great script. It's working wonderfully. I tried taking a look under the hood to add a new tab that would open all of the divs, but I think I messed it up, because now none of the tab buttons work!

    I ended up creating a new function which is just a duplicate of your easytabs function, but changing it so it loops through all the divs and changes the display to block. It works for one tab, but now the other ones don't seem to want to work.

    Is there a quick way to have one tab open all of the divs? Any help would be appreciated! Thanks.

  20. Webdawson 17. September 2008 um 22:00

    Warning: array_filter() [function.array-filter]: The first argument should be an array in /homepages/20/d406144833/htdocs/kollermedia/wp-content/plugins/wp-product-review/inc/cwp_comment.php on line 49

    Hi Nick,
    sorry i have no fast solution for your "open all divs" problem - but maybe you can make a new function and loop through all tabs..just an idea.
    I will add something like this as soon as i have time.

  21. OscinueHins 16. Januar 2009 um 22:55

    Warning: array_filter() [function.array-filter]: The first argument should be an array in /homepages/20/d406144833/htdocs/kollermedia/wp-content/plugins/wp-product-review/inc/cwp_comment.php on line 49

    ??? «???????????????» - ?????????
    ???????????? ??????????????? ?????? ?? ???????????? ???????????????? ????? ? ????? ???????.
    ?????????? ??? ?????????????? ?? ?????????????? ????????, ? ????????? ??????? ???????????? ????????????????, ?????? ????? ????????? ? ????????????????? ???????????????????, ??????????????, ???????????? ? ???????? ?????????????????? ????????? ?? ?????? ? ??? ????? .
    ??????? ?????????????? ?????????? ???????? ?????????????

    ?.(351)235-15-50, (351)270-56-54
    Email: daupadova@gmail.com

  22. smatVemsneend 13. August 2009 um 3:05

    Warning: array_filter() [function.array-filter]: The first argument should be an array in /homepages/20/d406144833/htdocs/kollermedia/wp-content/plugins/wp-product-review/inc/cwp_comment.php on line 49

    ???????: ??????, ??????, ??????, ?????????, ?????????, ?????, ????????????? ??????, ????, ????????????, ?????? ????????, ????? ????????????, ????? ?????????, ????? ???????, ????? ??????????, ??????, ??????, ???? ?????????????, ????? ???????, ????? ??????, ????? ??????, ????? ????????, ????????? ???????, ????????? ?????????, ????????? ?????????, ????????? ?????????, ?????? ?????????????, ? ????? ?????, ????? ?????????????, ?????, ??????? ? ???????, ????????.
    (4862) 43-90-47, 43-92-47, 43-92-48, 43-91-66
    ??????? ????? ? ? ??????? ?? ?????? ?????.
    ?????? ? ???????? ????????? ???????????? ?????????? ????? ????? - Metizorel.ru

  23. Olegreze 9. September 2009 um 22:00

    Warning: array_filter() [function.array-filter]: The first argument should be an array in /homepages/20/d406144833/htdocs/kollermedia/wp-content/plugins/wp-product-review/inc/cwp_comment.php on line 49

    ???????? ?????? ??????? — ?????? ?????? ?? ??????? ?????????????!

  24. ?????? 29. November 2009 um 16:46

    Warning: array_filter() [function.array-filter]: The first argument should be an array in /homepages/20/d406144833/htdocs/kollermedia/wp-content/plugins/wp-product-review/inc/cwp_comment.php on line 49

    ??????????, ??????!

  25. ????? 22. April 2010 um 5:43

    Warning: array_filter() [function.array-filter]: The first argument should be an array in /homepages/20/d406144833/htdocs/kollermedia/wp-content/plugins/wp-product-review/inc/cwp_comment.php on line 49

    Hello: I slightly changed a bit, add another part a result, he can not take effect, I do not know where the fault lies in, thank you.

  26. Beste Coach-ausbildu 30. Juli 2012 um 13:13

    Warning: array_filter() [function.array-filter]: The first argument should be an array in /homepages/20/d406144833/htdocs/kollermedia/wp-content/plugins/wp-product-review/inc/cwp_comment.php on line 49

    What's up to all, how is everything, I think every one is getting more from this web site, and your views are nice for new users.

  27. Kieran 29. November 2012 um 8:17

    Warning: array_filter() [function.array-filter]: The first argument should be an array in /homepages/20/d406144833/htdocs/kollermedia/wp-content/plugins/wp-product-review/inc/cwp_comment.php on line 49

    Hello! I know this is kinda off topic however I'd figured I'd ask.
    Would you be interested in trading links or maybe guest writing a blog post or vice-versa?
    My site goes over a lot of the same topics as yours and I believe we could greatly benefit from
    each other. If you happen to be interested feel free to send me
    an email. I look forward to hearing from you! Great blog by the way!

  28. Miguelina Archbell 5. Dezember 2012 um 18:26

    Warning: array_filter() [function.array-filter]: The first argument should be an array in /homepages/20/d406144833/htdocs/kollermedia/wp-content/plugins/wp-product-review/inc/cwp_comment.php on line 49

    Paragraph writing is also a fun, if you be acquainted with after that
    you can write otherwise it is complicated to write.

  29. Chun 10. April 2013 um 4:48

    Warning: array_filter() [function.array-filter]: The first argument should be an array in /homepages/20/d406144833/htdocs/kollermedia/wp-content/plugins/wp-product-review/inc/cwp_comment.php on line 49

    An interesting disсuѕsion iѕ ԁefinitely worth сomment.
    I thіnk that yοu need to publish mοгe аbout this ѕubject, it may not be a taboo matter but genеrаlly people don't speak about these topics. To the next! Cheers!!

    Feel free to surf to my website: Chun

  30. real time file sync 12. Mai 2013 um 17:19

    Warning: array_filter() [function.array-filter]: The first argument should be an array in /homepages/20/d406144833/htdocs/kollermedia/wp-content/plugins/wp-product-review/inc/cwp_comment.php on line 49

    Keep on wгіting, grеаt job!

  31. sbobet 27. März 2014 um 6:25

    Warning: array_filter() [function.array-filter]: The first argument should be an array in /homepages/20/d406144833/htdocs/kollermedia/wp-content/plugins/wp-product-review/inc/cwp_comment.php on line 49

    Have you ever considered about adding a little bit more
    than just your articles? I mean, what you say is important and all.

    However think about if you added some great images or videos to give your posts more, "pop"!
    Your content is excellent but with pics and clips, this
    blog could undeniably be one of the best in its field.

    Amazing blog!

Kommentar verfassen


 
Produced and © by Koller Jürgen | Impressum | Love and Joy to everyone