実はこっそりjQueryの勉強をしていたことが少しだけある@web_shufuです。Twentytwelveテーマをカスタマイズして、メインナビゲーションメニューにアニメーションを取り入れたときの記録です。

1日目

メインナビゲーションのHTMLソースを確認

当サイトのヘッダー下部の黒いメインナビゲーションメニューバーは、こんなソースになっています。

<div class="menu-bar-container">
    <ul id="menu-bar" class="nav-menu">
        <li id="menu-item-731" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-731"><a href="https://webshufu.com/web-tool/">Web</a>
        <ul class="sub-menu">
            <li id="menu-item-732" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-732"><a href="https://webshufu.com/web-tool/css/">CSS</a></li>
            <li id="menu-item-1830" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1830"><a href="https://webshufu.com/web-tool/jquery/">jQuery</a></li>
            <li id="menu-item-1829" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1829"><a href="https://webshufu.com/web-tool/javascript/">javascript</a></li>
            <li id="menu-item-733" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-733"><a href="https://webshufu.com/web-tool/php/">PHP</a></li>
        </ul>
        </li>
        <li id="menu-item-735" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-735"><a href="https://webshufu.com/wordpress/">WordPress</a>
        <ul class="sub-menu">
            <li id="menu-item-738" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-738"><a href="https://webshufu.com/wordpress/beginner/">初心者向け入門講座</a></li>
            <li id="menu-item-739" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-739"><a href="https://webshufu.com/wordpress/plug-in/">プラグイン</a></li>
            <li id="menu-item-736" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-736"><a href="https://webshufu.com/wordpress/twentyeleven/">TwentyEleven</a></li>
            <li id="menu-item-737" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-737"><a href="https://webshufu.com/wordpress/twentytwelve/">TwentyTwelve</a></li>
        </ul>
        </li>
        <li id="menu-item-1046" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1046"><a href="https://webshufu.com/marketing/">Marketing</a>
        <ul class="sub-menu">
            <li id="menu-item-734" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-734"><a href="https://webshufu.com/marketing/seo/">SEO</a></li>
            <li id="menu-item-975" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-975"><a href="https://webshufu.com/marketing/sns/">SNS</a></li>
            <li id="menu-item-730" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-730"><a href="https://webshufu.com/marketing/blog/">ブログ運営</a></li>
        </ul>
        </li>
        <li id="menu-item-740" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-740"><a href="https://webshufu.com/health/">健康</a>
        <ul class="sub-menu">
            <li id="menu-item-976" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-976"><a href="https://webshufu.com/health/weight-loss/">ダイエット</a></li>
            <li id="menu-item-741" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-741"><a href="https://webshufu.com/health/recipe/">低糖質レシピ</a></li>
        </ul>
        </li>
        <li id="menu-item-729" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-729"><a href="https://webshufu.com/news/">雑記</a>
        <ul class="sub-menu">
            <li id="menu-item-1828" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1828"><a href="https://webshufu.com/news/habit/">習慣化</a></li>
            <li id="menu-item-1827" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1827"><a href="https://webshufu.com/news/revising-the-constitution/">憲法改正</a></li>
            <li id="menu-item-977" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-977"><a href="https://webshufu.com/news/cute/">かわいい</a></li>
        </ul>
        </li>
    </ul>
</div>

「bar」がいくつか出て来ます。

これは、@web_shufuが、Wordpress管理画面の外観⇒メニューで作成したメニューに「bar」と名づけて、メインメニューとして利用しているからです。

当然ですが、「bar」は皆さんがメインメニューとして使っているメニューの名前になるので、その点注意してください。

CSSソース

思い通りの見た目にする為に、style.cssを若干適当に色々といじっていて、「これでいいんじゃね?」ということろで出来上がりとしました。

したがってコードは全く美しくないです。いやぶっちゃけ醜いアヒルの子状態。こういうのがスパゲッティコード?

すいません。

