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...}
}

新しいスタイルが有効になったときに変化する最大幅を調整します。メディア画面に配置したスタイルは、画面 (またはウィンドウ) のサイズが 960px 以下の場合に有効になります。

于 2013-08-21T23:43:09.117 に答える