默认

Odoo 根据您安装的应用程序自动生成一些基本菜单项。例如，网站应用程序向主菜单添加了两个项目。这些项目链接到页面，这些页面也是自动创建的。

删除默认菜单项。

/website_airproof/data/menu.xml
<!-- Delete: Contact us and Shop menu items -->
<delete
   model="website.menu"
   search="[('url','in', ['/contactus', '/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>

超级菜单

大型菜单是一个具有附加可能性的下拉菜单，而不仅仅是链接列表。在大型菜单中，您可以使用任何类型的内容（文本、图像、图标……）。

在 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', '=', '#'),
      ('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

要添加到主元素的自定义类

超级菜单内容

超级菜单的默认内容

除此之外，您可能需要使用自定义模板创建更具视觉效果的高级内容。请随意检查 standard templates 是如何在 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>

选项

使用以下代码在网站生成器上为新的自定义大型菜单添加选项。

/website_airproof/static/src/website_builder/mega_menu_option.xml
<?xml version="1.0" encoding="UTF-8" ?>
<templates xml:space="preserve">
   <t t-name="website_airproof.MegaMenuOption" t-inherit="website.MegaMenuOption" t-inherit-mode="extension">
      <xpath expr="//BuilderSelect[@id=&quot;'mega_menu_template_opt'&quot;]" position="inside">
         <BuilderSelectItem
            title.translate="Airproof"
            actionParam="{
               view: `website_airproof.s_mega_menu_airproof`,
               templateClass: 's_mega_menu_airproof',
            }">
            <Img class="'w-75 mx-auto my-3'" src="'/website_airproof/static/src/img/wbuilder/template-header-opt.svg'" />
         </BuilderSelectItem>
      </xpath>
   </t>
</templates>