1

HTML5 と CSS3 だけを使用して垂直ナビゲーション バーを作成しようとしています。メニューを左側に表示し、ページの残りの部分を右側に表示することをお勧めします。ユーザーが下にスクロールすると、メニューがユーザーと一緒に下に移動します。これまでのところ、垂直メニューは希望どおりに見えていますが、残りを完了することはできませんでした. 私がこれまでに試した解決策はいずれも、奇妙な方法でページを構成するか、Javascript を使用することを意味していました。これは HTML5 と CSS3 だけで可能ですか?

CSS

/* Menu Navigation Properties */
nav
{
    text-align: center;
    padding-right: 1.0em;
}

/* Menu container */
nav ul
{
    float: left;
    list-style-type: none;
    padding-top: 0;
    padding-left: 0;
    padding-right: 0.75em;
}

/* Menu item container */
nav ul li
{
    margin-top: 0em;
    margin-left: 0.15em;
    margin-right: 0.15em;
}

/* Menu item Appearance */
nav ul li a
{
    background-color: black;
    color: #D0E2F1; /* Light Blue */
    height: 2em;
    line-height: 2em;
    width: 9em;
    display: block;
    border-width: 0.1em;
    border-style: solid;
    border-color: #dcdce9;
    text-decoration: none;
    text-align: center;
}

/* Menu item hovered over by user */
nav ul li a:hover
{
    background-color: #D0E2F1; /* Light Blue */
    color: black;
}

/* Current Page on the Menu */
nav ul li a.current
{
    font-weight: bold;
}

HTML ファイル

<html>
   <body>
      <nav>
         <!-- Menu Item List -->
      </nav>
      <h1>Page Title</h1>
      <!-- rest of page -->
   </body>
</html>
4

1 に答える 1

1

ページの残りの部分をラッパーでラップできない場合は、次のようにしてメニュー用のスペースを作ることができます

body {
    padding-left: 10em;
}

次に、メニューの位置を修正し、本体のパディングによって残されたスペースに引き戻します

nav {
    position: fixed;
    width: 9em; // Probably a good idea to fix the width of the menu
    margin-left: -10em;
    ...
}

ページの残りをラッパーでラップできる場合は、メニューの邪魔にならないように十分な左マージンを与えてください。

于 2013-04-08T02:20:55.273 に答える