khanh.pndc/odoo-docs
1
0
Fork 0
mirror of https://github.com/odoo/documentation.git synced 2026-01-02 09:49:17 +07:00
Code Issues Packages Projects Releases Wiki Activity

[IMP] howto/website: update navigation page

Browse Source 
This commit updates current navigation page, by adding new anchor links
to the sections and by adding updated information.

Task-4316611

closes odoo/documentation#12191

Signed-off-by: Carlos Valverde (cvs) <cvs@odoo.com>
This commit is contained in:
Carlos Valverde
2025-02-26 13:15:43 +01:00
parent 88301e22ea
commit a548d85da8
1 changed files with 74 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
content/developer/howtos/website_themes/navigation.rst
View File

@@ -10,6 +10,8 @@ In this chapter, you will learn how to:
- Create a dropdown menu.
- Create a mega menu.
.. _website_themes/navigation/default:
Default
=======
@@ -30,6 +32,8 @@ Delete default menu items.
<delete model="website.menu" search="[('url','in', ['/', '/shop']),
('website_id', '=', 1)]"/>
.. _website_themes/navigation/menu:
Menu item
=========
@@ -66,6 +70,8 @@ Menu item
* - sequence
- Defines the link's position in the top menu.
.. _website_themes/navigation/menu/new_window:
New window
----------
@@ -77,6 +83,8 @@ Open the link's URL in a new tab.
<field name="new_window" eval="True"/>
</record>
.. _website_themes/navigation/menu/external_links:
External Links
--------------
@@ -88,6 +96,8 @@ Add a link to an external website.
<field name="url">https://www.odoo.com</field>
</record>
.. _website_themes/navigation/menu/anchor:
Anchor
------
@@ -99,6 +109,8 @@ Link to a specific section of a page.
<field name="url">/about-us#our-team</field>
</record>
.. _website_themes/navigation/dropdown:
Dropdown menu
=============
@@ -138,31 +150,72 @@ Add an item to a dropdown menu.
* - parent_id
- The dropdown in which the item will be added.
.. _website_themes/navigation/mega_menu:
Mega menu
=========
A mega menu is a dropdown menu with additional possibilities and not just a list of links. In a
mega menu, you can use any kind of content (text, images, icons, ...).
In Odoo, you can select a mega-menu template in the list. If you don't need a custom layout, you
can re-use the template structure in the `mega_menu_content` field like any static content.
**Declaration**
.. code-block:: xml
:caption: ``/website_airproof/data/menu.xml``
<record id="menu_mega_menu" model="website.menu">
<field name="name">Mega Menu</field>
<field name="url">/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">
<!-- Content -->
</field>
</record>
<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>
.. list-table::
:header-rows: 1
@@ -178,6 +231,12 @@ mega menu, you can use any kind of content (text, images, icons, ...).
* - mega_menu_content
- The default content of the mega menu
Beside that, you might need to create something more visually advanced with a custom template.
Feel free to check how the `standard templates <{GITHUB_PATH}/addons/website/views/snippets/s_mega_menu_odoo_menu.xml>`_
are built in the Odoo source code.
.. _website_themes/navigation/mega_menu/custom:
Custom template
---------------
@@ -205,7 +264,7 @@ Use the following code to add an option for your new custom mega menu on the Web
<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_website_airproof.s_mega_menu_airproof"
data-select-template="website_airproof.s_mega_menu_airproof"
data-img="/website_airproof/static/src/img/builder/header_opt.svg"
t-out="_label"/>
</xpath>