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>