7.3 ナビゲーションメニューを調整する

戻る

メニューを横に伸ばす

ページ上部のナビゲーションメニューを横に伸ばしてバーのようなデザインにします。そのためにはボックスの背景色を指定します。ここでは<nav>の範囲に対して background-color で背景色を指定します。

/* ナビゲーションメニュー */
nav ul { margin: 0;
         padding: 0;
         list-style: none; }

nav a { display: block;
        padding: 5px;
        color: black;
        font-size: 14px;
        text-decoration: none; }

nav a:hover { background-color: #dddddd; }

/* メニューを横に並べる */
nav ul:after { content: "";
               display: block;
               clear: both; }

nav li { float: left;
         width: auto; }

/* ナビゲーションメニューを横に伸ばす */
nav { background-color:#77bbcc; }

・・省略・・

メニューに色が付きました。

ナビゲーションメニューの太さを調整する

メニューの太さが狭くてクリックしにくいと感じました。太さはボックスの中身に応じて決まります。ナビゲーションメニューの場合は、中に格納されているリンクの高さがバーの太さとなります。

ここではリンクが機能する範囲を大きくすることでメニューの太さをより太くします。padding による余白のサイズを「5px」から「15px」に拡大しすることで範囲を大きくできます。

/* ナビゲーションメニュー */
nav ul { margin: 0;
        padding: 0;
        list-style: none; }

nav a { display: block;
        padding: 15px;
        color: black;
        font-size: 14px;
        text-decoration: none; }

nav a:hover { background-color: #dddddd; }

/* メニューを横に並べる */
nav ul:after { content: "";
               display: block;
               clear: both; }

nav li { float: left;
         width: auto; }

/* ナビゲーションメニューを横に伸ばす */
nav { background-color:#77bbcc; }

・・省略・・

余白を大きくすることで、ナビゲーションメニューが太くなりました。

リンクの色を調整する

メニューの色を変えたのに合わせて、リンクの色も調整します。

マウスカーソルを重ねた時の背景色をグレー #dddddd から水色 #77ddee に変更します。

/* ナビゲーションメニュー */
nav ul { margin: 0;
        padding: 0;
        list-style: none; }

nav a { display: block;
        padding: 15px;
        color: black;
        font-size: 14px;
        text-decoration: none; }

nav a:hover { background-color: #77ddee; }

/* メニューを横に並べる */
nav ul:after { content: "";
               display: block;
               clear: both; }

nav li { float: left;
         width: auto; }

/* ナビゲーションメニューを横に伸ばす */
nav { background-color:#77bbcc; }

・・省略・・

マウスカーソルを重ねた時の背景色が変更されました。