带有CSS和html的tabview菜单

我希望以下内容成为选项卡式视图。带有CSS和html的tabview菜单

<div id="navigation"> 

<ul class="secondbakedmenu"> 
<li><a href=".html">Images</a> 
<ul> 

<li> 



</li> 

    <dt>Images</dt> 
<dd></dd> 
<a href=".html"><img src="" height=100 width=120/></a> 

<li> 

<dt>Images</dt> 
<dd></dd> 
<a href=".html"><img src="" height=100 width=120/></a> 

</li> 

<dt>Images</dt> 
<dd></dd> 
<a href=".html"><img src="" height=100 width=120/></a> 

<li> 

<dt>Images</dt> 
<dd></dd> 
<a href=".html"><img src="" height=100 width=120/></a> 

</li> 
<dt>Images</dt> 
<dd></dd> 
<a href=".html"><img src="" height=100 width=120/></a> 

<li> 

<dt>Images</dt> 
<dd></dd> 
<a href=".html"><img src="" height=100 width=120/></a> 

</li> 

<dt>Images</dt> 
<dd></dd> 
<a href=".html"><img src="" height=100 width=120/></a> 

<li> 

<dt>Images</dt> 
<dd></dd> 
<a href=".html"><img src="" height=100 width=120/></a> 

</li> 

<dt>Images</dt> 
<dd></dd> 
<a href=".html"><img src="" height=100 width=120/></a> 

</ul>

<dl> 
<ul class="secondbakedmenu"> 
<li><a href=".html">Previews</a> 
<ul> 

<li> 
<dt>Preview</dt> 
<dd></dd> 
<a href=".html"><img src="" height=100 width=120/></a> 
</li> 

<li> 
<dt>Preview</dt> 
<dd></dd> 
<a href=".html">SSX<img src="" height=100 width=120/></a> 
</li> 

<li> 
<dt>Preview</dt> 
<dd></dd> 
<a href=".html"><img src="" height=100 width=120/></a> 
</li> 

<li>  
<dt>Preview</dt> 
<dd></dd> 
<a href=".html"><img src="" height=100 width=120/></a> 
</li> 

<li> 
<dt>Preview</dt> 
<dd></dd> 
<a href=".html"><img src="" height=100 width=120/></a>  
</li>

<ul class="secondbakedmenu"> 
<li><a href=".html">All Updates</a> 
<ul> 
<li><a href=".html">1</a></li> 
<li><a href=".html">2</a></li> 
<li><a href=".html">3</a></li> 
<li><a href=".html">4</a></li> 
<li><a href=".html">5</a></li> 
</ul>

，并为其

.secondbakedmenu {list-style: none; 
     float: left; 
     margin-top: 15px; 
     margin-left: -20px;} 

.secondbakedmenu li>a{color: white; 
      font-size: 12px} 

.secondbakedmenu li{font-family: Berlin Sans FB; 
      } 

.secondbakedmenu li ul {position: absolute; 
         display: none;} 

.secondbakedmenu a:hover{text-decoration: none; 
         color: white; 
     text-shadow: 1px 1px 1px blue; 

     } 

.secondbakedmenu li:hover ul { 
        display: block; 
        list-style-type: none; 
        } 

ul.secondbakedmenu li:hover{margin: 0; 
          padding: 0;}

的CSS

我怎样才能使此菜单进入带有点击功能而不是悬停的选项卡式视图菜单，并且使得当标签正确放置在同一个容器内时显示的内容。

来源

2012-06-01 Johnny Hankgard

我创建了这个菜单的jsfiddle为好。 http://jsfiddle.net/Eqsah/1/embedded/result/ –

您将需要使用JavaScript（也许jQuery） – Undefined

肯定需要JavaScript。但是，我不会重新发明那个轮子。使用带插件的java脚本库。

jQuery的UI有一个“标签”控件的位置： http://jqueryui.com/demos/tabs/

来源

2012-06-01 17:55:12 Faust

带有CSS和html的tabview菜单

回答

相关问题