//バーは黒色
.main-navigation ul.nav-menu{
    border-bottom: 0px solid #ededed;
    border-top: 0px solid #ededed;
    display: inline-block !important;
    text-align: left;
    width: 100%;
    background:#000000;
}
//黒色バーの中の最上位カテゴリの文字の大きさ
.main-navigation li a,
.main-navigation li{
    display: inline-block;
    text-decoration: none;
    font-size:21px;
    font-size:1.5rem;
}
//リンク文字を白抜き文字に
.main-navigation li a{
    border-bottom: 0px solid #ffffff;
    color: #ffffff;
    text-transform: none;
    background:#000000;
    line-height: 1.2;
    padding: 10.5px;
    padding: 0.75rem;
}
//マウスオーバーで白黒反転
.main-navigation li a:hover {
    background: #ffffff;
    color: #000000;
}
//よくわかりませんが、これ入れとかないとドロップダウンになりません。
.main-navigation li {
    margin: 0 ;
    position: relative;
}
//最上位カテゴリ直下の子カテゴリがメインコンテンツの上にニュっとせり出した状態におけるスタイル
//position: absolute;以下がとても大事
.main-navigation ul li > ul {
    border-left: 0;
    display: block;
    margin:0;
    position: absolute;
    top: 100%;
    z-index: 2;
}
//孫カテゴリのスタイル。やはりposition: absolute;以下がとても大事
.main-navigation ul li > ul li > ul{
    border-left: 0;
    display: block;
    margin:0;
    position: absolute;
    top: 0;
    left:100%;
    z-index: 2;
}
//子･孫カテゴリの字の大きさをなどを指定
.main-navigation li ul li a {
    /***background: #00a48c;
    color:#ffffff;***/
    border-top: 1px solid #ffffff;
    display: block;
    font-size: 12.6px;
    font-size: 0.9rem;
    line-height: 1.2;
    padding: 10.5px;
    padding: 0.75rem;
    width: 126px;
    width: 9rem;
}
//子･孫カテゴリにマウスオーバーした場合は白黒反転ではなく、
//緑地に白字のスタイルをあてる。
.main-navigation li ul li a:hover {
    background: #00a48c;
    color:#ffffff;
}

jquery.menuSlideUpDown.jsの作成

以下の内容でjquery.menuSlideUpDown.jsファイルを作り、ドメイン直下のjsフォルダの直下に置きました。

$(function(){
$("#menu-item-731>ul,#menu-item-735>ul,#menu-item-1046>ul,#menu-item-740>ul,#menu-item-729>ul").hide();
$("#menu-item-731,#menu-item-735,#menu-item-1046,#menu-item-740,#menu-item-729").hover(function(){
$(">ul:not(:animated)", this).slideDown();},
function(){$(">ul",this).slideUp();});
});

本当は、セレクタをもう少しすっきり書きたいのですが、不勉強なので乱雑な仕上がりです。

jsファイルへのリンク

</body>直前に以下を挿入。

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script type='text/javascript' src='https://webshufu.com/js/jquery.menuSlideUpDown.js'></script>

「ところで、1.8.3」の部分を、最新バージョンを追いかけて「1.9.1」に変えてみたら動かなくなりました。

変えないほうがいいかもしれません。

※その後、テーマファイルのfunction.phpにてwp_enqueue_script関数を使って、リンクを設定し直しました。

最後に

以上のようなコードを準備したところ、メインナビゲーションのドロップダウンメニューに、アニメーションを導入することが出来ました。

スパゲッティコードをこじらせたような醜いCSSコードがちとアレですが、とにかく思い通り動いたのでそれで良しとします。

皆さんの参考になれば幸いです。

また、下記サイト様を大変参考にさせていただきました。あざーす。

