I am looking for a solution to display the dropdown menu under its link in the navbar, the problem here is that the dropdown is too large sometimes, and it goes off screen when it is wide (img below).
The select must be displayed under each link with its arrow and not exceed the screen, i did not know how to go further in my calculations so that the select is displayed in the center if its link is also close to the center of the screen.
This is the html :
<div class="w-100">
<ul id="top_menu" role="menu" class="nav navbar-nav top_menu justify-content-center custom-flex-list">
<li role="presentation" class="nav-item">
<a role="menuitem" href="/" class="nav-link custom_nav_link custom_nav_link_active">
<span data-oe-model="website.menu" data-oe-id="18" data-oe-field="name" data-oe-type="char" data-oe-expression="submenu.name">Page d'accueil</span>
</a>
</li>
<li role="presentation" class="nav-item dropdown True">
<a data-bs-toggle="dropdown" href="#" role="menuitem" class="nav-link custom_nav_link custom_nav_link_active dropdown-toggle o_mega_menu_toggle" data-bs-display="static" aria-expanded="false">
<span data-oe-xpath="/t[1]/li[2]/a[1]/span[1]" data-oe-model="website.menu" data-oe-id="11" data-oe-field="name" data-oe-type="char" data-oe-expression="submenu.name" class="" style="">Nous connaître</span>
</a>
<div data-name="Mega Menu" data-oe-xpath="/t[1]/li[2]/div[1]" class="dropdown-menu o_mega_menu" data-oe-model="website.menu" data-oe-id="11" data-oe-field="mega_menu_content" data-oe-type="html" data-oe-expression="submenu.mega_menu_content" style="width: auto;"><div class="o_mega_menu-arrow" style="left: 111.992px;">
<img src="/theme_ifpt/static/img/header/arrow_up.svg" alt="Rectangle" loading="lazy" style="">
</div>
<section class="o_cc1 ifp_about_us">
<div class="d-flex">
<div class="heardermenu-inside">
<h4 class="navbar-subItem-title text-uppercase h5 fw-bold mt-0">À PROPOS</h4>
<nav class="nav flex-column">
<a href="#" class="nav-link px-0" data-name="Menu Item">
Certifying
body
</a>
<a href="#" class="nav-link px-0" data-name="Menu Item">
Careers at
IFP Training
</a>
</nav>
</div>
<div class="heardermenu-inside">
<h4 class="navbar-subItem-title text-uppercase h5 fw-bold mt-0">NOS ENGAGEMENT</h4>
<nav class="nav flex-column">
<a href="#" class="nav-link px-0" data-name="Menu Item">
Quality
</a>
<a href="#" class="nav-link px-0" data-name="Menu Item">
Educational commitment
</a>
</nav>
</div>
</div>
</section>
</div>
</li>
<li role="presentation" class="nav-item dropdown True">
<a data-bs-toggle="dropdown" href="#" role="menuitem" class="nav-link custom_nav_link custom_nav_link_active dropdown-toggle o_mega_menu_toggle show active" data-bs-display="static" aria-expanded="true">
<span data-oe-xpath="/t[1]/li[2]/a[1]/span[1]" data-oe-model="website.menu" data-oe-id="12" data-oe-field="name" data-oe-type="char" data-oe-expression="submenu.name" class="underlined" style="color: rgb(42, 176, 119);">Nos solutions</span>
</a>
<div data-name="Mega Menu" data-oe-xpath="/t[1]/li[2]/div[1]" class="dropdown-menu o_mega_menu show" data-oe-model="website.menu" data-oe-id="12" data-oe-field="mega_menu_content" data-oe-type="html" data-oe-expression="submenu.mega_menu_content" style="width: auto; left: 0px; right: auto;" data-bs-popper="static"><div class="o_mega_menu-arrow" style="left: 103.531px;">
<img src="/theme_ifpt/static/img/header/arrow_up.svg" alt="Rectangle" loading="lazy" style="">
</div>
<section class="o_cc1 ifp_our_solution">
<div class="d-flex ">
<div class="heardermenu-inside">
<h4 class="navbar-subItem-title text-uppercase h5 fw-bold mt-0">EVALUATION AND COMPETENCY-BASED
MANAGEMENT</h4>
<nav class="nav flex-column">
<a href="#" class="nav-link px-0" data-name="Menu Item">
Competency-based management
</a>
<a href="#" class="nav-link px-0" data-name="Menu Item">
On-the job
skills
</a>
</nav>
</div>
<div class="heardermenu-inside">
<h4 class="navbar-subItem-title text-uppercase h5 fw-bold mt-0">FORMATION PROFESSIONNELLE</h4>
<nav class="nav flex-column">
<a href="#" class="nav-link px-0" data-name="Menu Item">
Inter/Intra/customized
</a>
<a href="#" class="nav-link px-0" data-name="Menu Item">
Work-linked
training
</a>
</nav>
</div>
<div class="heardermenu-inside">
<h4 class="navbar-subItem-title text-uppercase h5 fw-bold mt-0">FORMATION EN APPRENTISSAGE</h4>
<nav class="nav flex-column">
<a href="#" class="nav-link px-0" data-name="Menu Item">
Apprentice
information
</a>
</nav>
</div>
<div class="heardermenu-inside">
<h4 class="navbar-subItem-title text-uppercase h5 fw-bold mt-0">VALIDATION DES COMPETENCES</h4>
<nav class="nav flex-column">
<a href="#" class="nav-link px-0" data-name="Menu Item">
National and international
certifications
</a>
<a href="#" class="nav-link px-0" data-name="Menu Item">
IFP Training Certificate
</a>
</nav>
</div>
</div>
</section>
</div>
</li>
<li role="presentation" class="nav-item dropdown True">
<a data-bs-toggle="dropdown" href="#" role="menuitem" class="nav-link custom_nav_link custom_nav_link_active dropdown-toggle o_mega_menu_toggle" data-bs-display="static" aria-expanded="false">
<span data-oe-xpath="/t[1]/li[2]/a[1]/span[1]" data-oe-model="website.menu" data-oe-id="14" data-oe-field="name" data-oe-type="char" data-oe-expression="submenu.name" class="" style="">Boutique</span>
</a>
<div data-name="Mega Menu" data-oe-xpath="/t[1]/li[2]/div[1]" class="dropdown-menu o_mega_menu" data-oe-model="website.menu" data-oe-id="14" data-oe-field="mega_menu_content" data-oe-type="html" data-oe-expression="submenu.mega_menu_content" style="width: auto; left: 0px; right: auto;">
<div class="o_mega_menu-arrow" style="left: 85.2578px;">
<img src="/theme_ifpt/static/img/header/arrow_up.svg" alt="Rectangle" loading="lazy" style="">
</div>
<section class="s_mega_menu_odoo_menu o_cc1">
<div class="container">
<div class="row">
<div class="heardermenu-inside">
<h4 class="navbar-subItem-title text-uppercase h5 fw-bold mt-0">Ordinateurs & Appareils</h4>
<nav class="nav flex-column">
<a href="#" class="nav-link px-0" data-name="Menu Item">Ordinateurs portables</a>
</nav>
</div>
<div class="heardermenu-inside">
<h4 class="navbar-subItem-title text-uppercase h5 fw-bold mt-0">Moniteurs</h4>
<nav class="nav flex-column">
<a href="#" class="nav-link px-0" data-name="Menu Item">Télévisions</a>
</nav>
</div>
<div class="heardermenu-inside">
<h4 class="navbar-subItem-title text-uppercase h5 fw-bold mt-0">Électronique</h4>
<nav class="nav flex-column">
<a href="#" class="nav-link px-0" data-name="Menu Item">Caméra</a>
</nav>
</div>
<div class="heardermenu-inside">
<h4 class="navbar-subItem-title text-uppercase h5 fw-bold mt-0">Promotions</h4>
<nav class="nav flex-column">
<a href="#" class="nav-link px-0" data-name="Menu Item">Ordinateurs</a>
</nav>
</div>
</div>
</div>
<div class="container-fluid border-top s_mega_menu_odoo_menu_footer">
<div class="row">
<div class="col-12 pt8 pb8">
<div class="s_social_media text-center o_not_editable" data-snippet="s_social_media" data-name="Social Media" contenteditable="false">
<h5 class="s_social_media_title d-none" contenteditable="true">Suivez-nous</h5>
<a href="/website/social/facebook" class="s_social_media_facebook me-3 ms-3" target="_blank" aria-label="Facebook">
<i class="fa fa-2x fa-facebook m-1 o_editable_media"></i>
</a>
<a href="/website/social/twitter" class="s_social_media_twitter me-3 ms-3" target="_blank" aria-label="Twitter">
<i class="fa fa-2x fa-twitter m-1 o_editable_media"></i>
</a>
<a href="/website/social/linkedin" class="s_social_media_linkedin me-3 ms-3" target="_blank" aria-label="LinkedIn">
<i class="fa fa-2x fa-linkedin m-1 o_editable_media"></i>
</a>
<a href="/website/social/github" class="s_social_media_github me-3 ms-3" target="_blank" aria-label="GitHub">
<i class="fa fa-2x fa-github m-1 o_editable_media"></i>
</a>
<a href="/website/social/youtube" class="s_social_media_youtube me-3 ms-3" target="_blank" aria-label="YouTube">
<i class="fa fa-2x fa-youtube m-1 o_editable_media"></i>
</a>
<a href="/website/social/instagram" class="s_social_media_instagram me-3 ms-3" target="_blank" aria-label="Instagram">
<i class="fa fa-2x fa-instagram m-1 o_editable_media"></i>
</a>
<a href="/website/social/tiktok" class="s_social_media_tiktok me-3 ms-3" target="_blank" aria-label="TikTok">
<i class="fa fa-2x fa-tiktok m-1 o_editable_media"></i>
</a>
</div>
</div>
</div>
</div>
</section></div>
</li>
<li role="presentation" class="nav-item dropdown True">
<a data-bs-toggle="dropdown" href="#" role="menuitem" class="nav-link custom_nav_link custom_nav_link_active dropdown-toggle o_mega_menu_toggle" data-bs-display="static" aria-expanded="false">
<span data-oe-xpath="/t[1]/li[2]/a[1]/span[1]" data-oe-model="website.menu" data-oe-id="13" data-oe-field="name" data-oe-type="char" data-oe-expression="submenu.name" class="" style="">Ressources</span>
</a>
<div data-name="Mega Menu" data-oe-xpath="/t[1]/li[2]/div[1]" class="dropdown-menu o_mega_menu" data-oe-model="website.menu" data-oe-id="13" data-oe-field="mega_menu_content" data-oe-type="html" data-oe-expression="submenu.mega_menu_content" style="width: auto;"><div class="o_mega_menu-arrow" style="left: 93.8516px;">
<img src="/theme_ifpt/static/img/header/arrow_up.svg" alt="Rectangle" loading="lazy" style="">
</div>
<section class="o_cc1 ifp_resource">
<div class="d-flex">
<div class="heardermenu-inside">
<h4 class="navbar-subItem-title text-uppercase h5 fw-bold mt-0">RESSOURCES</h4>
<nav class="nav flex-column">
<a href="#" class="nav-link px-0" data-name="Menu Item">
Case studies
</a>
</nav>
</div>
</div>
</section>
</div>
</li>
<li role="presentation" class="nav-item">
<a role="menuitem" href="/event" class="nav-link custom_nav_link custom_nav_link_active">
<span data-oe-model="website.menu" data-oe-id="24" data-oe-field="name" data-oe-type="char" data-oe-expression="submenu.name">Événements</span>
</a>
</li>
<li role="presentation" class="nav-item dropdown True">
<a data-bs-toggle="dropdown" href="#" role="menuitem" class="nav-link custom_nav_link custom_nav_link_active dropdown-toggle o_mega_menu_toggle" data-bs-display="static" aria-expanded="false">
<span data-oe-xpath="/t[1]/li[2]/a[1]/span[1]" data-oe-model="website.menu" data-oe-id="21" data-oe-field="name" data-oe-type="char" data-oe-expression="submenu.name" class="" style="">Contactez-nous</span>
</a>
<div data-name="Mega Menu" data-oe-xpath="/t[1]/li[2]/div[1]" class="dropdown-menu o_mega_menu" data-oe-model="website.menu" data-oe-id="21" data-oe-field="mega_menu_content" data-oe-type="html" data-oe-expression="submenu.mega_menu_content" style="width: auto; left: auto; right: 0px;">
<div class="o_mega_menu-arrow" style="left: 1190.84px;">
<img src="/theme_ifpt/static/img/header/arrow_up.svg" alt="Rectangle" loading="lazy" style="">
</div>
<section class="s_mega_menu_odoo_menu o_cc1">
<div class="container">
<div class="row">
<div class="heardermenu-inside">
<h4 class="navbar-subItem-title text-uppercase h5 fw-bold mt-0">Ordinateurs & Appareils</h4>
<nav class="nav flex-column">
<a href="#" class="nav-link px-0" data-name="Menu Item">Ordinateurs portables</a>
</nav>
</div>
<div class="heardermenu-inside">
<h4 class="navbar-subItem-title text-uppercase h5 fw-bold mt-0">Moniteurs</h4>
<nav class="nav flex-column">
<a href="#" class="nav-link px-0" data-name="Menu Item">Télévisions</a>
<a href="#" class="nav-link px-0" data-name="Menu Item">Écrans de bureau</a>
<a href="#" class="nav-link px-0" data-name="Menu Item">Projecteurs</a>
</nav>
</div>
<div class="heardermenu-inside">
<h4 class="navbar-subItem-title text-uppercase h5 fw-bold mt-0">Électronique</h4>
<nav class="nav flex-column">
<a href="#" class="nav-link px-0" data-name="Menu Item">Caméra</a>
</nav>
</div>
<div class="heardermenu-inside">
<h4 class="navbar-subItem-title text-uppercase h5 fw-bold mt-0">Promotions</h4>
<nav class="nav flex-column">
<a href="#" class="nav-link px-0" data-name="Menu Item">Réseaux</a>
</nav>
</div>
</div>
</div>
</section></div>
</li>
<li data-name="Language Selector" class="o_header_language_selector position-relative">
<div class="js_language_selector dropdown d-print-none">
<button type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true" class="btn border-0 dropdown-toggle nav-link btn-sm d-flex align-items-center fw-bold text-uppercase o_nav-link_secondary custom-list-langage">
<img data-oe-model="ir.ui.view" data-oe-id="973" data-oe-field="arch" data-oe-xpath="/t[1]/img[1]" class="o_lang_flag " src="/base/static/img/country_flags/fr.png?height=25" alt=" Français" loading="lazy" style="">
<span class="align-middle">FR</span>
</button>
<div role="menu" class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item js_change_lang " role="menuitem" href="/en/shop" data-url_code="en" title="English (US)">
<img data-oe-model="ir.ui.view" data-oe-id="973" data-oe-field="arch" data-oe-xpath="/t[1]/img[1]" class="o_lang_flag " src="/base/static/img/country_flags/us.png?height=25" alt="English (US)" loading="lazy" data-lazy-loading-initial-min-height="" style="min-height: 1px;">
<span class="align-middle ">EN</span>
</a>
<a class="dropdown-item js_change_lang active" role="menuitem" href="/fr/shop" data-url_code="fr" title=" Français">
<img data-oe-model="ir.ui.view" data-oe-id="973" data-oe-field="arch" data-oe-xpath="/t[1]/img[1]" class="o_lang_flag " src="/base/static/img/country_flags/fr.png?height=25" alt=" Français" loading="lazy" style="">
<span class="align-middle ">FR</span>
</a>
</div>
</div>
</li>
</ul>
</div>
This is my js :
document.querySelectorAll(".o_mega_menu_toggle").forEach(function (toggle) {
toggle.addEventListener("click", function () {
var dropdownMenu = toggle.nextElementSibling; // Sélectionne le dropdown associé
dropdownMenu.style.width = "auto";
var rect = dropdownMenu.getBoundingClientRect();
if (rect.right > window.innerWidth) {
dropdownMenu.style.left = "auto"; // Supprime le positionnement par défaut
dropdownMenu.style.right = "0"; // L'aligne au bord droit de l'écran
}
if (rect.left < 0) {
dropdownMenu.style.left = "0"; // L'aligne au bord gauche de l'écran
dropdownMenu.style.right = "auto"; // Supprime l'alignement à droite
}
if (rect.width > window.innerWidth) {
dropdownMenu.style.maxWidth = window.innerWidth - 20 + "px";
dropdownMenu.style.overflowX = "auto";
}
var arrow = dropdownMenu.querySelector(".o_mega_menu-arrow");
var toggleRect = toggle.getBoundingClientRect(); // Position du lien
var dropdownRect = dropdownMenu.getBoundingClientRect(); // Position du dropdown
var arrowLeft = toggleRect.left + toggleRect.width / 2 - dropdownRect.left;
arrowLeft = Math.max(15, Math.min(arrowLeft, dropdownRect.width - 15));
arrow.style.left = arrowLeft + "px";
});
});
console.log("firstfffffff");
You need to sign in to view this answers
Leave feedback about this