デスクトップナビゲーションメニュー
Bootstrap のドロップダウン機能を使ったデスクトップ向けのグローバルナビゲーション。メインメニューのリンクリストをループし、サブメニュー有無に応じてドロップダウン表示を切り替える。
コード
40 行 / liquid<ul class="nav-desktop-menu nav justify-content-center">
{% for link in linklists[block.settings.main_menu].links %}
<li class="nav-item {% if link.links %}dropdown{% endif %}">
{% if link.links == blank %}
<a
class="nav-link {% if link.active %}active{% endif %}"
href="{{ link.url }}"
aria-current="{% if link.active %}page{% endif %}">
{{ link.title }}
</a>
{% else %}
<a
class="nav-link dropdown-toggle {% if link.child_active %}active{% endif %}"
href="#"
data-bs-toggle="dropdown"
data-bs-display="static"
aria-expanded="false"
role="button">
{{ link.title }}
</a>
<ul class="dropdown-menu">
{% for child_link in link.links %}
<li>
{% if child_link.title == '-' %}
<hr class="dropdown-divider">
{% else %}
<a
class="dropdown-item {% if child_link.active %}active{% endif %}"
href="{{ child_link.url }}"
aria-current="{% if child_link.active %}page{% endif %}">
{{ child_link.title }}
</a>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>出典・ライセンス
- Repository:
- https://github.com/kondasoft/ks-bootshop
- License:
- MIT
このコードは kondasoft 著作の MIT ライセンスソースです。 原本の著作権は kondasoft が保有します。日本語訳は ALSEL によるものです。
関連項目
Alpine.js統合のメニュー開閉
Alpine.js の @click ディレクティブと :class バインディングを使ったメニュー開閉コンポーネント。ボタンクリックで open 状態を切り替え、ul 要素に expanded クラスを条件付きで付与する。
ヘッダーのレイアウト構造
Web Component のカスタムエレメント `<c-header>` でラップしたヘッダー要素。Tailwind CSS のユーティリティクラスを使い、レスポンシブなパディングとフレックスボックスレイアウトを実装している。
ナビゲーションバーのロゴ
ストアのロゴをナビゲーションバーに表示し、クリックでホームページに戻るコンポーネント。ロゴ画像がない場合はストア名をテキストで表示する。
決済方法アイコン
ストアで有効な決済手段のアイコンをリスト表示するスニペット。Shopify が提供する `payment_type_svg_tag` フィルタを使い、クレジットカード・Apple Pay・Google Pay などのロゴを自動的に描画する。
グローバルナビゲーションメニュー
Shopify 管理画面の「メインメニュー」リンクリストをループし、トップレベルメニュー + 1階層のサブメニューを描画するスニペット。link.title と sub_link.title を escape フィルターでエスケープして XSS 対策を施している。
フッター
ストア共通のフッターセクション。管理画面で設定したフッターメニュー(リンクリスト)をループ表示し、著作権表記を出す。