[img-link url=”http://www.geekzshu.com/jquery/343″ title=”jqueryでできる簡単プルダウン”]

2日目

先日、PC閲覧時のナビゲーションメニューに、animationするドロップダウンメニューを導入しました。今回は、モバイル閲覧時のメニューにも導入しましたが、マウスオーバーではなく、クリックでanimationするドロップダウンメニューとしました。

モバイルではマウスオーバーできない

当たり前のことながら、モバイルではマウスオーバーできません。したがって、クリックしたときにドロップダウンするメニューにせざるを得ませんでした。

面倒くさいですが仕方ありません。

モバイルメニューのhtml

元々、サイドバーにあったメニューをモバイル閲覧時のメニューとして使っているので、class名やidにsidebarが頻出しますが、ご容赦を。

<div class="menu-mobile">Menu</div>
<div class="menu-sidebar-container">
    <ul id="menu-sidebar" class="menu">
        <li id="menu-item-651" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-651"><a href="https://webshufu.com/wordpress/">WordPress</a>
            <ul class="sub-menu">
                <li id="menu-item-655" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-655"><a href="https://webshufu.com/wordpress/beginner/">初心者向け入門講座</a></li>
                <li id="menu-item-654" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-654"><a href="https://webshufu.com/wordpress/plug-in/">プラグイン</a></li>
                <li id="menu-item-652" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-652"><a href="https://webshufu.com/wordpress/twentyeleven/">TwentyElevenカスタマイズ</a></li>
                <li id="menu-item-653" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-653"><a href="https://webshufu.com/wordpress/twentytwelve/">TwentyTwelveカスタマイズ</a></li>
            </ul>
        </li>
        <li id="menu-item-1994" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor menu-item-1994"><a href="https://webshufu.com/web-tool/">Web</a>
            <ul class="sub-menu">
                <li id="menu-item-1995" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1995"><a href="https://webshufu.com/web-tool/css/">CSS</a></li>
                <li id="menu-item-1996" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1996"><a href="https://webshufu.com/web-tool/javascript/">javascript</a></li>
                <li id="menu-item-1997" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-1997"><a href="https://webshufu.com/web-tool/jquery/">jQuery</a></li>
                <li id="menu-item-1998" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1998"><a href="https://webshufu.com/web-tool/php/">PHP</a></li>
            </ul>
        </li>
        <li id="menu-item-1990" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1990"><a href="https://webshufu.com/marketing/">Marketing</a>
            <ul class="sub-menu">
                <li id="menu-item-1991" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1991"><a href="https://webshufu.com/marketing/seo/">SEO</a></li>
                <li id="menu-item-1992" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1992"><a href="https://webshufu.com/marketing/sns/">SNS</a></li>
                <li id="menu-item-1993" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1993"><a href="https://webshufu.com/marketing/blog/">ブログ運営</a></li>
            </ul>
        </li>
        <li id="menu-item-2007" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2007"><a href="https://webshufu.com/health/">健康</a>
            <ul class="sub-menu">
                <li id="menu-item-2008" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2008"><a href="https://webshufu.com/health/weight-loss/">ダイエット</a></li>
                <li id="menu-item-2009" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2009"><a href="https://webshufu.com/health/recipe/">低糖質レシピ</a></li>
            </ul>
        </li>
        <li id="menu-item-2010" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2010"><a href="https://webshufu.com/news/">雑記</a>
            <ul class="sub-menu">
                <li id="menu-item-2011" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2011"><a href="https://webshufu.com/news/cute/">かわいい</a></li>
                <li id="menu-item-2012" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2012"><a href="https://webshufu.com/news/revising-the-constitution/">憲法改正</a></li>
                <li id="menu-item-2013" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2013"><a href="https://webshufu.com/news/habit/">習慣化</a></li>
            </ul>
        </li>
    </ul>
</div>

モバイルメニューのcss

.menu-mobile{
    display: block;
    text-decoration:none;
    text-align:center;
    padding: 7px 10px;
    padding: 0.5rem 0.714285714rem;
    margin:0 70px;
    margin:0 5rem;
    font-size: 21px;
    font-size: 1.5rem;
    line-height: 1.7142857;
    font-weight: bold;
    color: #ffffff;
    background-color: #000000;
}
.menu-mobile:hover {
    color:#00a48c;
    background-color: #e1e1e1;
}
.menu-mobile:active{
    color: #777;
    background-color: #e1e1e1;
    box-shadow: inset 0 0 8px 2px #c6c6c6, 0 1px 0 0 #f4f4f4;
}
.menu-sidebar-container{
    display:none;
    background:white;
    margin-bottom:7px; 
    margin-bottom:0.5rem; 
    border-color:#00a48c;
    border-style:dotted;
    border-width:0 0 2.1px 0px;
    border-width:0 0 0.15rem 0;
}

.menu-sidebar-container ul li{
    font-size: 17.5px;
    font-size: 1.25rem;
    line-height: 1.3;
}
.menu-sidebar-container ul li:before {
    content:"";
    /***content:"\25cf";

    color:#00a48c;
    font-weight:bold;
    font-size:24.5px;
    font-size:1.75rem;
    vertical-align:middle;***/
}
.menu-sidebar-container ul li a{
    margin:7px;
    padding:7px;
    margin:0.5rem;
    padding:0.5rem;
    display:block;
    text-decoration:none;
    box-shadow: 3px 3px 2px black; 
    border-color:black;
    border-style:solid;
    border-width:1px;
    color: black;
    background-color: rgb(207,207,207);
    background-image: linear-gradient(bottom, rgb(207,207,207) 20%, rgb(240,237,240) 60%);
    background-image: -o-linear-gradient(bottom, rgb(207,207,207) 20%, rgb(240,237,240) 60%);
    background-image: -moz-linear-gradient(bottom, rgb(207,207,207) 20%, rgb(240,237,240) 60%);
    background-image: -webkit-linear-gradient(bottom, rgb(207,207,207) 20%, rgb(240,237,240) 60%);
    background-image: -ms-linear-gradient(bottom, rgb(207,207,207) 20%, rgb(240,237,240) 60%);
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.2, rgb(207,207,207)),
        color-stop(0.6, rgb(240,237,240))
    );
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    border: 0px solid #000000;
}
.menu-sidebar-container ul li a:hover{
    color:#00a48c;
}
.menu-sidebar-container ul li a:active{
    box-shadow: 0px 0px 0px black; 
}
.menu-sidebar-container ul ul {
    margin-left: 14px;
    margin-left: 1rem;
}

