CSS と JavaScript を使用してレスポンシブ・トップ・ナビゲーション・メニューの作成方法を学習します。

トップ・ナビゲーション

ブラウザウィンドウのサイズを変更して、レスポンシブ・ナビゲーション・メニューの動作を確認してください：

レスポンシブ・トップ・ナビゲーションの作成

ステップ 1) HTML の追加：

例

<ul class="topnav" id="myTopnav">
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
<li class="icon">
<a href="javascript:void(0);" onclick="myFunction()">☰</a>
</li>
</ul>

class="icon" を持つリスト項目には、小型画面でのトップ・ナビゲーションの開閉に使用するためのリンクがあります。

ステップ 2) CSS の追加：

ナビゲーション・バーのような外観にリストをスタイルします：

例

/* Remove margins and padding from the list, and add a black background color */
ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

/* Float the list items side by side */
ul.topnav li {float: left;}

/* Style the links inside the list items */
ul.topnav li a {
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of links on hover */
ul.topnav li a:hover {background-color: #555;}

/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}

例

/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
@media screen and (max-width:680px) {
ul.topnav li:not(:first-child) {display: none;}
ul.topnav li.icon {
    float: right;
    display: inline-block;
}
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
@media screen and (max-width:680px) {
ul.topnav.responsive {position: relative;}
ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
}
ul.topnav.responsive li {
    float: none;
    display: inline;
}
ul.topnav.responsive li a {
    display: block;
    text-align: left;
}
}

ステップ 3) JavaScript の追加：

例

/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}

Try it Yourself »

How TO - レスポンシブ・トップ・ナビゲーション

トップ・ナビゲーション

レスポンシブ・トップ・ナビゲーションの作成

ステップ 1) HTML の追加：

例

ステップ 2) CSS の追加：

例

例

ステップ 3) JavaScript の追加：

例