只顯示業務催化劑中的子菜單

Question

我有一個主菜單，我正在使用。當您翻轉菜單時，我的服務頁面的子頁面顯示爲下拉菜單。當我在服務頁面上時，除了下拉菜單之外，我還想顯示子菜單和頁面左側的子菜單。我不想創建兩個菜單，因爲它似乎是多餘的。有什麼建議麼？謝謝大家。

Answer 1

這就是我所做的：我確保根項目上有id。然後使用jquery，我能夠提取出現在根項目之後的ul。我將它彈出一個div，然後從那裏開始設計。

Answer 2

下面是一個比較乾淨的方式，讓側面導航菜單反映主菜單中所需的子菜單項，沒有javascript（從而避免菜單在頁面載入中閃爍）。

這裏是我們的例子中的菜單結構：

home 
|-- Shop 
| |-- Shipping 
| |-- Terms 
| `-- FAQ 
| 
|-- Account 
| |-- Sign Up 
| `-- My Details 
| 
`-- About 
    |-- Contact Us 
    |-- Our History 
    `-- Where We Are 

有三種模板： '店'， '帳戶'，和 '關於'。

在「網店」模板，我們這邊導航HTML看起來像這樣（請注意show-group-類）：

<nav class="sidenav-a show-group-shop"> 
    {module_menu, version="2", menuId="750134", moduleTemplateGroup="Default"} 
</nav> 

當創建於公元前菜單中，我們應用類只向父節點。在'商店'上，我們申請類group-shop，因爲'賬戶'我們申請類group-account，'關於'，group-about。

同樣，我們更改每個模板中導航元素上的show-group-類。

爲了清楚起見，我們的菜單標籤將產生此HTML：（忽略ID的，它們是由BC產生的，我還沒有見過的方式將它們刪除）

<div id="myMenu1"> 
    <ul id="myMenu1List"> 
     <li class="group-shop selected"><a href="">Shop</a> 
      <ul> 
       <li><a href="">Shipping</a></li> 
       <li><a href="">Terms</a></li> 
       <li><a href="">FAQ</a></li> 
      </ul> 
     </li> 
     <li class="group-account"><a href="/account">Account</a> 
      <ul> 
       <li><a href="/sign-up">Sign Up</a></li> 
       <li><a href="/my-details">My Details</a></li> 
      </ul> 
     </li> 
     <li class="group-about"><a href="/about">About</a> 
      <ul> 
       <li><a href="/contact-us">Contact Us</a></li> 
       <li><a href="/our-history">Our History</a></li> 
       <li><a href="/where">Where We Are</a></li> 
      </ul> 
     </li> 
    </ul> 
</div> 

這裏的less，只顯示所需的子菜單：

nav { 
    &.sidenav-a { 
    & > ul > li { /* Target only first-level list items */ 
     display: none; 
    } 
    } 

    .show-menu-group(@groupname) { 
    &.show-group-@{groupname} { 
     ul > li.group-@{groupname} { 
     display: block; 
     } 
    } 
    } 

    .show-menu-group(shop); 
    .show-menu-group(account); 
    .show-menu-group(about); 
} 

或者，如CSS：

nav.sidenav-a > ul > li { 
    display: none; 
} 
nav.show-group-shop ul > li.group-shop { 
    display: block; 
} 
nav.show-group-account ul > li.group-account { 
    display: block; 
} 
nav.show-group-about ul > li.group-about { 
    display: block; 
} 

您可以看到CSS在每個子菜單中增長的速度。

上述代碼的實現可以在http://atlexstockyards.worldsecuresystems.com/saleyards-abattoirs-and-feedlots處看到。

（您可以從應用的樣式回溯源更少，如果你已經在你的Chrome瀏覽器開發工具得到'Enable CSS source maps' turned on）