jquery.mobilemenuToggle.jsの作成

$(".menu-mobile").click(function () {
  $(".menu-sidebar-container").slideToggle(500);
});
$(".menu-mobile").toggle(
  function () {
    $(this).text("Close");
  },
  function () {
    $(this).text("Menu");
  }
);

以上の内容を含むjquery.mobilemenuToggle.jsを作成して、ドメイン直下のjsフォルダの直下に置きました。

前半部分

$(".menu-mobile").click(function () {
  $(".menu-sidebar-container").slideToggle(500);
});

この部分は、クリックするたびにメニューが上下にスライドして開閉する動作を設定しています。500は500/1000秒を表し、開閉にかかる時間を決めています。

後半部分

$(".menu-mobile").toggle(
  function () {
    $(this).text("Close");
  },
  function () {
    $(this).text("Menu");
  }
);

この部分は、メニューボタンの文字を、クリックするたびに「Menu」→「Close」→「Menu」→「Close」と変化させる設定です。

jsファイルへのリンク

</body>の直前に以下のリンクを入れます。

<script type='text/javascript' src='https://webshufu.com/js/jquery.mobilemenuToggle.js'></script>

※その後、テーマファイルのfunction.phpにてwp_enqueue_script関数を使って、リンクを設定し直しました。

こんな感じに仕上がりました。

以上のようにカスタマイズした結果、当サイトのモバイル閲覧時の動きは以下のようになりました。

メニューが滑らかに開閉してくれますので、個人的にはまあまあ満足。

メニューが閉じている状態

メニューが開いた状態

3日目

先日、Jqueryでanimationするドロップダウンメニューを搭載とに実装したよ、というエントリを書いた@web_shufuです。しかし、コードは汚いし、多階層対応ではないので、その部分をクリアするべく改良しました。

ちなみに先日のエントリーはこれ。

