我有这个 CSS 水平菜单,它的选项卡数量取决于 php 进行的 mysql 查询。最近,我得到了很多标签,它溢出到标签的第一行下面,并隐藏了内容框的顶部。
我希望选项卡在窗口右侧溢出, overflow hidden ,但如果选项卡溢出,则会出现箭头。
这是一个菜单的html代码示例:
<ul id="tabs">
<li class="active" id="tabFirstCategory"><a href="#" onclick='showHideTabs("FirstCategory");'>FirstCategory</a>
<li class="active" id="tabSecondCategory"><a href="#" onclick='showHideTabs("SecondCategory");'>SecondCategory</a>
</ul>
<div id="tabcontent" class="clear">Some Content</div>
这是设置菜单和内容框样式的 CSS
body
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
ul#tabs
{
position:fixed;
width:100%;
background-color:#ffffff;
border-bottom-style: solid;
border-color: #d3d3d3;
border-width: 1px;
z-index:2;
}
ul#tabs, ul#tabs li
{
float:left;
margin:0;
padding:0;
list-style:none;
}
ul#tabs .active
{
font-weight:bold;
}
ul#tabs li a
{
float:left;
padding:4px 10px 4px;
border:1px solid #d3d3d3;
border-bottom:none;
margin-right:4px;
}
ul#tabs .active a
{
background-color:#edf4f9;
}
.clear
{
clear:both;
/*for IE6 pos*/
width:100%;
overflow:hidden;
}
#tabcontent
{
position:relative;
top:25px;
margin-bottom:25px;
}
如果可能的话,我希望有一个 CSS 解决方案,但我也不反对使用 javascript。 (由于管理政策,没有 jquery。)
最佳答案
你需要这样制作你的html
<div class="menu-outer">
<img src="left-arrow.png" onclick="moveMenu( -10 )" />
<ul>
...
</ul>
<img src="right-arrow.png" onclick="moveMenu( 10 )" />
</div>
默认情况下将图像显示设置为无(使用 css class menu-outer)。添加使此图像可见的类(例如“large”)(将用于 div)
现在对于 javascript - 检查菜单是否适合宽度(ul 的 offsetWidth 与 div 的 offsetWidth)的加载 - 如果否,将“large”类添加到 div(“menu-outer large”) - 这样按钮就会出现
使用 position: relative 移动 ul 并设置其左侧。
关于javascript - CSS水平标签菜单溢出隐藏内容框顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6411841/