State Template v4 Original Megamenu
This megamenu has similar look and feel as the original State Template v4 megamenu. The functionality in both template v5 and template v4 is the same: 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 as well as .original classes in the <nav> element.
Example: <nav id="navigation" class="main-navigation megadropdown original"> .
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>