Question

我正在尝试构建一个网站，其菜单栏仍然固定在屏幕顶部。

我或多或少都按照自己的意愿工作，酒吧就在这里。唯一的问题是当窗口的大小小于菜单栏宽度时，不可能水平地抓住菜单栏（只有内容滚动）。这意味着有小显示器的人将无法使用右侧的菜单项。

我已经阅读了与此相关的其他问题，但答案都涉及脚本，是否可以使用纯css和html实现垂直固定但水平滚动的菜单？或者我必须使用脚本吗？

这是代码和相关的css：

HTML：

<body>
<div id="header">
    <div>
        <div class="logo">
            <a href="index.html">Yectlahuilli hC</a>
        </div>
        <ul id="navigation">
            <li class="active">
                <a href="index.html">Inicio</a>
            </li>
            <li>
                <a href="servicios.html">Servicios</a>
            </li>
            <more links...>
        </ul>
    </div>
</div>
<div id="spacer">
</div>
<content...>

的CSS：

#header {
    background-color: #ffffff;
    border-bottom: 0px solid #e6e6e6;
    padding-top: 10px;
    padding-bottom:30px;
    position:fixed;
    height:134px;
    width:100%;
}
#header > div, #footer > div {
    width: 970px;
    margin: 0 auto;
    padding: 0 20px;
}
#spacer {
position:relative;
height:174px;
z-index:-1;
}

欢迎提出任何建议，谢谢。

Answer 1

首先想到的是使用css媒体屏幕根据屏幕尺寸控制菜单的宽度和高度。

@media screen and (max-width: 960px){
     #navigation {width: 200px; font-size:12px; and so on...}
}

调整最大宽度以在新样式生效时更改。当屏幕（或窗口）大小为960px或更小时，放置在媒体屏幕中的任何样式都将生效。

菜单栏 - 垂直固定，允许水平滚动 - 不使用脚本

1 个答案: