トグルメニュー

メニューモジュールはベータ版になりました!

公開: 2015-08-04

ビーバービルダー製品が 25% オフ!セールは終了です...もっと詳しく!

new-menu-module
  • ビーバービルダー

メニューモジュールはベータ版になりました!

更新: メニュー モジュールはバージョン 1.6.2 で利用できるようになりました。

本日、過去 2 週間ベータ版であった新しい投稿モジュールと、新しいメニュー モジュールのベータ版を正式にリリースしました。まだお持ちでない場合は、アカウントにアクセスして最新のベータ版をダウンロードし、メニュー モジュールを試してください。

充実したカスタムメニュー

組み込みのカスタム メニュー ウィジェットと同様に、メニュー モジュールを使用すると、[外観] > [メニュー] で作成されたメニューの 1 つを選択してレイアウトに挿入できます。 Menu モジュールを使用すると、メニューのレイアウト、スタイル、応答性の高い表示のオプションを使用してさらに多くのことができるため、類似点はそこにとどまります。

複数のメニューレイアウト

Menu モジュールには、メニュー用の 4 つの異なるレイアウト オプションがパックされています。これらのオプションには以下が含まれます…

  • 水平– ほとんどのテーマにあるものと似た標準的な水平レイアウト。このレイアウトはドロップダウン サブメニューもサポートしています。
  • 垂直– メニューの左側または右側にフライアウトするサブメニューをサポートする垂直レイアウト。
  • アコーディオン– トグル アイコンをクリックするとサブメニューがインラインで表示される垂直アコーディオン レイアウト。
  • 展開– 最上位のメニュー項目とサブメニュー項目が順序なしリスト スタイル形式で表示されるという点でカスタム メニュー ウィジェットに似たレイアウト。

すべてをスタイルする

メニュー モジュールには、さまざまな独自のメニュー デザインを作成できるいくつかのスタイル オプションもパックされています。これらのオプションには、テキストの色、フォント サイズ、背景色、メニュー全体の配置などのスタイルが含まれます。利用可能なオプションをすべて確認するには、メニュー モジュール設定の [スタイル] タブを必ずチェックしてください。

モバイルでも快適に動作

メニュー モジュールでは、強力なカスタム メニューを作成できることに加えて、モバイル デバイスなどの小さな画面サイズでも見栄えがよくなります。 「全般」タブの下に「モバイル スタイル」というオプションがあり、小さい画面サイズでメニューがどのように見えるかをカスタマイズできます。これらのオプションには以下が含まれます…

  • 展開– メニューは折りたたまれず、すべてのメニュー項目が順序なしリスト スタイル形式で表示されます。
  • ハンバーガー アイコン– メニューが折りたたまれ、ハンバーガー アイコンの切り替えボタンが表示されます。
  • ハンバーガー アイコン + ラベル– メニューが折りたたまれ、ハンバーガー アイコンの切り替えボタンがメニュー ラベルとともに表示されます。
  • メニュー ボタン– Beaver Builder テーマの動作と同様に、このオプションでは全幅のメニュー ボタンが表示されます。

これはいつ公開されますか?

前回の投稿で述べたように、ベータ期間は大きな問題が発生しない限り約 2 週間続きます。すべてが計画通りに進めば、Menu モジュールは 8 月 17 日の週に正式にリリースされるはずです。

次は何ですか?

標準およびグローバルの行/モジュール テンプレートが現在チーム内部でテスト中であることを発表できることを嬉しく思います。すべてがうまくいけば、来週にはプライベート ベータ版をリリースし、再来週にはパブリック ベータ版をリリースしたいと考えています。行/モジュール テンプレートに加えて、カラー プリセットを保存できる新しいカラー ピッカーの実装や、Genesis サポートを Beaver Builder に追加するためのソリューションの検討も開始しました。

ご意見をお聞かせください。

いつものように、フロアはあなたにお任せします。新しいメニュー モジュールについてのご意見、改善方法についてフィードバックがある場合、または問題が発生した場合は、下のコメント欄で遠慮なくお知らせください。

