気ままにアクアリウム

*

16.メニューをドロップダウンするボタンに変更する。

      2014/06/02 6:38 pm    0

メニューをドロップダウンするボタンに変更する方法

(1)スタイルシート(style.css)に追記する。

下記コードの下に①~④を追加する。

/*-----------------------------
基本構造
------------------------------*/
#header-in, #wrap-in, #navi-in, #footer-in, #gazou-in {
	width: 986px;
	margin-right: auto;
	margin-left: auto;
}

「#navi-in」内のリスト要素を定義(追加)する。

#navi-in ul {
        margin: 0px;
        padding: 0;
}
#navi-in li {
        float: left;
        width: 100px;
        height: 25px;
        padding: 0;
}

※width,heightはボタンの幅と高さなので、お好みで指定してください。

②「#navi-in」内のリンク表示を定義(追加)する。

#navi-in li a {
        text-align: center;
        padding: 10px 0;
        width: 100%;
        border-radius: 5px;
        background-color: blue;
        color: #CF0 !important;
        display: block;
}

※border-radiusは角を丸くする設定なので、お好みに合わせて変更、削除してください。

※!important は、ここでの色設定を優先させるための処理です。指定しないと色が変わりません。

③カーソルがメニュー上にある場合を定義(追加)する。

#navi-in li:hover > a {
        background-color: darkblue;
}

④サブメニューを表示/非表示させることを定義(追加)する。

#navi-in li ul li {
        overflow: hidden;
        height: 0;
        padding: 0;
}
#navi-in li ul li a {
        background-color: darkblue;
        padding: 10px 0;
}
#navi-in li:hover ul li {
        overflow: visible;
        height: 25px;
}

※color,background-color は#RGB指定(#CF0)や直接指定(darkblue)が可能です。好みの色等はRGB関連サイトでご確認ください。

以上です!

 - Stinger3 , , , ,

Shares