Showing only the submenu in business catalyst

Question

i have a main menu that i'm using. My services page has subpages that shows as a drop-down when you rollover the menu. When i am on the services page, i want to show the sub-menu and only the submenu on the left hand side of the page in addition to the drop down. I dont want to have to create two menus as it seems redundant. Any suggestions? Thanks all.

score 0 · Answer 1 · answered Mar 20 '13 at 20:49

0

Here's what i did: I made sure the root items had id's on them. then using jquery, i was able to extract the ul that appear after the root item. I popped that into a div and then styled from there.

answered Mar 20 '13 at 20:49

Damien

4,093
9
39
52

score 0 · Answer 2 · answered Apr 24 '14 at 11:19

Here's a relatively clean way to have the side nav menu reflect the required submenu items from the main menu, without javascript (thus avoiding the menu flashing on pageload).

Here's our example menu structure:

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

There are three templates: 'Shop', 'Account', and 'About'.

In the 'Shop' template, our side nav HTML looks like this (note the show-group- class):

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

When creating the menu in BC, we apply classes only to the parent nodes. On 'Shop', we apply class group-shop, for 'Account' we apply class group-account, and for 'About', group-about.

Similarly, we change the show-group- class on the nav element in each template.

For clarity, our menu tag will generate this HTML:

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

(Ignore the id's, they're generated by BC and I haven't seen a way to remove them.)

Here's the less that shows only the desired submenu:

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);
}

Or, as 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;
}

You can see how much faster the CSS grows with each submenu.

An implementation of the above code can be seen at http://atlexstockyards.worldsecuresystems.com/saleyards-abattoirs-and-feedlots .

(You can trace from the applied styles back to the source Less if you've got 'Enable CSS source maps' turned on in your Chrome dev tools)

Showing only the submenu in business catalyst

2 Answers2