Home » Templates » Joomlashack Templates » Overlapping tabs

Overlapping tabs

10 Apr By Leave a Comment
  1. .tabs {list-style:none; padding:15px 0 0 10px; margin:30px 10px 50px 0; height:23px; background:#bcd url(images/tab_e.gif); border-bottom:1px solid #000;}
  2. .tabs li {display:block; float:left; margin:0 -13px -1px 0;}
  3. .tabs li a {display:block; text-decoration:none;}
  4.  
  5. .tabs li a em {float:left; padding:0 20px; height:22px; border-top:1px solid #fff; border-bottom:1px solid #000; position:relative; z-index:100; font-style:normal; color:#fff; background:#f93 url(images/tab_d.gif) repeat-x bottom left; font-size:11px; font-family:verdana; line-height:20px;}
  6.  
  7. .tabs li a b {font-size:0; line-height:0; position:relative; border-bottom:1px solid #000; border-top:1px solid #fff; width:1px; display:block; float:left; z-index:300; background:#f93 url(images/tab_d.gif) repeat-x bottom left;}
  8.  
  9. .tabs li b.p1 {height:19px; background:#fff; margin-top:4px; border-top:0; z-index:100;}
  10. .tabs li b.p2 {height:19px; margin-top:2px; border-top:2px solid #fff; border-bottom:1px solid #888; z-index:100;}
  11. .tabs li b.p3 {width:2px; height:21px; margin-top:1px; z-index:100;}
  12. .tabs li b.p5 {height:20px; margin-top:2px;}
  13. .tabs li b.p6 {height:19px; margin-top:3px;}
  14. .tabs li b.p7 {height:18px; margin-top:4px;}
  15. .tabs li b.p8 {height:17px; margin-top:5px;}
  16. .tabs li b.p9 {height:16px; margin-top:6px;}
  17. .tabs li b.p10 {height:15px; margin-top:7px;}
  18. .tabs li b.p11 {height:14px; margin-top:8px;}
  19. .tabs li b.p12 {height:13px; margin-top:9px;}
  20. .tabs li b.p13 {height:12px; margin-top:10px;}
  21. .tabs li b.p14 {height:11px; margin-top:11px;}
  22. .tabs li b.p15 {height:10px; margin-top:12px;}
  23. .tabs li b.p16 {height:9px; margin-top:13px;}
  24. .tabs li b.p17 {height:8px; margin-top:14px;}
  25. .tabs li b.p18 {height:7px; margin-top:15px;}
  26. .tabs li b.p19 {height:6px; margin-top:16px;}
  27. .tabs li b.p20 {height:5px; margin-top:17px;}
  28. .tabs li b.p21 {height:4px; margin-top:18px;}
  29. .tabs li b.p22 {height:3px; margin-top:19px;}
  30. .tabs li b.p23 {height:2px; margin-top:20px;}
  31. .tabs li b.p24 {height:1px; margin-top:21px;overflow:hidden;}
  32. .tabs li b.p25 {width:1px; height:1px; background:#fff; margin-top:22px; border-top:0; overflow:hidden;}
  33. .tabs li b.p26 {width:1px; height:1px; background:#000; margin-top:23px; border:0; overflow:hidden;}
  34.  
  35. .tabs li em b.shdw {position:absolute; display:block; left:-4px; bottom:0; border:0; width:17px; height:17px; background: #f93 url(images/tab_a.gif) bottom left; z-index:500;}
  36.  
  37. .tabs li a:hover,
  38. .tabs li a:focus,
  39. .tabs li a:active
  40. {white-space:nowrap; color:#000; position:relative; z-index:500; cursor:pointer;}
  41. .tabs li a:hover em,
  42. .tabs li a:focus em,
  43. .tabs li a:active em
  44. {color:#800; background:#fc8 url(images/tab_b.gif) bottom left; border-bottom-color:#888;}
  45. .tabs li a:hover em b.shdw,
  46. .tabs li a:focus em b.shdw,
  47. .tabs li a:active em b.shdw 
  48. {visibility:hidden;}
  49. .tabs li a:hover b,
  50. .tabs li a:focus b,
  51. .tabs li a:active b
  52. {background:#fc8 url(images/tab_b.gif) bottom left; border-bottom-color:#888;}
  53. .tabs li a:hover b.p1,
  54. .tabs li a:focus b.p1,
  55. .tabs li a:active b.p1
  56. {background:#fff; border-bottom-color:#888;}
  57. .tabs li a:hover b.p25,
  58. .tabs li a:focus b.p25,
  59. .tabs li a:active b.p25
  60. {background:#fff; border-bottom-color:#888;}
  61. .tabs li a:hover b.p26,
  62. .tabs li a:focus b.p26,
  63. .tabs li a:active b.p26
  64. {background:#888;}
  65.  
  66. .tabs li a.selected,
  67. .tabs li a:hover.selected, 
  68. .tabs li a:active.selected 
  69. {white-space:nowrap; color:#000; position:relative; z-index:600; cursor:default;}
  70. .tabs li a.selected em,
  71. .tabs li a:hover.selected em,
  72. .tabs li a:active.selected em
  73. {color:#800; background:#fff url(images/tab_c.gif) bottom left; border-bottom-color:#fff;}
  74. .tabs li a.selected em b.shdw,
  75. .tabs li a:hover.selected em b.shdw,
  76. .tabs li a:active.selected em b.shdw
  77. {visibility:hidden;}
  78. .tabs li a.selected b,
  79. .tabs li a:hover.selected b,
  80. .tabs li a:active.selected b
  81. {background:#fff url(images/tab_c.gif) bottom left; border-bottom-color:#fff;}
  82. .tabs li a.selected b.p1,
  83. .tabs li a:hover.selected b.p1,
  84. .tabs li a:active.selected b.p1
  85. {background:#fff; border-bottom-color:#fff;}
  86. .tabs li a.selected b.p26,
  87. .tabs li a:hover.selected b.p26,
  88. .tabs li a:active.selected b.p26
  89. {width:1px; height:1px; background:#fff; margin-top:23px; border-top:0; overflow:hidden;}

Information

This is an experimental menu to see if it could be done. If you
don’t like bloated code then move on to another page, if you don’t mind
extra tags to achieve the menu above then stay and play.

As with the previous menu this one has the ability to click any of the tabs and reload the page with that tab shown selected.

The area of each tab is bounded by the white border and hover will
only work within this border (including the 45 degree slope and any
overlap). The width of each tab is variable depending on the link text.

This has been tested in IE6, IE7, Firefox and Opera, it should also work in Safari.

The following images are used in this menu, but it will work as a
flat menu with no images used at all (try disabling images in your
browser to see that this will still work correctly)

Images can be found HERE

Copied from http://www.cssplay.co.uk/menus/overlap.html?current=one

Popularity: 12% [?]

Filed Under: Joomlashack Templates

Speak Your Mind