Flex Megamenu Navigation
The flex megamenu displays dropdown panels for sub navigation when the user hovers over a primary link.
This style of menu can be set by including the .megadropdown
class in the <nav> element.
Example:
<nav id="navigation" class="main-navigation megadropdown">
In the template distribution this markup can be found in /ssi/navigation.html.
Flex Units
Sub navigation uses flex properties to layout sub-navigation items inside of the megadropdown menu.
Inside .sub-nav container use flexbox row div .second-level-nav with class .flex
added to it. Class flex will ensure equal inline distribution of a sub-navigation items
iside of .second-level-nav div.
Example:
<div class="sub-nav">
<div class="second-level-nav flex">
<a href="/" class="second-level-link">Link 1</a>
<a href="/" class="second-level-link">Link 2</a>
<a href="/" class="second-level-link">Link 3</a>
</div>
</div>
To add border around sub-navigation link units add class .with-border to the .second-level-nav div container.
Mixed Content Within Navigation
The megamenu allows for the display optional icons or images with sub navigation links.
It is also possible to display a short description below each sub navigation link. To display icon on top
of the link use span with appropriate ca-gov-icon icon class from our CA Gov icon font library.
To make an icon bigger use desired font size class such as .font-size-40.
To display small images on the left or right side of the link use .with-image-left
or .with-image-right on the div container containing the media.
Link with large icon:
First Link
Some link description.
Link with left image:
News Title