Very important news to the viewers of this site. As of next week this site will no longer be available. I will be taking content from a few sites and putting it all into The Template Blog. I would suggest going over and checking it out. Make sure you subscribe to the e-mail updates as there will be quite a few in the coming weeks \ months.

Home arrow Templates arrow All Templates arrow Overlapping tabs
Overlapping tabs
  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

Trackback(0)
Comments (2)Add Comment

Write comment

busy
 
Joomla Templates by Joomlashack
SiteMap | TheTemplateBlog
Joomla Templates and Joomla Tutorial