WordPress Elementor Pro 僅使導航菜單小部件項目下拉

Question

我正在使用 Elementor Pro 在 WordPress 中重新創建一個 Joomla 站點。 我正在重新創建的網站有一個主菜單欄，其中許多菜單項都有子菜單下拉菜單。 導航菜單小部件使我能夠重新創建它，除了一件重要的事情。 具有子菜單下拉菜單的 Joomla 站點的菜單項本身不會將您帶到不同的頁面。 它們僅用於允許出現子菜單。

這是 go 的圖像以及以下示例： nav-menu

因此，例如，如果菜單項（例如“捐贈”）沒有子菜單下拉菜單，則單擊它將帶您進入其頁面（例如，在本例中為捐贈頁面）。 但是，如果一個菜單項（例如“聯系方式”）確實有一個子菜單下拉菜單，那么單擊它不會將您帶到不同的頁面，而是它的子菜單下拉菜單中的項目（例如在這種情況下“訪問”和“就業”）將帶您到不同的頁面。

據我所知，導航菜單小部件沒有直接的方法來使菜單項專門用於允許出現下拉子菜單。 所以我想知道是否有解決方法可以做到這一點。

我嘗試的第一件事是將此代碼添加到導航菜單小部件的自定義 css 部分：

selector .has-submenu {
   pointer-events: none;
}

但這也會禁用子菜單下拉菜單。

我嘗試的第二件事是使用以下代碼創建一個 HTML 小部件：

<script>
var anchorsWithSubMenus = document.querySelectorAll(".has-submenu");
    for (var i = 0; i < anchorsWithSubMenus.length; i++) {
        anchorsWithSubMenus[i].href = "#"
    }
</script>

但這似乎沒有任何作用。 我認為這是因為代碼在導航菜單 HTML 出現之前執行，但我不確定。

Answer 1

我意識到在我的網站儀表板上的外觀 > 菜單下，我可以添加作為自定義鏈接的菜單項。 因此，我將 go 的自定義鏈接添加到“#”，並為它們提供了我需要的文本。