Is anybody aware of any CSS tricks that can achieve the tabbed rectangle look as shown in the image below.
Obviously this cannot be achieved using one div, however, can anybody come up with a better method than overlapping one div over another to make a gap in the border?
This is my current solution, but I feel it could be better:
HTML:
<div id="handle"></div>
<div id="menu"></div>
CSS (Have ignored colors and positioning etc):
#handle {
width: 90px;
height: 20px;
border-left: 1px solid #666;
border-right: 1px solid #666;
}
#menu {
width: 600px;
height: 100px;
border: 1px solid #666;
margin-top: 19px; /* Notice it is one pixel higher then the bottom of the #handle, this covers the top border where the handle is */
}
Please do not correct the above CSS if there are mistakes, I have not tested this. It is purely to show my current method of achieving this
Any comments much appreciated
UPDATE
This is the HTML for the menu as it stands:
<nav id="global-nav">
<ul>
<li id="homNav"><a href="#" title="Home"></a></li>
<li id="masNav"><a href="#" title="#">#</a>
<!-- This is where the submenu starts -->
<div class="handle"></div>
<div class="subMenu">
<!-- Content Here -->
</div>
<!-- This is where the submenu ends -->
</li>
<li id="shiNav"><a href="#" title="#">#</a>
<div class="handle"></div>
<div class="subMenu">
<!-- Content Here -->
</div>
</li>
<li id="repNav"><a href="#" title="#">#</a>
<div class="handle"></div>
<div class="subMenu">
<!-- Content Here -->
</div>
</li>
<li id="setNav"><a href="#" title="#">#</a>
<div class="handle"></div>
<div class="subMenu">
<!-- Content Here -->
</div>
</li>
</ul>
</nav>
This is the CSS for the menu as it stands (I have not included the sub menu css yet):
/* Navigation */
#global-nav {position:absolute;width:460px;height:27px;left:15px;top:43px;}
#global-nav ul {margin:0;padding:0;list-style-type:none;}
#global-nav ul li {position:relative;display:block;width:92px;height:27px;float:left;padding:0;margin-left:8px;z-index:10;cursor:pointer;background-image:url("http://beta.example.net/_images/_global/sprite.png");background-position:-173px -32px;}
#global-nav ul li:hover {background-position:-173px -59px;}
#global-nav ul li:active {background-position:-173px -86px;}
#global-nav ul li a {display:block;width:92px;height:27px;line-height:27px;text-align:center;color:#fff;font-size:12px;text-shadow:#666 0 -1px 0;}
#global-nav ul li:hover a {color:#666;text-shadow:#fff 0 1px 0;}
#global-nav ul li:active a {color:#666;text-shadow:none;}
/* Set styles for specific navigation buttons */
#homNav {width:47px !important;margin-left:0 !important;margin-right:12px;background-position:-126px -32px !important;}
#homNav a {width:47px !important;}
#homNav:hover {background-position:-126px -59px !important;}
#homNav:active {background-position:-126px -86px !important;}
/* Set hovers of sub menu buttons to active images */
#masNav:hover,
#shiNav:hover,
#repNav:hover,
#setNav:hover
{background-position:-173px -86px !important;}
After having a good look at this I concluded that my original method of overlaying the border was the best way to achieve this tabbed menu.
HTML:
CSS (Sorry for the compression, just my way of formatting):