State Template v4 Original Megamenu
This megamenu has similar look and feel as the original State Template v4 megamenu. The functionality in template v5.5, v5 and v4 is the same: the megamenu displays dropdown panels for sub navigation when the user clicks on 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 /sample/modules/nav-megamenu-orig.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>
More Navigation Samples
