Mặc định

Odoo tự động tạo ra một số mục menu cơ bản tùy theo các app bạn đã cài đặt. Ví dụ, app Website thêm hai mục vào menu chính. Các mục này được liên kết với các trang, cũng được tạo tự động.

Xóa các mục menu mặc định.

/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)]"/>

Cửa sổ mới

Mở URL của liên kết trong một tab mới.

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

Neo (Anchor)

Liên kết đến một phần cụ thể của trang.

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

Mega menu

Một mega menu là một menu thả xuống với nhiều khả năng bổ sung chứ không chỉ là một danh sách liên kết. Trong một mega menu, bạn có thể sử dụng bất kỳ loại nội dung nào (văn bản, hình ảnh, icon, ...).

Trong Odoo, bạn có thể chọn một template mega menu trong danh sách. Nếu bạn không cần một layout tùy chỉnh, bạn có thể tái sử dụng cấu trúc template trong field mega_menu_content giống như bất kỳ nội dung tĩnh nào.

Khai báo

/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>

Field

Mô tả

is_mega_menu

Bật tính năng mega menu.

mega_menu_classes

Các class tùy chỉnh cần thêm vào thành phần chính

mega_menu_content

Nội dung mặc định của mega menu

Bên cạnh đó, bạn có thể cần tạo ra thứ gì đó tinh vi hơn về mặt hình ảnh bằng một template tùy chỉnh. Đừng ngần ngại xem cách các standard templates được xây dựng trong mã nguồn của Odoo.

Template tùy chỉnh

Tạo template riêng của bạn và thêm nó vào danh sách.

Layout

/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>

Tùy chọn

Sử dụng đoạn code sau để thêm một tùy chọn cho mega menu tùy chỉnh mới của bạn trên Website Builder.

/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>