ウェブサイトのメニューをデザインする方法

このガイドでは、メニューのデザイン (メニューの外観と動作) に焦点を当てます。Web サイトのメニューをデザインする方法、Web サイトのすべてのページに表示する方法、または特定の Web ページのナビゲーション メニューを作成する方法を学習する場合は、別のガイドを読むことをお勧めします。

それがどのように見えるか:
このようなメニューは、Webサイトの訪問者がコンテンツから気を散らさないようにページの上部に固定されており、ページ上の特定の場所に固定されているため、必要に応じて簡単に見つけることができます。

設定方法:

ME301ブロックをページに追加し、次の設定を適用します。

メニューの位置→動作の主な設定: 絶対。
メニューの背景→ メニューの背景の不透明度: 0%。

それがどのように見えるか:
このようなメニューは常にページに表示され、ページ上のどこからでも簡単にアクセスできます。通常、ページの上部(表紙)に透明な背景があり、スクロールすると不透明になります。

設定方法:

ME301ブロックをページに追加し、次の設定を適用します。

メニューの位置→動作の主な設定: スクロールで修正されました。
メニューの背景 → メニューの背景色。色をピックします。
メニューの背景→ メニューの背景の不透明度: 0%。
メニューの背景→スクロール時のメニューの背景の不透明度: 80%。

それがどのように見えるか:
このメニューは上記のメニューと似ています。違うのは、スクロールに表示され、さらに多くのアイテムを備えた別のメニューです。たとえば、上部のナビゲーションメニューには、ロゴ、さまざまなWebサイトページにつながるいくつかのメニュー項目、およびいくつかのソーシャルメディアリンクが含まれています。ユーザーがページをスクロールすると、ロゴ、行動喚起、コールバックボタンを備えた別のメニューバーが表示されます。

設定方法:
ME301ブロックをページに追加し、次の設定を適用します。

メニュー 1 (ページ上部にあります)
メニュー位置の動作→主な設定:絶対。
メニューの背景→ メニューの背景の不透明度:0%。

メニュー2(スクロールに表示される)
メニュー位置の動作→主な設定:スクロール時に修正されました。
ページ→ピクセル単位で下にスクロールしたときの[表示]メニューの主な設定:600px。
メニューの背景 → メニューの背景色。色を選択します。
メニューの背景→ メニューの背景の不透明度:70%。

それがどのように見えるか:
ハンバーガーメニューは、画面上部の3本の水平線です。ユーザーがクリックすると、ナビゲーション メニューが表示されます。

あなたがそれを使うことができるもの:
このようなメニューは、訪問者が他のデザイン要素に気を取られることなくコンテンツに集中したい場合に、Webサイトに最適です。ハンバーガーメニューは通常、モバイル版のWebサイトで使用されます。さまざまなデバイスでメニューを表示する方法を設定できます。

たとえば、通常のメニューをデスクトップバージョンのWebサイトにのみ表示し、ハンバーガーメニューをモバイルデバイスでのみ表示するようにすることができます。

設定方法:
ME401/402/403/404/405ブロックをページに追加し、メニュー位置の動作、メニューアイコンの色、およびメニュー項目のテキストの色を設定します。

たとえば、次の設定を適用できます。
メニューの位置→動作の主な設定: スクロールで修正されました。
メニュー項目 → 色。黒を選びます 。
メニューの背景 → 折りたたまれたメニューの背景色。透明にします。
メニューの背景 → メニューの背景色が拡張されました。白を選びます。

それはどのようなものか：
メニュー項目をクリックすると、ドロップダウン メニューが表示されます。

用途:
高度な構造を持つ大規模な Web サイト。

設定方法:
ME301ブロックをページに追加し、上記と同様のメニューを設定してから、ブロックのコンテンツパネルにサブアイテムを追加します。

1. ブロックのコンテンツパネルを開き→メニュー項目→サブ項目を追加します。
2. アイテムの横にあるプラスアイコンをクリックし、サブアイテムのタイトルを入力して、リンクを割り当てます。必要なサブ項目がすべて追加されるまで繰り返します。
3. ブロックの[設定]パネルを開き→サブメニュー[設定]を開きます。「第 2 レベルのメニューアイコンを表示」チェックボックスを選択します。

メインメニュー項目自体はクリックできませんのでご注意ください。クリック可能にする場合は、ドロップダウンメニューで複製サブアイテムを作成します。

それはどのようなものか：
アクティブなタブを使用すると、ユーザーは Web ページから離れることなく、タブにリンクされているコンテンツを参照できます。

用途:
タブを使用すると、ポートフォリオ内の作品の異なるカテゴリなど、同じ種類のコンテンツの複数のカテゴリを表示できます。

設定方法:
ME602 または ME603 ブロックをページに追加します。これらのブロックを使用してタブを作成し、ユーザーが同じページ内のタブをクリックしたときにコンテンツを表示できます。以下では、ユーザーが特定のタブをクリックしたときに変化するブロックを順番に追加する必要があります。

使い方:
1. ME602またはME603ブロックのコンテンツパネルにタブタイトルを追加します。
2.タブをクリックしたときに表示されるブロックのIDを追加します(スペースを入れずにカンマで区切ります)。

注: ブロックの [設定] パネルでブロックの ID をコピーできます—パネルの一番下までスクロールして見つけます。

それはどのようなものか：
ショッピングカート内のアイテム、お気に入りに追加されたアイテム、およびナビゲーションセクション近くのメニューに検索ウィジェットが表示されます。

用途:
そんな方に役立つメニューです製品カタログユーザーは、ショッピングカート、Webサイト検索ウィジェット、およびお気に入りを簡潔に表示します。

設定方法:
ME401ブロックを[カート、検索、お気に入り]→[コンテンツ]タブ→ページに追加→チェックボックスを選択して、メニューに必要なアイコンを表示します。

「ネイティブウィジェットボタンを表示しない」チェックボックスを選択すると、メニューにのみアイコンが表示されます。

次に、ショッピング カート ブロック ST100、検索ウィジェット ブロック T985、およびお気に入りブロック ST110 を追加し、ページを公開します。

終わり。

この機能は、ME4XX の番号が付いたすべてのメニュー ブロックで機能します。

表示オプション:
メニューにアイコンとお気に入りウィジェットボタンの両方を表示する場合は、ME401ブロックの[コンテンツ]タブで[ネイティブウィジェットボタンを表示しない]のチェックを外します。

ブロックST100ショッピングカートとT985検索のウィジェットアイコンを非表示にすることができます—ブロック設定の「詳細設定」タブで、「ウィジェットボタンを表示しない」チェックボックスを選択します。ページを公開します。

終わり！メニューには 3 つのアイコンが表示され、お気に入り用の別のウィジェットがあります。同様に、ショッピング カートまたは検索ウィジェットの可視性を構成できます。

ここでは、主要なメニュー設計オプションをいくつか紹介します。新しいアイデアがあり、それを共有したい場合は、件名に「メニュー デザイン」を入れて、Web サイトへのリンクを電子メールでTeam@tilda.ccに送信してください。ありがとう！

設計実験の成功をお祈りします。