次回まで、楽しい建築を!

ジャスティン・ブサの略歴

47件のコメント

  1. ベン、2015 年 8 月 3 日午後 5 時 39 分

    とてもクールですよ!よくやった。

    これを書きながらメニューモジュールをいじってみます。ここまでは順調ですね!期待通りに動作します。

    リリースサイクルを愛しています。



    • ジャスティン・ブサ、2015 年 8 月 4 日午前 8 時 45 分

      ありがとう、ベン!気に入っていただけて嬉しいです。



  2. ケティル、2015 年 8 月 4 日、午前 6 時 16 分

    こんにちは
    いい仕事だ!新しい機能が着実に登場します。
    新しいベータ メニュー モジュールを試してみたところ、リストとして表示されるべきですか、それともドロップダウン メニューとして表示されるべきですか?今のところ、展開された (マルチレベルの) 順序なしリストが得られます。それが目標ではないでしょうか…?
    また、私が作成したメニューの中から1つだけを選択することもできます。
    これは私がここで使用しているテーマ (Bridge – 少し…敏感でした) が原因である可能性があると思いましたが、TwentyFifteen に切り替えても何も変わりませんでした (まあ、見た目は別として…;o)
    これが奇妙に思われ、ログインして見てみたい場合は、お知らせください。そしてこれからも頑張ってください!
    Kj



    • ジャスティン・ブサ、2015 年 8 月 4 日午前 8 時 50 分

      こんにちは、キジェティルさん

      投稿していただきありがとうございます!メニューは、選択したレイアウトに基づいてさまざまな方法で表示できます。ただし、ここで問題が発生する可能性があるように思えます。ログインして見てみたいので、フォーラムに投稿していただけませんか?

      ジャスティン



      • ケティル、2015 年 8 月 4 日、午前 9 時 14 分

        します!
        ちなみに、面白いメニューは次のとおりです: http://www.dolcevita.no/demo1/gardasjoen-sykkeltur/
        Kj



        • redsnappertrading 、2016 年 4 月 11 日、午前 3 時 50 分

          こんにちは、初心者 bb ビルダー、素晴らしい仕事です。ページがフッター上にスライドする効果をどのようにして実現したか教えていただけますか



  3. カルロス、2015 年 8 月 4 日午前 6 時 55 分

    みなさん、こんにちは!

    これは素晴らしい追加です。すでにそれで遊んでいます。バグを見つけたと思います。

    を中心としたメニューを作成しました。メニュー項目のみ背景が表示されます。次に、モバイル機能を表示するためにウィンドウのサイズを変更し、サイズを元に戻すと、バグが表示されます。メニューは中央ではなくなり、背景が行の幅全体に表示されます。私は Chrome を使用しています。リンクは次のとおりです: http://miracomoes.com/chia/

    これがお役に立てば幸いです!



    • ジャスティン・ブサ、2015 年 8 月 4 日、午前 8 時 52 分

      ありがとう、カルロス!それは確かにバグです。これはリリースされる前に修正される予定です。



  4. ゼノフォーム、2015年8月4日午後12時03分

    Dynamik Website Builder を使用している場合、これはどのように機能しますか?



    • ジャスティン・ブサ、2015年8月4日午後12時08分

      ゼノフォルムさん、こんにちは。

      問題なく動作するはずですが、問題が発生した場合はフォーラムでお知らせください。確認させていただきます。

      ありがとう、
      ジャスティン



  5. 学部長、2015年8月4日午後10時59分

    こんにちは、皆さん、製品への素晴らしい追加です。

    すべてのレベル 1 項目の短い名前 (例: MENU1、MENU2) を持つコンサーティーナ メニューを作成すると、レベル 2 項目には少し長い名前 (例: MENU1、MENU2) が付けられます。 MENU1.1、MENU1.2 など、レベル 1 項目が選択されるとナビゲーション構造全体が広がります。幅を制御するためのスタイル オプションは優れたオプションです。

    ありがとう、ディーン



    • ジャスティン・ブサ、2015 年 8 月 5 日午前 8 時 40 分

      ディーン、どのようなレイアウト スタイルを使用しているか教えていただけますか?



      • 学部長、2015年8月5日午後11時14分

        こんにちは、ジャスティン

        申し訳ありません、用語が間違っています。レイアウトはアコーディオンです

        ここに、私が言及している内容のスクリーンショットを含むスライドへのリンクがあります。

        https://docs.google.com/presentation/d/1t2wbUEvhf4SAWNk3W5ASLZjuEExXpcWOcRYrykTV56o/edit?usp=sharing

        ありがとう、ディーン



  6. ジャスティン・ブサ、2015 年 8 月 6 日午前 9 時 27 分

    ありがとう、ディーン!バグレポートを提出し、修正させていただきます。



  7. エドワード、2015 年 8 月 7 日午前 12:08

    私が思う別のバグ – 下部を -5 に設定するか、上部と同じようにフラッシュするために、リンクの背景のホバー カラーの下に下部に 5 ピクセルの余分なスペースを設ける必要があります。良さそうです。

    まだ作業中の場合は、このような太いメニューを作成できるように、メニューの高さのサイズを設定する方法を追加していただけますか。リンク間隔はありますが、メニューの高さ/サイズはありません。設定を 1 つ行うだけでこれを行うことができます。

    http://destinvacationguide.com/testtwo/

    そして可能であればGoogleフォントを使用する方法。



    • ジャスティン・ブサ、2015 年 8 月 7 日午前 8 時 46 分

      報告してくれてありがとう、エドワード! 5px 間隔の問題を再現できませんでした。たぶんそれはテーマの問題ですか?

      間隔と高さの問題には意味があります。それについて報告書を提出します。今年後半には、ビルダーの Google フォント設定にも取り組む予定なので、それをメニュー モジュールに実装できるようになります。



  8. エドワード、2015 年 8 月 7 日午前 12:18

    古いトップメニューを削除するにはどうすればよいですか? 「メニューを選択してください、それとも 1 つを選択するとトップメニューが 2 つ表示されます?」というメッセージが表示され続けます。
    ありがとう



    • ジャスティン・ブサ、2015 年 8 月 7 日午前 8 時 50 分

      これを行うには、カスタマイザーで [ヘッダー] > [ヘッダー レイアウト] を [なし] に設定して、ヘッダーを非表示にする必要があります。



  9. エドワード、2015 年 8 月 7 日午前 12:32

    OK、もう 1 つ質問します。この新しいメニューを上部のすべてのページのデフォルト メニューにする方法はありますか。私が作成したページでのみ機能しますか?



    • ジャスティン・ブサ、2015 年 8 月 7 日、午前 8 時 52 分

      今後数週間以内に「グローバル」行を保存する機能をリリースする予定です。これがリリースされたら、同じ行をすべてのページにドロップして、1 か所で編集できるようになります。残念ながら、現時点ではそれ以外に方法はありません。



  10. ケティル、2015 年 8 月 7 日、午前 7 時 44 分

    こんにちは
    メニュー セレクター (メニュー モジュール内) について: セレクターが機能しないと前述しました。まあ、そうです。メニューを 2 つ作成して 1 つだけが表示されたのですが、どういうわけか 2 つ目のメニューの内容がすべて消えてしまいました。つまり、空のメニューを選択することはできませんが、それは問題ないと思います…
    あなたに知ってほしかっただけです:o)
    ケティル



    • ジャスティン・ブサ、2015 年 8 月 7 日午前 8 時 53 分

      ああ、よく釣れました!空のメニュー用のロジックを追加します。



  11. Ignitermr 、2015 年 8 月 8 日、午前 10 時 40 分

    素晴らしい。メニューで作業しているときに、メニューの見出しが透明になるようにアルファ チャネルを制御する設定を追加することを検討していただけますか (私の言っていることが正しいかどうかわかりませんが、意味がわかりますか?)。ヘッダーナビゲーションを透明にしたいと思っています。それは工事中ですか?ありがとう。



    • ジャスティン・ブサ、2015 年 8 月 10 日午前 9 時 29 分

      フィードバックありがとうございます!ただし、まだフォローしているかどうかはわかりません。テキストの不透明度設定またはメニューの背景を求めていますか?



      • ブライアンプラント、2015 年 8 月 10 日、午前 11 時 19 分

        メニューのナビゲーション背景。画像が透けて表示されます。このように: http://screencast.com/t/2zZJEjPqmMpl



        • ジャスティン・ブサ、2015年8月10日午前11時53分

          ありがとう、ブライアン!それを実装する方法を見てみましょう。



  12. ナタリア・ブラント、2015 年 8 月 11 日、午後 3 時 44 分

    メニューのどのレベルを表示するかを選択するオプションがあれば良いと思います。たとえば、サブメニュー (第 2 レベルのページ) のみを表示したい場合、そのオプションはありますか?



    • ロビー・マッカラー、2015年8月11日午後3時58分

      こんにちは、ナタリア。ご提案ありがとうございます。これをプラグインに含めるかどうかはわかりません。ただし、機能リクエストとして自由に追加してください。

      https://wpbeaverbuilder.uservoice.com/forums/270594-general

      また、WordPress 管理エリアに 2 つのメニューを作成して実験することもできます。 1 つはトップレベルのナビゲーション用で、もう 1 つは第 2 レベルのナビゲーション用です。その後、ページで第 2 レベルのメニューを使用できます。それはうまくいくかもしれないと思いますか?



      • ナタリア・ブラント、2015年8月25日午後12時19分

        ジェネシス使ってます。あなたが提案しているものは、Genesis Subpages をセカンダリメニュープラグインとして使用できるかどうか疑問に思います。このアイデアは、子ページを表示するために 2 番目のメニューを動的に生成することです。



  13. デビッド、2015 年 8 月 17 日、午後 4 時 8 分

    素晴らしい!私はベータ版で遊んでいますが、行/モジュールテンプレートはまさに私が現在のプロジェクトで探していたものです

    よろしくお願いします!
    デビッド



    • ジャスティン・ブサ、2015年8月17日午後5時12分

      それは嬉しいですね、デビッド!ご意見がございましたらお知らせください。



  14. m33、2015年 8 月 21 日、午後 5:02

    何かが足りないのでしょうか?私のアカウントのダウンロードのどこにもメニュー モジュールが表示されません。代理店向けの最新ベータ版も試してみましたが、ページビルダーにモジュールがまったく表示されません。



    • ジャスティン・ブサ、2015年8月24日午前10時39分

      実はMenuモジュールは先週リリースされました。もう1.6.2にアップデートしましたか?



      • m33、2015年 8 月 24 日、午前 11 時 14 分

        私は 1.6.3 (ベータ版) を使用していますが、まったく表示されません。選択範囲は「マップ」から「投稿」に移動するだけです。マップモジュールの後に表示されると思います。



        • ジャスティン・ブサ、2015年8月24日午前11時43分

          ログインして見てみたいので、フォーラムに投稿していただけますか?



  15. ニック、2015 年 8 月 25 日午後 8 時 13 分

    こんにちは – 素晴らしい追加ですが、デスクトップ/すべての画面でレスポンシブ バーガー メニューを有効にするオプションを追加していただけますか?最近よくあるデザインのご依頼です!
    ありがとう



    • ジャスティン・ブサ、2015 年 8 月 26 日、午前 8 時 30 分

      ありがとう、ニック!それは興味深い提案ですね。将来の更新のために記録が残るように、UserVoice ページに自由に追加してください… https://wpbeaverbuilder.uservoice.com/forums/270594-general



  16. ビル・ルス、2015年10月14日午後12時55分

    メニュー モジュールを使用してサイトのメニューを作成した場合、それをすべてのページ/投稿に表示する方法はありますか?メニューを含むグローバル行を作成し、それを各ページに手動で追加することはできますが、投稿/カテゴリページなどに追加する方法はないようです。



    • ロビー・マッカラー、2015年10月14日午後2時03分

      こんにちは、ビル。現在はありません。これは私たちがいつか実現したいと考えている機能ですが、まだアイデア段階にあります。

      技術的には、Insert Pages というプラグインを使用する回避策でこれを行うことができます。ちょっと高度なテクニックになりますが。基本的には、メニューのページを作成し、Insert Pages プラグインを使用してそのメニュー/ページを PHP テンプレートに含めることができます。

      ご希望の場合は、お問い合わせページからメールをお送りください。まだ恐怖を感じていない方には、喜んで詳しく説明させていただきます。



  17. リチャード、2015 年 11 月 25 日、午前 5 時 14 分

    アコーディオンスタイルのメニューの場合、子を持つメニューリンクを何らかの形で言うオプションがあると良いと思います。

    1. クリック時にページを表示
    2. ページを表示せず、レベルのみを展開します

    このようにして、ユーザーが十字を正確にクリックすることに依存しないアコーディアンを作成できます。私の意見では、これは必ずしも直感的ではありません。これに加えて、展開アイコンを持たないオプションもあります。

    もう 1 つの優れたオプションは、現在のページに基づいてアコーディアン メニューを自動展開することです。



  18. ジョン、2016 年 6 月 20 日午後 12 時 25 分

    こんにちは、
    メニューモジュールを使って作業しています。レイアウトの幅全体に広げることができないようです。 [一般レイアウト] オプションを [水平] に設定し、[スタイル] メニューの配置オプションを [中央] に設定すると、メニューはレイアウトの中央に配置されますが、メニューバー (色付き) の幅はテキストの範囲にしか広がりません。メニューの配置をデフォルトに設定すると、メニューバーは全幅に拡張されますが、テキストは左揃えになります。手伝ってもらえますか?
    ありがとう、ジョン



  19. バリー、2016 年 9 月 23 日、午前 11 時 43 分

    このモジュールは素晴らしいですが、なぜページタイトルではなくメニューモジュールを使用してこれを取得するのか知っている人はいますか? : #26 (タイトルなし)



    • ジャスティン・ブサ、2016年9月23日午後5時38分

      こんにちは、バリー、見てみたいのでチケットを撮影してもらえますか?ありがとう!



  20. robhall007、2016年 11 月 1 日、午前 8 時 14 分

    メニューモジュールの場合…ドロップダウンメニューに滑らかなCSSの流動性を持たせる方法はありますか?ただ現れているようです。スライドダウンまたはフェードインしたいのですが、これを実現する方法はありますか?



    • ロビー・マッカラー、2016 年 11 月 1 日午前 10 時 1 分

      やあ、ロブ。これはおそらく CSS トランジションを使用すれば可能でしょう。私はそこでいくつかの研究を始めます。これも潜在的な機能として念頭に置いておきます。コメントありがとうございます。



  21. ルーク、2016 年 11 月 6 日、午後 3 時 54 分

    ハンバーガーのアイコンを変更する方法はありますか?ラベルを「メニュー」から「その他」のようなものに変更する方法はありますか

    食品を販売するサイトで作業している場合、「メニュー」という言葉を聞くと、そこに食品のメニューがあると信じ込まれてしまう可能性があります。



    • ロビー・マッカラー、2016年11月8日午前9時27分

      おい、ルーク!コア モジュールのいずれかをオーバーライドして、好みに合わせて微調整することができます。この記事には、それに関する詳細情報が記載されています。

      http://kb.wpbeaverbuilder.com/article/124-custom-module-developer-guide



私たちのニュースレター

私たちのニュースレターは個人的に作成され、月に 1 回程度送信されます。迷惑な行為やスパム行為はまったくありません。
約束します。

ニュースレターに参加する

今すぐ Beaver Builder を試してみましょう

Beaver Builder