CSS水平选项卡菜单溢出隐藏了内容框的顶部

CSS horizontal tab menu overflow hide the top of the content box

本文关键字：顶部 隐藏 选项 水平 菜单 溢出 CSS      更新时间：2023-09-26

我有这个CSS水平菜单，它的选项卡数量取决于php生成的mysql查询。最近，我收到了太多的选项卡，以至于它在选项卡的第一行下溢出，并隐藏了内容框的顶部。

我希望选项卡在窗口右侧溢出，并隐藏溢出，但如果选项卡溢出，则会出现箭头。

以下是菜单的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类菜单外部）。添加类（例如"large"），使此图像可见（将用于div）

现在对于javascript-检查加载时菜单是否适合宽度（ul的offsetWidth与div的offsetWidth）-如果不是，则将"large"类添加到div（"menu outer large"）-因此按钮将显示

使用position:relative移动ul并设置其左侧。

相关文章：