クリエイターハートブログ

クリエイターハートブログはものづくりの心からおくるブログです。

【コピペでOK!】Stinger5ドロップダウンメニューをCSS+jQueryで。

   

20150222_stinger5_dropdownmenu_02

Stinger5に対するドロップダウンメニューの実装方法記事です。

先日、当ブログのWordpressテーマをStinger3からStinger5に変更しましたが、カスタムメニューを適用した場合の子階層表示がStinger3の時と同じく崩れてしまうため、CSSとJQueryにてドロップダウンメニューを実装しました。

目次

  • 目標とする実装結果
  • Stinger3→Stinger5における表示の変更点
  • やはり崩れる子階層メニュー
  • Stinger5にカスタムメニューを適用
  • ここのコードを指定の場所にコピペでOK!
  • 参考・引用資料

目標とする実装結果

コピペ用コードのみご閲覧の場合、ページ下部までおすすみください。

※ただし、必ずテスト環境で実装するorバックアップをとる等の万が一の対処はご用意ください。

当クリエイターハートブログは現在、Stinger5を使用しています。

カスタムメニューを適用し、以下にご紹介する実装を施した結果、PC表示では親メニューの下部に準ずる子メニューをドロップダウン表示し、レスポンシブレイアウトによるスマホ表示にはメニューボタンタップ時に親メニューのみをドロップダウンし、親メニューをタップすれば子メニューをドロップダウン出来るようになりました。

ただし、ここでご紹介する方法は2階層目までの子カテゴリー・固定ページには対応しておりますが、3階層目以降の表示については保証致しません。

当ブログをご閲覧のウィンドウ枠を拡大縮小して動作をご確認ください。

Stinger3→Stinger5における表示の変更点

Stinger3からStinger5に変更したことにより、大きく以下の点が異なります。

・Stinger3はPC用表示とスマホ用表示を2つのスタイルシートで行っていたため、2つのスタイルシートにそれぞれCSSを適用する必要があった。

・Stinger5はPC用表示とスマホ用表示を1つのスタイルシートで行っているレスポンシブレイアウトであるため、1つのスタイルシートを編集する。

というそれぞれの特徴があるため、当ブログの

【ご報告】【WordPress】Stinger3をドロップダウンメニューに対応させてみました。(stinger3ver20131217対応)【Stinger3】 記事の一部修正【改善】

や、

【※重要なお知らせあり】【WordPress】Stinger3をドロップダウンメニューに対応させてみました。(stinger3ver20131217対応)【Stinger3】

の記事をそのままStinger5に適用しても、ドロップダウンメニューは目標とする実装結果には至りません。

やはり崩れる子階層メニュー

子カテゴリーや子固定ページを持つカスタムメニューをStinger5にて適用した場合、下画像のようにレイアウトが崩れてしまいます。

20150222_stinger5_dropdownmenu_01

当ブログはStinger3から使用させて頂いておりますが、Stinger5でもデフォルトではカスタムメニューの子階層表示に対応していないようです。

Stinger5にカスタムメニューを適用

ここではお持ちのWordpressにStinger5を既に適用済みであり、且つカスタムメニューをこれから新規作成する段階という前提でお話します。

カスタムメニューをまだ作成されていない方は、

WordPressカスタムメニュー作成手順

をご参考に作成し、適用してください。

WordPress管理画面から、

【外観】→【メニュー】と進み、【メニューを編集】画面となった状態が以下の画像です。

20150221_stinger5_01ここでカスタムメニューを適用してください。

ここのコードを指定の場所にコピペでOK!

以下のStinger5のファイルにCSSやJQueryを記述します。

style.css の以下の部分を参照してください。

まず↑の「.acordion_tree li」の要素に次を追記します。

次に以下のコードを「.acordion_tree li a」要素の後に追記します。

次に、以下の部分を参照してください。

↑の最後に以下のコードを追記します。

最終的なstyle.cssの修正部分は以下の様になります。

style.ccsの修正は以上です。

次に「header.php」にjQueryコードを追加します。

header.phpの以下の部分を参照してください。

↑の/*ここにコードを追記します。*/の部分に以下を挿入します。

最終的なheader.phpの修正部分は以下のようになります。

以上が完了しましたら、サイトを確認してください。

PC・スマホ両方の表示でドロッップダウンメニューが実装できているかと思います。

参考・引用資料

今回の実装に当たりましてjQueryコードをそのまま参考にさせて頂きましたサイト様です。

たろろぐ 様

参考記事:スティンガーをスマホ対応ドロップダウンメニューにカスタマイズする方法(ソースコードあり)

参考にさせて頂きました、たろろぐ様、とても参考になりました。ありがとうございました。

以上でStinger5にてドロップダウンメニューを表示する実装記事は以上です。

ご不明な点等ございましたらコメントをお願いします。2、3日中にはご返事さし上げます。

おつかれさまでした。

 - Stinger , , ,







Comment

  1. ぜんばやし より:

    参考記事:スティンガーをスマホ対応ドロップダウンメニューにカスタマイズする方法(ソースコードあり)をそのまま実行すると残念ながらページレイアウト自体が崩れる為、ウェブをさまよってそちらに辿りつきました。
    まさにメニューのレイアウト崩れで悩んでいたので、記事たすかりました。ありがとうございます!

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


  関連記事

関連記事はありませんでした