うぃず FC2テンプレート

FC2ブログのテンプレートの配布や、コピペで簡単にカスタマイズできるような方法を紹介しています。
FC2ブログで使えるテンプレートを配布しています
2013.05.14 01:06|folder.png カスタマイズcomment.png(0)

【スマホ】ドロップダウンメニューバーを作成したい

  • このエントリーをはてなブックマークに追加

  • スマートフォンのテンプレートで、『カデゴリ』をクリックしたらその下にカテゴリ一覧がズラーっと表示されて、もう一度『カテゴリ』押したら、すっと引っ込む。

    このようなドロップダウンリストを作りたいという要望があったため、作成しました。

    現在では、『カテゴリ一覧』と『コメント一覧』を対象としています。

    それでは早速ご紹介したいと思います。



    スポンサードリンク


    まず、メニューバーを取り付けてください。
    (今回は私の使っているメニューバーを使用しています。01SP_Grayを使用してくださっている方は既に記述されていると思います。)

    HTML編集

    <!--▼上部メニュー▼-->
    <ul id="menu_bar">
    <li><a href="<%url>">HOME</a></li>
    <li><a href="<%url>?mp=326">CATEGORY</a></li>
    <li><a href="<%url>?mp=442">COMMENT</a></li>
    <li class="menu_bar_end"><a href="<%url>?pc">PC表示</a></li>
    </ul>
    <!--▲上部メニュー▲-->



    スタイルシート編集

    /*============================================================
    ●●上部メニューバー●●
    ============================================================*/
    /****************************** ▼メニューバー▼ */
    #menu_bar li.menu_bar_end a {
    border-right:none;
    }

    ul#menu_bar {
    font-size: 80%; /* 文字サイズ */
    height:30px; /* 高さ */
    background-color:#333333; /* 背景色 */
    padding-top:0px;
    margin-left:0px;
    margin-top:0px; /* 上の間隔 */
    color:#ffffff; /* リンク文字の色 */
    background-color:#333333; /* メニューボタンの背景 */
    text-decoration:none;
    border-bottom:5px solid #666666; /* 下飾り線 */
    }

    #menu_bar li {
    list-style-type:none;
    float:left;
    line-height:30px; /* 高さ */
    margin:0px;
    width:25%;
    padding:0px;
    }

    #menu_bar li a {
    height: 30px;
    display:block;
    text-align:center;
    border-right:1px solid #999999; /* 区切り線 */
    color:#ffffff; /* リンク文字の色 */
    background-color:#333333; /* メニューボタンの背景 */
    text-decoration:none;
    border-bottom:5px solid #666666; /* 下飾り線 */
    }

    #menu_bar li a:hover{
    color:#66ccff; /* 触れた時の文字色 */
    background-color:#333333; /* 触れたときの背景色 */
    text-decoration:none;
    border-bottom:5px solid #66ccff; /* 下飾り線 */
    }

    /****************************** ▲メニューバー▲ */



    メニューバーの取り付けが完了したら、次はHTMLを少し書き換えます。

    上記のHTMLに赤い部分を追加してください。
    HTML書き換え

    <!--▼上部メニュー▼-->
    <ul id="menu_bar">
    <li><a href="<%url>">HOME</a></li>
    <li id="slider_cate_bar"><a href="<%url>#cate">CATEGORY</a></li>
    <li id="slider_comm_bar"><a href="<%url>#comm">COMMENT</a></li>
    <li class="menu_bar_end"><a href="<%url>?pc">PC表示</a></li>
    </ul>
    <!--▲上部メニュー▲-->
    <!--▼ドロップダウン カテゴリ▼-->
    <nav id="slider_cate" style="display:none;">
    <ul class="plugin_list">
    <!--category-->
    <li>
    <a href="<%url>?cat=<%category_number><%tail_url>" style="color:&plugin_tcolor;">
    <%category_name>(<%category_count>)
    </a>
    </li>
    <!--/category-->
    </ul>
    </nav>
    <!--▲ドロップダウン カテゴリ▲-->
    <!--▼ドロップダウン コメント▼-->
    <nav id="slider_comm" style="display:none;">
    <ul class="plugin_list">
    <!--rcomment-->
    <li>
    <a href="<%url>?no=<%rcomment_keyno>&m2=res<%tail_url>">
    <em style="color:&plugin_tcolor;"><%rcomment_title></em><br />
    <span><%rcomment_year>年<%rcomment_month>月<%rcomment_day>日</span>
    </a>
    </li>
    <!--/rcomment-->
    </ul>
    </nav>
    <!--▲ドロップダウン コメント▲-->





    また、自分のPCでテキストファイルを用意してください。
    slider_cate.txt

    $(function() {
    var $slider_cate = $('#slider_cate');
    $('#slider_cate_bar').click(
    function() {
    $slider_cate.slideToggle('fast');
    }
    ).toggle(
    function() {
    $ad_header.css('visibility', 'hidden');
    },
    function() {
    $ad_header.css('visibility', 'visible');
    }
    );
    });


    以上の記述をしたあとに、ファイル名をslider_cate.jsにしてください。

    同様に、
    slider_comm.txt

    $(function() {
    var $slider_comm = $('#slider_comm');
    $('#slider_comm_bar').click(
    function() {
    $slider_comm.slideToggle('fast');
    }
    ).toggle(
    function() {
    $ad_header.css('visibility', 'hidden');
    },
    function() {
    $ad_header.css('visibility', 'visible');
    }
    );
    });

    テキストファイルの中に記述し、ファイル名をslider_comm.jsに変更してください。

    【ファイルアップロード】から、この2つのslider_cate.jsとslider_comm.jsファイルをアップロードしてください。

    アップロード後、2つの.jsファイルにURLが与えられます。

    <script type="text/javascript" src="slider_cate.jsファイルのURL"></script>
    <script type="text/javascript" src="slider_comm.jsファイルのURL"></script>

    この2行をHTMLの<head>~</head>内に記述してください。

    このようにすることで、ドロップダウンリストが完成すると思います。


    関連記事
    コメントの投稿












    管理者にだけ表示を許可する
    トラックバック
    この記事のトラックバックURL

    検索フォーム
    スマートフォン用テンプレート
    カスタマイズしやすいように考慮してHTMLを記しています。
    SP01_Gray
    スマートフォンテンプレートグレー
    グレーが基本色のテンプレートです。
    メインカラー :#444444
    メニューカラー:#333333
    サブカラー  :#EFEFEF
    ラインカラー :#999999
    で主に構成しています。CSSにて色指定箇所を置換すれば簡単に色替えが可能です。 お好みの色に変更して楽しんでください。

    SP01_Blue
    スマートフォンテンプレート青
    爽やかな水色が基本色のテンプレートです。
    TopNTagCloud

    フリーエリア
    メールフォーム
    何か質問等ありましたらお気軽にお問い合わせください。

    名前:
    メール:
    件名:
    本文:


    FC2ブロガー必見!

    必ず結果が出るブログ運営テクニック


    もっとカスタマイズしたい方必見!


    毎日メンテナンスするだけで・・・

    最新トラックバック
    ブロとも申請フォーム