Megamenu Navigation

This page is using the Megamenu along with the Primary page header.

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

Sub Navigation Images

The sub navigation panels in the megamenu include the ability to place images next to the links. Image are included by placing a <div> with class .sub-nav-decoration as the last element in the <div> with class .sub-nav.

The image is defined as a background image in the style attribute of the .sub-nav-decoration element. The image will automatically be scaled and cropped to fit the provided area.

The image size and position is determinde by an additional class added to the <div> with class .sub-nav. These classes are as follows:

  • .with-image-sm-right: Places the image on the right, occupying one third of the sub navigation panel width.
  • .with-image-md-right: Places the image on the right, occupying half of the panel. l
  • .with-image-sm-left: Places the image on the left, occupying one third of the panel.
  • .with-image-md-left: Places the inmage on the left, occupying half of the panel.

Example:

<li class="nav-item">
    <a href="/" class="first-level-link">Link 3</a>
    <div class="sub-nav with-image-sm-right">
        <ul class="second-level-nav">
            <li>
                …links
            </li>
        </ul>
        <div class="sub-nav-decoration" style="background:url('/sample/images/sample-nav-image.jpg')"></div>
     </div>
</li>

Navigation Samples