ぬえさぶろうのAnimate放送部

解説

キーワード	使い方
children()	子要素の取得 要素から見た子要素を取得します。
hover()	マウスオーバー 要素の上にマウスカーソルが重なったときに、引数の内容が呼び出されます。
stop()	アニメーションの中止 要素のアニメーションが実行中である場合、中止します。

コンテンツのつくりかた

• マウスオーバー時に実行する
• 下層メニューをアニメーションで展開表示する

HTML

ここには、HTMLのコードを入れる

/*ドロップダウンメニュー*/
<ul id="drop_parent_list">
            <li class="parent_list_item">
                <a href="#">動く<br>ロゴ</a>
                <ul class="drop_child_list">
                    <li class="child_list_item"><a href="#">光が飛んでロゴになる</a></li>
                    <li class="child_list_item"><a href="#">カーソルが通過するとバージョンアップする</a></li>
                    <li class="child_list_item"><a href="#">流れるような疾走感のあるロゴ</a></li>
                    <li class="child_list_item"><a href="#">モニタのノイズの中から登場するロゴ</a></li>
                    <li class="child_list_item"><a href="#">動くテープに埋め尽くされるロゴ</a></li>
                </ul>
            </li>
            <li class="parent_list_item"><a href="#">ActionScript3.0の<br>使い方</a>
                <ul class="drop_child_list">
                    <li class="child_list_item"><a href="#">黒板の日付を自動更新するしくみ</a></li>
                    <li class="child_list_item"><a href="#">太陽が移動するとキャラクターの影も移動するしくみ</a></li>
                </ul>
            </li>
            <li class="parent_list_item"><a href="#">キャラクター<br>アニメーション</a>
                <ul class="drop_child_list">
                    <li class="child_list_item"><a href="#">IK</a></li>
                    <li class="child_list_item"><a href="#">アセットワープツール</a></li>
                    <li class="child_list_item"><a href="#">レイヤーペアレンティング</a></li>
                    <li class="child_list_item"><a href="#">目パチと口パク</a></li>
                </ul>
            </li>
            <li class="parent_list_item">
                <a href="#">ホワイトボード<br>アニメーション</a>
                <ul class="drop_child_list">
                    <li class="child_list_item"><a href="#">企画の発案</a></li>
                    <li class="child_list_item"><a href="#">キャラクター</a></li>
                    <li class="child_list_item"><a href="#">舞台</a></li>
                    <li class="child_list_item"><a href="#">シナリオの作成</a></li>
                </ul>
            </li>
        </ul>

CSS

ここには、CSSのコードを入れる

/*ドロップダウンメニュー*/
#drop_parent_list{
    display:flex;
    flex-direction:row;
    position:relative;
}
#drop_parent_list .parent_list_item{
    width:25%;
    max-height:4em;
    background:#4A7664;
    border-right:1px solid #ccc;
}
#drop_parent_list .parent_list_item:last-child{
    border-right:none;
}
#drop_parent_list .parent_list_item a{
    display:block;
    text-align:center;
    color:#E5DECA;
    transform:translateY(0%);
}
#drop_parent_list .parent_list_item a:hover{
    background:#4A7664;
}
#drop_parent_list .drop_child_list{
    display:none;
}
.drop_child_list{
    display:flex;
    flex-direction:column;
    background:#7E9374;
}
.drop_child_list .child_list_item{
    width:100%;
    min-width:300px;
    height:auto;
    min-height:200px;
    margin:1em 0;
    background:#7E9374;
    text-align:left;
    border-bottom:1px solid #E5DECA;
}
.drop_child_list .child_list_item a{
    display:block;
    color:#E5DECA;
    text-align:left;
}
.drop_child_list .child_list_item a:hover{
     background:#0D3B2B;
}

JS

ここには、JSのコードを入れる

//dropdown_menu
$(function(){
    //#navi直下のli要素をマウスオーバー
    $("#drop_parent_list").children(".parent_list_item").hover(
        function(){
            $(this).children(".drop_child_list").stop().slideToggle(100);
        }
    );       
});