デフォルト

Odoo は、インストールしたアプリに応じて、いくつかの基本的なメニュー項目を自動的に生成します。 たとえば、ウェブサイトアプリはメインメニューに2つの項目を追加します。これらの項目はページにリンクされ、自動的に作成されます。

デフォルトのメニュー項目を削除します。

/website_airproof/data/menu.xml
<!-- Contact us -->
<delete model="website.menu" search="[('url','in', ['/', '/contactus']),
('website_id', '=', 1)]"/>

<!-- Shop -->
<delete model="website.menu" search="[('url','in', ['/', '/shop']),
('website_id', '=', 1)]"/>

新しいウィンドウ

新しいタブでリンクの URL を開きます。

<record id="..." model="website.menu">
    <field name="new_window" eval="True"/>
</record>

アンカー

ページの特定のセクションにリンクします。

<record id="..." model="website.menu">
    <field name="url">/about-us#our-team</field>
</record>

Mega メニュー

メガメニューは、単なるリンクのリストではなく、追加の可能性を持つドロップダウンメニューです。 メガメニューでは、任意の種類のコンテンツ(テキスト、画像、アイコンなど)を使用できます。

Odooでは、リストからメガメニューのテンプレートを選択できます。 カスタムレイアウトが必要ない場合は、mega_menu_content フィールドのテンプレート構造を静的なコンテンツと同様に再利用できます。

宣言

/website_airproof/data/menu.xml
 <record id="menu_mega_menu" model="website.menu">
     <field name="name">Mega Menu</field>
     <field name="parent_id" search="[
         ('url', '=', '/default-main-menu'),
         ('website_id', '=', 1)]"/>
     <field name="website_id">1</field>
     <field name="sequence" type="int">..</field>
     <field name="is_mega_menu" eval="True"/>
     <field name="mega_menu_classes">...</field>
     <field name="mega_menu_content" type="html">
         <section class="s_mega_menu_multi_menus py-4 o_colored_level o_cc o_cc1">
             <div class="container">
                 <div class="row">
                     <div class="col-12 col-sm py-2 text-center">
                         <h4 class="o_default_snippet_text">First Menu</h4>
                         <nav class="nav flex-column">
                             <a href="#" class="nav-link o_default_snippet_text" data-name="Menu Item">Menu Item 1</a>
                             <a href="#" class="nav-link o_default_snippet_text" data-name="Menu Item">Menu Item 2</a>
                             <a href="#" class="nav-link o_default_snippet_text" data-name="Menu Item">Menu Item 3</a>
                         </nav>
                     </div>
                     <div class="col-12 col-sm py-2 text-center">
                         <h4 class="o_default_snippet_text">Second Menu</h4>
                         <nav class="nav flex-column">
                             <a href="#" class="nav-link o_default_snippet_text" data-name="Menu Item">Menu Item 1</a>
                             <a href="#" class="nav-link o_default_snippet_text" data-name="Menu Item">Menu Item 2</a>
                             <a href="#" class="nav-link o_default_snippet_text" data-name="Menu Item">Menu Item 3</a>
                         </nav>
                     </div>
                     <div class="col-12 col-sm py-2 text-center">
                         <h4 class="o_default_snippet_text">Third Menu</h4>
                         <nav class="nav flex-column">
                             <a href="#" class="nav-link o_default_snippet_text" data-name="Menu Item">Menu Item 1</a>
                             <a href="#" class="nav-link o_default_snippet_text" data-name="Menu Item">Menu Item 2</a>
                             <a href="#" class="nav-link o_default_snippet_text" data-name="Menu Item">Menu Item 3</a>
                         </nav>
                     </div>
                     <div class="col-12 col-sm py-2 text-center">
                         <h4 class="o_default_snippet_text">Last Menu</h4>
                         <nav class="nav flex-column">
                             <a href="#" class="nav-link o_default_snippet_text" data-name="Menu Item">Menu Item 1</a>
                             <a href="#" class="nav-link o_default_snippet_text" data-name="Menu Item">Menu Item 2</a>
                             <a href="#" class="nav-link o_default_snippet_text" data-name="Menu Item">Menu Item 3</a>
                         </nav>
                     </div>
                 </div>
             </div>
         </section>
     </field>
 </record>

フィールド

説明

is_mega_menu

メガメニュー機能を有効にします。

mega_menu_classes

メイン要素に追加するカスタムクラス

mega_menu_content

メガメニューの既定の内容

その他にも、カスタムテンプレートを使って視覚的により高度なものを作成する必要があります。 標準テンプレート が、Odoo ソースコードにどのように組み込まれているかを自由に確認してください。

カスタムテンプレート

独自のテンプレートを作成し、リストに追加します。

レイアウト

/website_airproof/views/website_templates.xml
<template id="s_mega_menu_airproof" name="Airproof" groups="base.group_user">
    <section class="s_mega_menu_airproof o_cc o_cc1 pt40">
        <!-- Content -->
    </section>
</template>

Option

次のコードを使用して、ウェブサイトビルダーで新しいカスタムメガメニューのオプションを追加します。

/website_airproof/views/snippets/options.xml
<template id="snippet_options" inherit_id="website.snippet_options" name="Airproof - Mega Menu Options">
    <xpath expr="//*[@data-name='mega_menu_template_opt']/*" position="before">
        <t t-set="_label">Airproof</t>
        <we-button t-att-data-select-label="_label"
            data-select-template="website_airproof.s_mega_menu_airproof"
            data-img="/website_airproof/static/src/img/builder/header_opt.svg"
            t-out="_label"/>
    </xpath>
</template>