Menu Accordion Changes

June 7, 2024
main menu
Accordions buttons in the main menu now include the accordion's title

The Crimson Menu Working Group decided to identify some quick fixes that will improve the usability of the menu before settling in for a longer-term project which might require some bigger changes.

The first item identified was that the behavior of the accordions within the menu were not consistent with other accordions in the Crimson templates. In order to make the behavior consistent and improve the discoverability of the accordions for users, the accordions will be activated by either the + sign next to the top-level heading or the text itself. If a link was provided for the top-level heading, it will be added to the top of the list of links inside the accordion.

main menu with the previous behavior
Previous Behavior: accordions only operated by interacting with the +/- sign next to the link/title. Title is linked to another page or a location on the current page.
main menu with new behavior
New Behavior: accordions operated by interacting with the +/- sign or the title. Link is added to the list of links inside the accordion.

If you do not want the top-level link added to the list of links inside the accordion, all you need to do is remove the link from the text or change the link's URL to #.

Editing the header
The "News & Events" heading is no longer linked, so the list of links inside the accordion will not be modified.
Insert/Edit Link dialog in the header
Alternatively, edit the Academics link and set the URL to # to get the same result.

Additionally, the In this Section menu, which is usually displayed below the SDSU Logo and beside the site's breadcrumbs, was updated to place the +/- sign before the text instead of after it and the button was enlarged to include the +/- sign. Hopefully this will not only make the behavior consistent with the rest of the accordions, but will also make this menu a little more discoverable for users.

Site header with "In this Section" menu and breadcrumbs
The "In this Section" menu in its new configuration

Finally, the interactions between the two menus have been updated. Previously, if you opened both menus, regardless of the order in which you opened them, only the main menu would be visible, because it covers everything below the header in the browser window. Now, only the most recently-opened menu will be open:

  • If you attempt to open the main menu while the In this Section menu is open, the In this Section menu will close and the main menu will open.
  • If you attempt to open the In this Section menu while the main menu is open, the main menu will close and the In this Section menu will open.

Our hope is that this behavior will more closely match the user's expectations.

Required Actions for Site Admins

Please take the time to update your sites’ main menus as needed and republish them. The main menu is located at /_resources/includes/crimson/header.pcf

Republishing the main menu is only required for the changes to the accordions within the main menu. The changes to the In this Section menu's appearance and behavior should already be active on all sites, though users may need to reload the page or clear their browser's cache.

Categorized As