例

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
</ul>

<div class="main">
<p>Some text some text some text some text..</p>
</div>

ステップ 2) CSS の追加：

固定したトップ・メニューの作成には、position:fixed と top:0 を使用します。固定メニューは、他のコンテンツの上に重なることに注意してください。これを修正するには、メニューの高さ以上の margin-top を(コンテンツへ) 追加します。

例

/* The navigation bar */
.ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: fixed; /* Set the navbar to fixed position */
    top: 0; /* Position the navbar at the top of the page */
    width: 100%; /* Full width */
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    padding: 16px;
    text-decoration: none;
}

/* Main content */
.main {
    margin-top: 30px; /* Add a top margin to avoid content overlay */
}

Try it Yourself »

固定した下メニューの作成方法

固定した下メニューの作成には、position:fixed と bottom:0 を使用します：

例

/* The navigation bar */
.ul {
    position: fixed; /* Set the navbar to fixed position */
    bottom: 0; /* Position the navbar at the top of the page */
    width: 100%; /* Full width */
}

/* Main content */
.main {
    margin-bottom: 30px; /* Add a bottom margin to avoid content overlay */
}

Try it Yourself »

How TO - 固定メニュー

固定したトップ・メニューの作成方法

ステップ 1) HTML の追加：

例

ステップ 2) CSS の追加：

例

固定した下メニューの作成方法

例