[img-link url=”https://webshufu.com/intoroduce-drop-down-menu-that-animate-with-jquery/” title=”【WordPress】animationするドロップダウンメニュー導入｜Web Shufu”]

今回、これを改良して、多階層の入れ子にも対応できるように、少しでもシンプルでキレイなコードになるように努力してみました。

今回のデモページ

努力の結果、多階層の入れ子にも対応可能な、animationつきドロップダウンメニューが出来ました。

[img-link url=”https://webshufu.com/sample/2034.html” title=”多階層の入れ子にも対応可能な、animationつきドロップダウンメニューのデモページ(スマホではデモされません)”]

コードも若干小奇麗になりました。

以下、淡々とコードを紹介します。

メインナビゲーション部分のHTMLソース

<div class="menu-bar-container">
    <ul id="menu-bar" class="nav-menu">
        <li id="menu-item-735" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-735"><a href="https://webshufu.com/wordpress/">WordPress</a>
        <ul class="sub-menu">
            <li id="menu-item-738" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-738"><a href="https://webshufu.com/wordpress/beginner/">初心者向け入門講座</a></li>
            <li id="menu-item-2021" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2021"><a href="https://webshufu.com/wordpress/wordpress-seo/">WordPress SEO</a></li>
            <li id="menu-item-731" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-731"><a href="https://webshufu.com/web-tool/">Web</a>
                <ul class="sub-menu">
                    <li id="menu-item-2031" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2031"><a href="https://webshufu.com/web-tool/chrome-extention/">Chrome拡張</a></li>
                    <li id="menu-item-1046" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1046"><a href="https://webshufu.com/marketing/">Marketing</a>
                        <ul class="sub-menu">
                            <li id="menu-item-734" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-734"><a href="https://webshufu.com/marketing/seo/">SEO</a></li>
                            <li id="menu-item-975" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-975"><a href="https://webshufu.com/marketing/sns/">SNS</a></li>
                            <li id="menu-item-730" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-730"><a href="https://webshufu.com/marketing/blog/">ブログ運営</a></li>
                        </ul>
                    </li>
                    <li id="menu-item-2003" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2003"><a href="https://webshufu.com/news/">その他</a>
                        <ul class="sub-menu">
                            <li id="menu-item-2006" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2006"><a href="https://webshufu.com/news/habit/">習慣化</a></li>
                            <li id="menu-item-2004" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2004"><a href="https://webshufu.com/news/cute/">かわいい</a></li>
                            <li id="menu-item-2005" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2005"><a href="https://webshufu.com/news/revising-the-constitution/">憲法改正</a></li>
                            <li id="menu-item-2000" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2000"><a href="https://webshufu.com/health/">健康</a>
                                <ul class="sub-menu">
                                    <li id="menu-item-2001" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="https://webshufu.com/health/weight-loss/">ダイエット</a></li>
                                    <li id="menu-item-2002" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2002"><a href="https://webshufu.com/health/recipe/">低糖質レシピ</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li id="menu-item-2032" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2032"><a href="https://webshufu.com/web-tool/web-site/">WEBサービス</a></li>
                    <li id="menu-item-732" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-732"><a href="https://webshufu.com/web-tool/css/">CSS</a></li>
                    <li id="menu-item-1830" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1830"><a href="https://webshufu.com/web-tool/jquery/">jQuery</a></li>
                </ul>
            </li>
            <li id="menu-item-739" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-739"><a href="https://webshufu.com/wordpress/plug-in/">プラグイン</a></li>
            <li id="menu-item-2023" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2023"><a href="https://webshufu.com/wordpress/wordpress-admin-edit/">管理編集画面</a></li>
            <li id="menu-item-2024" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2024"><a href="https://webshufu.com/wordpress/wordpress-function/">関数テンプレートタグ</a></li>
        </ul>
        </li>
    </ul>
</div>

CSSソース

.menu-bar-container ul.nav-menu{
    border-bottom: 0px solid #ededed;
    border-top: 0px solid #ededed;
    display: inline-block !important;
    text-align: left;
    width: 100%;
    background:#000000;
}
.menu-bar-container li a,
.menu-bar-container li{
    display: inline-block;
    text-decoration: none;
    font-size:21px;
    font-size:1.5rem;
}
.menu-bar-container li a{
    border-bottom: 0px solid #ffffff;
    color: #ffffff;
    text-transform: none;
    background:#000000;
    line-height: 1.2;
    padding: 10.5px;
    padding: 0.75rem;
}

.menu-bar-container li a:hover {
    background: #00a48c;
    opacity:1;
}
.menu-bar-container li {
    margin: 0 ;
    position: relative;
}

.menu-bar-container ul li ul {
    border-left: 0;
    display: none;
    margin:0;
    position: absolute;
    top: 100%;
    z-index: 2;
}

.menu-bar-container ul li ul li ul{
    border-left: 0;
    display: none;
    margin:0;
    position: absolute;
    top: 0;
    left:100%;
    z-index: 2;
}

.menu-bar-container li ul li a {
    /***background: #00a48c;
    color:#ffffff;***/
    border-top: 1px solid #ffffff;
    display: block;
    font-size: 12.6px;
    font-size: 0.9rem;
    line-height: 1.2;
    padding: 10.5px;
    padding: 0.75rem;
    width: 154px;
    width: 11rem;
}

jquery.menuSlideUpDown.jsの作成

以下の内容でjquery.menuSlideUpDown.jsファイルを作り、ドメイン直下のjsフォルダの直下に置きました。

$(function(){
$("#menu-bar li").hover(function(){
        $("> ul:not(:animated)" , this).animate({
            height : "toggle",
            opacity : "toggle"
        }, 500 );
    },
    function(){
        $("> ul" , this).fadeOut("slow");
    });
});

jsファイルへのリンク

</body>直前に以下を挿入。

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script type='text/javascript' src='https://webshufu.com/js/jquery.menuSlideUpDown.js'></script>

※その後、テーマファイルのfunction.phpにてwp_enqueue_script関数を使って、リンクを設定し直しました。

前より進歩

前回よりは数倍ましなドロップダウンメニューになったと思います。

最後になりましたが、下記ページにはとてもお世話になりました。

[img-link url=”http://web-park.org/javascript/dropdown091229.html” title=”jQueryで作るanimateを使ったドロップダウンメニュー | WEB-PARK.ORG | サイト制作に使用した自作jQueryコードのご紹介”]