<nav class="main-menu" role="navigation" aria-label="Main Navigation" aria-labelledby="mainmenulabel">
    <div class="container">
        <h2 id="mainmenulabel" class="main-menu__heading">Main Menu</h2>
        <ul class="main-menu__list">
            <li class="main-menu__item">
                <a href="#" class="main-menu__link js-menu-level1">key products</a>
            </li>
            <li class="main-menu__item">
                <a href="#" class="main-menu__link js-menu-level1">about us</a>
            </li>
            <li class="main-menu__item">
                <a href="#" class="main-menu__link js-menu-level1">resources</a>
            </li>
            <li class="main-menu__item">
                <a href="#" class="main-menu__link js-menu-level1">clinical evidence</a>
            </li>
            <li class="main-menu__item">
                <a href="#" class="main-menu__link js-menu-level1">contact us</a>
            </li>
        </ul>
    </div>
</nav>
<nav class="main-menu" role="navigation" aria-label="Main Navigation" aria-labelledby="mainmenulabel">
	<div class="container">
		<h2 id="mainmenulabel" class="main-menu__heading">Main Menu</h2>
		<ul class="main-menu__list">
			{{#each listItems}}
			<li class="main-menu__item">
				<a href="{{ this.link }}" class="main-menu__link js-menu-level1">{{ this.title }}</a>
			</li>
	  		{{/each}}
		</ul>
	</div>	
</nav>
{
    "listItems": [
        {
            "title": "key products",
            "link": "#"
        },
        {
            "title": "about us",
            "link": "#"
        },
        {
            "title": "resources",
            "link": "#"
        },
        {
            "title": "clinical evidence",
            "link": "#"
        },
        {
            "title": "contact us",
            "link": "#",
            "class": "contact"
        }
    ]
}
.main-menu {
	display: none;
	@include clearfix();
	@include mq($from: med) {
		display: block;
		border-bottom: 1px solid $grey--superlight;
	}
}
.main-menu--active {
	display: block;
	//add max height
}
.main-menu__heading {
	display: none;

}
.main-menu__list {
	margin-top: 1em;

	position: relative;
	@include clearfix();
	@include mq($from: med) {
		width: 90%;
		width: calc(100% - 50px);
		display: block;
		float:left;
	}
}
.main-menu__item {
	@include mq($from: med) {
		#{$padding-right}: 1.2em;
		float: flip(left, right);
	}
	@include mq($from: large) {
		#{$padding-right}: 2em;
	}
}
.main-menu__link {
	text-decoration: none;
	display: block;
	@include rem2px(font-size, 1.8);
	color: $black;
	padding-bottom: 0.75em;
	&:hover {
		text-decoration: underline;
	}
	@include mq($until: med) {
		background: url('/assets/icons/arrow-down-orange.png') no-repeat top right;
	    background-image: url('/assets/icons/arrow-down-orange.svg'), none;
	    background-repeat: no-repeat;
	    background-position: top right;
	    padding-right: 2.5em;
	    background-size: 18px;
	}
}
.main-menu__link--active {
}
.main-menu__item--contact {
	@include mq($from: med) {
		float: flip(right, left);
		#{$padding-right}: 2em;
		.main-menu__link {
			color: #fd7300;
		}
	}
}
.mobile-menu__button {
	margin-left: 16px;
	margin-top: 3px;
	display: inline-block;
	appearance: none;
	background: $white;
	border: 0;
	float:flip(right,left);
	&:focus,
	&:active {
		outline: 0;
	}
	.menu-icon {
		display: block;
	}
	@include mq($from: med) {
		display: none;
	}
}
$(document).ready(function() {
	//prototype code refactor into objet literal
	var $level1Trigger = $('.js-menu-level1');
	$(document).on('click', $level1Trigger, function(e) {
		//e.preventDefault();
		if(!$(e.target).parents('.main-menu__list').has(e.target).length) {
			$level1Trigger.removeClass('main-menu__link--active');
			$level1Trigger.parent().siblings().children('.main-menu__link').removeClass('main-menu__link--active');
			$level1Trigger.parent().siblings().children('.sub-nav').removeClass('sub-nav--active');
			$level1Trigger.next('.sub-nav').removeClass('sub-nav--active');
		} else {
			$level1Trigger.addClass('main-menu__link--active');
			$level1Trigger.parent().siblings().children('.main-menu__link').removeClass('main-menu__link--active');
			$level1Trigger.parent().siblings().children('.sub-nav').removeClass('sub-nav--active');
			$level1Trigger.next('.sub-nav').addClass('sub-nav--active');
		}
		
	});
	$('.js-mobile-nav-trigger').on('click', function() {
		$('.main-menu').toggleClass('main-menu--active');
	});
});

There are no notes for this item.