2012-08-23 6 views
2

아래 이미지와 같이 탭 사각형 모양을 얻을 수있는 CSS 트릭을 알고있는 사람이 있습니까?CSS가있는 탭이있는 사각형 만들기

분명히 한 div를 사용하여이 작업을 수행 할 수는 없지만 한 div를 다른 div에 겹쳐서 테두리에 간격을 두는 것보다 더 좋은 방법을 생각해 낼 수 있습니까? 제발

#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 */ 
} 

:

이 내 현재의 솔루션입니다,하지만 난 그게 더 좋을 수 느낌 :

HTML :

<div id="handle"></div> 
<div id="menu"></div> 

CSS (무시 적이 색상 및 위치 등) 실수가있는 경우 위의 CSS를 수정하지 마십시오. 테스트하지 않았습니다. 그것은 약자로이

많은

Tabbed Rectangle

이 메뉴에 대한 HTML입니다

UPDATE 감사 의견이 달성 내 현재의 방법을 보여 순전히 :

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

메뉴의 CSS입니다. (나는 아직 서브 메뉴 CSS를 포함하지 않은) : 나는 경계를 오버레이의 내 원래의 방법이 탭 메뉴를 달성하는 가장 좋은 방법이라고 결론을 내렸다

/* 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;} 
+0

/demos/tabs/ – andyb

+0

cmon, 거기 탭 메뉴에 대한 자습서의 1000s가 있으며 당신도 뭔가를 시도하지 않은거야? – Christoph

+0

그 탭을 보았습니다. 그러나 목록 항목과 아래 메뉴 사이에 테두리와 틈이 있기 때문에 약간 더 복잡합니다. 목록 항목의 높이는 이미 더 높을 수 없습니다. –

답변

0

이에서 좋은 모습을 한 후.

HTML :

<nav id="global-nav"> 
    <ul> 
     <li id="homNav"><a href="#" title="Home"></a></li> 
     <li id="masNav"><a href="#" title="#">#</a> 
      <div class="subMenuHandle horizontal-sprite"> 
       <div class="bg-noise"></div> 
      </div> 
      <div class="subMenu horizontal-sprite"> 
       <div class="bg-noise"></div> 
      </div> 
     </li> 
     <li id="shiNav"><a href="#" title="#">#</a> 
      <div class="subMenuHandle horizontal-sprite"> 
       <div class="bg-noise"></div> 
      </div> 
      <div class="subMenu horizontal-sprite"> 
       <div class="bg-noise"></div> 
      </div> 
     </li> 
     <li id="repNav"><a href="#" title="#">#</a> 
      <div class="subMenuHandle horizontal-sprite"> 
       <div class="bg-noise"></div> 
      </div> 
      <div class="subMenu horizontal-sprite"> 
       <div class="bg-noise"></div> 
      </div> 
     </li> 
     <li id="setNav"><a href="#" title="#">#</a> 
      <div class="subMenuHandle horizontal-sprite"> 
       <div class="bg-noise"></div> 
      </div> 
      <div class="subMenu horizontal-sprite"> 
       <div class="bg-noise"></div> 
      </div> 
     </li> 
    </ul> 
</nav> 

CSS (압축 죄송합니다, 형식의 단지 내 길) : 그것은 동일 아니지만 당신이 http://jqueryui.com에서 몇 가지 아이디어를 빌릴 수

/* 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;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;} 

/* Set the sub menu handles */ 
#global-nav .subMenuHandle {position:relative;display:none;width:90px;height:12px;margin-top:-1px;border-left:1px solid #666;border-right:1px solid #666;z-index:1000;background-color:#fff;background-repeat:repeat-x;} 

/* Set the sub menu container */ 
#global-nav .subMenu {position:relative;display:none;margin-top:-1px;width:910px;height:180px;border:1px solid #666;z-index:999;background-color:#ddd;background-position:0 -12px;background-repeat:repeat-x;} 

/* Set the menu hovers to show sub menus */ 
#global-nav ul li:hover .subMenuHandle, 
#global-nav ul li:hover .subMenu 
{display:block;} 

/* Set the sub menu container positions */ 
#masNav .subMenu {margin-left:-83px;} 
#shiNav .subMenu {margin-left:-183px;} 
#repNav .subMenu {margin-left:-283px;} 
#setNav .subMenu {margin-left:-383px;} 

/* Set the noise in the menus */ 
.bg-noise {position:absolute;left:0;top:0;width:100%;height:100%;background:url("https://www.beta.net/_images/_global/bg-noise.png") repeat;} 
관련 문제