1

我正在尝试构建一个具有固定在屏幕顶部的菜单栏的站点。

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

我已经阅读了与此相关的其他问题，但答案都涉及脚本，是否可以使用纯 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;
}

欢迎任何建议，在此先感谢。

4

1 回答 1

0

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

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

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

于 2013-08-21T23:43:09.117 回答