2015年08月02日
web制作

【CSS】意外と作るのが難しい！？ナビゲーションメニューについてもう一度考える

菱川です。今回はナビゲーションメニューについてお話ししたいと思います。
まず、ナビゲーションメニューと言うのは、僕のホームページの上の方にもあるようなメニューバーみたいなやつです。

サイトを作るとき、ユーザーはナビゲーションメニューがあるとそこから簡単に目的のページにたどり着けるので非常に重要なパーツでもあります。そして、多分この部分が一番作るのが難しい部分だと僕は思ってます。
また、凝れば凝るほど良くなりますし、やり方も結構人それぞれな部分もあります。いろいろ探すとナビゲーションメニューバーだけのCSS,htmlコードとか配布されていたりしますけど、できるものなら一人で作りあげたいですよね。
僕はこのサイトを作るのにわりと一生懸命勉強したけど「訳わかんねぇ！！動いたらそれでいいや！！」って言う部分もあって、この辺何でちゃんと動いてるんだろうって所もいっぱいあります。実際、CSSが煩雑で荒れに荒れてて、修正するのがめちゃくちゃ大変でしたしこれからも大変です。でも、それができない自分と、できる自分では全然違います。
と言うわけで、すごく簡単に、1からナビゲーションメニューを作りましょう！！できるかな！

まずはhtmlを打ち込む

ul,liタグを入れ子にしてメニューを作る

まずはこんなコードを書きます。

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="navmenutest.css">
<meta https-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
</head>
<body>
    <div >
        <ul class="nav_menu">
            <li><a href="#">どうぶつ</a>
                <ul>
                    <li>
                        <a href="#">いぬ</a>
                    </li>
                </ul>
                <ul>
                    <li>
                        <a href="#">ねこ</a>
                    </li>
                </ul>
                <ul>
                    <li>
                        <a href="#">うさぎ</a>
                    </li>
                </ul>
                <ul>
                    <li>
                        <a href="#">きつね</a>
                    </li>
                </ul>
            </li>
            <li><a href="#">くだもの</a>
                <ul>
                    <li>
                        <a href="#">もも</a>
                    </li>
                </ul>
                <ul>
                    <li>
                        <a href="#">ぶどう</a>
                    </li>
                </ul>
                <ul>
                    <li>
                        <a href="#">いちご</a>
                    </li>
                </ul>
            </li>
            <li><a href="#">おと</a>
                <ul>
                    <li>
                        <a href="#">うた</a>
                    </li>
                </ul>
                <ul>
                    <li>
                        <a href="#">ぎたー</a>
                    </li>
                </ul>
                <ul>
                    <li>
                        <a href="#">ぴあの</a>
                    </li>
                </ul>
                <ul>
                    <li>
                        <a href="#">らっぱ</a>
                    </li>
                </ul>
                <ul>
                    <li>
                        <a href="#">たいこ</a>
                    </li>
                </ul>
                <ul>
                    <li>
                        <a href="#">ふえ</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

こういうの作るときに一番めんどくさいのが「あれっ？自分今どこのulタグいじってるの？」ってなっちゃうことです…面倒かもしれませんが、きちんとインデントを付けたほうがいいかと思います。
個人的におすすめするのがmicrosoft visual studioです。フリーソフトでgpadとかterapadとか色々あるんですけど、僕的にはこれに落ち着きました。VBとかC#用だったりしますけどweb書くのにも十分使えます。htmlは自動でインデントしてくれて、CSSも予測変換が出て嬉しいです。

CSSを書く

次はCSS。こんな感じで書いちゃいましょう。


ul.nav_menu {
    position:absolute;          /*この部分は            */
    width: 100%;                /*横いっぱいに          */
    height: 40px;               /*みょいーんと伸びている*/
    display:inline-block;       /*緑の線の              */
    background-color: #58B92A;  /*部分だよ              */
}

ul.nav_menu li {                 /*こいつがメニューボタンだ　　　　*/
    z-index: 1;                  /*手前に表示して                  */
    position: relative;          /*上↑のみょいーんの原点を基準に　*/
    list-style: none;            /*箇条書きの黒丸を消して           */
    width: 100px;                /*幅100ピクセルの                  */
    height: 40px;                /*縦40ピクセルの                   */
    display: inline-block;       /*四角を作って                   　*/
    line-height: 40px;           /*文字の上下を中央に寄せて         */
    background-color: #58B92A;   /*適当なお色を付けましょう         */
    border-left: solid 1px #fff; /*あ、そうだ。                     */
    border-right: solid 1px #fff;/*左右に白い境界線を入れましょうね */
    float: left;                 /*左寄せにもしておこう             */
}

ul.nav_menu li a {               /*メニューボタンのリンク          　*/
    text-align: center;          /*文字の左右を中央に寄せて         　*/
    text-decoration: none;       /*リンク文字の下線は消しておこう　　*/
    display: inline-block;       /*四角を作って                      */
    width: 100px;                /*えっと、100ピクセルの             */
    height: 40px;                /*40ピクセルね                      */
    color: #fff;                 /*文字の色は白色                    */
    background-color: #58B92A;   /*一応緑色にしておこう             */
}

ul.nav_menu li a:hover {
    background-color: #666666; /*マウスオンで灰色になるよ             */
}

ul.nav_menu li ul li {              /*サブメニューぼたんだ　　　　　*/
    z-index: -1;                    /*コイツは奥の方に置いておこう　*/
    right: 41px;                    /*右に寄せて                    */
    margin-top: -40px;              /*メニューボタンに隠してもらおう*/
}

ul.nav_menu li:hover ul li {
    margin-top: 0px;                /*マウスオンでサブメニューが出てくるよ*/
}

ul.nav_menu li ul li, 
ul.nav_menu li:hover ul li,
ul.nav_menu li a:hover {
    -webkit-transition: 0.3s ease-in-out;  
	-moz-transition: 0.3s ease-in-out;  
	-o-transition: 0.3s ease-in-out;  
	transition: 0.3s ease-in-out; 
}

これもねぇ…「今どこ書いてんだ！？」ってなるんですよねぇ…。なんか順番とか変で汚かったらすみません。コメントになるべくわかりやすくて楽しい説明も書いてみました。今回ごちゃごちゃやってたら疑似要素無しで出来上がっちゃいました。要するに逃げです。

実際どうなるか見てみよう！！

こんな感じです。

※記事に無理やり表示させるようにちょっといじくりました。
それっぽくはなりましたね！！
これをベースに、例えばアニメーションをフェードインで表示させたいなと思ったら

ul.nav_menu li ul li {
    z-index: -1;  
    right: 41px;  
    margin-top: -40px;              
    opacity: 0;/*←追加*/
}

ul.nav_menu li:hover ul li {
    margin-top: 0px;      
　　opacity: 1;/*←追加*/
}

とすればフェードインしたりします(やってみたけどめっちゃ微妙にフェードインが分かるくらいだった…)

ul.nav_menu li ul li {              /*サブメニューぼたんだ　　　　　*/
    z-index: -1;                    /*コイツは奥の方に置いておこう　*/
    right: 41px;                    /*右に寄せて                    */
    //margin-top: -40px;              /*メニューボタンに隠してもらおう*/
    opacity: 0;
    overflow: hidden;
}

ul.nav_menu li:hover ul li {
    margin-top: 0px;                /*マウスオンでサブメニューが出てくるよ*/
    opacity: 1;
    overflow: visible;
}

先ほどのをもうチョイ変えて、ホバーした時に隠れた要素が出てくるようにしたらフェード感出ますね！