<div class="main-navigation-panel">
<div class="main-navigation-panel-content">
<div class="main-navigation-close">
<a href="#">
<i class="uod-icons uod-icons-cross"></i>
</a>
</div>
<div class="main-navigation-desktop">
<div id="menu-business-services" class="main-navigation-desktop-content main-navigation-panel-hidden">
<div class="main-navigation-title">
<h3>Business Services</h3>
</div>
<nav class="main-navigation">
<div class="main-navigation-principle-menu">
<ul>
<li>
<a href="#">
<h6>What we offer</h6>
<p>Find everything you need on undergraduating studying</p>
</a>
</li>
<li>
<a href="#">
<h6>Hire a room</h6>
<p>Find everything you need on undergraduating studying Nick to write more text</p>
</a>
</li>
</ul>
</div>
<div class="main-navigation-secondary-menu">
<div class="main-navigation-case-studies-title">Feature Case Study</div>
<a href="">
<h6>On the right track with National Rail</h6>
<p>Network Rail asked us to upskill its overhead line technicians. creating a more knowledgable, better-informed and better-enagged maintenance.</p>
</a>
</div>
<div class="main-navigation-actions-menu">
<div class="main-navigation-actions-menu-panel">
<h5>Book an open day</h5>
<p>Come and have a look around at one of our open days, wherre you can chat to the lecturers and view facilties.</p>
<a href="#" class="button-yellow" role="button" tabindex="0" data-scroll>
Book an open day
<span class="button-overlay"><span>
Book an open day
</span></span></a> </div>
</div>
</nav>
</div>
</div>
<div class="main-navigation-mobile">
<div class="main-navigation-inner-panel">
<section class="accordion accordion-scheme-dark">
<div class="accordion-tablist" role="tablist">
<div class="accordion-tab">
<a id="business-services-label" href="#business-services" class="accordion-tab-title-container collapse-toggle" data-collapse data-group="" role="tab" aria-expanded="false" aria-controls="business-services">
<h4 class="accordion-tab-title">
Business Services
<span class="accordion-tab-title-indicator">
<i class="uod-icons uod-icons-chevron-down"></i>
</span>
</h4>
</a>
<div id="business-services" class="accordion-tab-content collapse" role="tabpanel" aria-labelledby="business-services-label">
<div class="accordion-tab-content-inner">
<div class="main-navigation-principle-menu">
<ul>
<li>
<a href="#">
<h6>What we offer</h6>
<p>Find everything you need on undergraduating studying</p>
</a>
</li>
<li>
<a href="#">
<h6>Hire a room</h6>
<p>Find everything you need on undergraduating studying Nick to write more text</p>
</a>
</li>
</ul>
</div>
<div class="main-navigation-secondary-menu">
<div class="main-navigation-case-studies">
<div class="main-navigation-case-studies-title">Feature Case Study</div>
<a href="">
<h6>On the right track with National Rail</h6>
<p>Network Rail asked us to upskill its overhead line technicians. creating a more knowledgable, better-informed and better-enagged maintenance.</p>
</a>
</div>
</div>
<div class="main-navigation-actions-menu">
<div class="main-navigation-actions-menu-panel">
<a href="#" class="button-yellow" role="button" tabindex="0" data-scroll>
Book an open day
<span class="button-overlay"><span>
Book an open day
</span></span></a> </div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
<div class="main-navigation-panel">
<div class="main-navigation-panel-content">
<div class="main-navigation-close">
<a href="#">
<i class="uod-icons uod-icons-cross"></i>
</a>
</div>
<div class="main-navigation-desktop">
{% for item in menu %}
{% if item.title %}
<div id="menu-{{ item.title | lower | replace({ ' ' : '-' }) }}" class="main-navigation-desktop-content main-navigation-panel-hidden">
<div class="main-navigation-title">
<h3>{{ item.title }}</h3>
</div>
<nav class="main-navigation">
<div class="main-navigation-principle-menu">
<ul>
{% for index, link in item.principleMenuItems %}
<li>
<a href="{{ link.href }}">
<h6>{{ link.title }}</h6>
<p>{{ link.description }}</p>
</a>
</li>
{% endfor %}
</ul>
</div>
<div class="main-navigation-secondary-menu">
{% if item.secondaryMenuItems.length %}
<ul>
{% for index, link in item.secondaryMenuItems %}
<li>
<a href="{{ link.href }}">
<h6>{{ link.label }}</h6>
</a>
</li>
{% endfor %}
</ul>
{% endif %}
{% if item.caseStudies.length %}
<div class="main-navigation-case-studies-title">Feature Case Study</div>
{% for index, caseStudy in item.caseStudies %}
<a href="{{ link.href }}">
<h6>{{ caseStudy.title }}</h6>
<p>{{ caseStudy.description }}</p>
</a>
{% endfor %}
{% endif %}
</div>
<div class="main-navigation-actions-menu">
{% for index, panel in item.actions %}
<div class="main-navigation-actions-menu-panel">
<h5>{{ panel.title }}</h5>
<p>{{ panel.description }}</p>
{% include '@button' with {
label: panel.callToAction.label,
href: panel.callToAction.href,
scheme: 'yellow'
} %}
</div>
{% endfor %}
</div>
</nav>
</div>
{% endif %}
{% endfor %}
</div>
<div class="main-navigation-mobile">
<div class="main-navigation-inner-panel">
{% set contents = [] %}
{% for item in menu %}
{% if item.title %}
{% set content %}
<div class="main-navigation-principle-menu">
<ul>
{% for index, link in item.principleMenuItems %}
<li>
<a href="{{ link.href }}">
<h6>{{ link.title }}</h6>
<p>{{ link.description }}</p>
</a>
</li>
{% endfor %}
</ul>
</div>
<div class="main-navigation-secondary-menu">
{% if item.secondaryMenuItems.length %}
<ul>
{% for index, link in item.secondaryMenuItems %}
<li>
<a href="{{ link.href }}">
<h6>{{ link.label }}</h6>
</a>
</li>
{% endfor %}
</ul>
{% endif %}
{% if item.caseStudies.length %}
<div class="main-navigation-case-studies">
<div class="main-navigation-case-studies-title">Feature Case Study</div>
{% for index, caseStudy in item.caseStudies %}
<a href="{{ link.href }}">
<h6>{{ caseStudy.title }}</h6>
<p>{{ caseStudy.description }}</p>
</a>
{% endfor %}
</div>
{% endif %}
</div>
<div class="main-navigation-actions-menu">
{% for index, panel in item.actions %}
<div class="main-navigation-actions-menu-panel">
{% include '@button' with {
label: panel.callToAction.label,
href: panel.callToAction.href,
scheme: 'yellow'
} %}
</div>
{% endfor %}
</div>
{% endset %}
{% set contents = contents|merge([{ label: item.title, tag: item.title|lower|replace({' ':'-'}), expanded: index == 0, content: content }]) %}
{% else %}
<a href="#" class="main-navigation-mobile-link">{{ item }}</a>
{% endif %}
{% endfor %}
{% if contents is not empty %}
{% include '@accordion' with {
contents: contents,
modal: true,
scheme: 'dark',
usehash: false
} %}
{% endif %}
</div>
</div>
</div>
</div>
{
"menu": [
{
"title": "Business Services",
"principleMenuItems": [
{
"title": "What we offer",
"description": "Find everything you need on undergraduating studying",
"href": "#"
},
{
"title": "Hire a room",
"description": "Find everything you need on undergraduating studying Nick to write more text",
"href": "#"
}
],
"secondaryMenuItems": [],
"caseStudies": [
{
"title": "On the right track with National Rail",
"description": "Network Rail asked us to upskill its overhead line technicians. creating a more knowledgable, better-informed and better-enagged maintenance.",
"href": "#"
}
],
"actions": [
{
"title": "Book an open day",
"description": "Come and have a look around at one of our open days, wherre you can chat to the lecturers and view facilties.",
"callToAction": {
"label": "Book an open day",
"href": "#"
}
}
]
}
]
}
@mixin header-panel {
display: flex;
&-panel {
// fluid margins can result in annoying half-pixels. setting rtl direction in the container
// and resetting it to ltr in the child can get around this.
direction: rtl;
&,
.header & {
h3,
h5,
h6,
p,
a {
color: $white;
}
}
ul {
margin: 0;
padding-left: 0;
list-style-type: none;
}
&-content {
// fluid margins can result in annoying half-pixels. setting rtl direction in the container
// and resetting it to ltr in the child can get around this.
direction: ltr;
position: relative;
background: $black;
color: $white;
padding: px-to-em(40, 17) 0;
padding-right: fluid-margin();
padding-left: fluid-margin();
margin-left: fluid-margin();
min-height: 100vh;
overflow: visible;
@include for-largerthan-ipad-portrait {
lost-column: 13/16;
lost-offset: 3/16;
padding-left: 0;
padding-right: $max-size;
margin-right: -$max-size;
}
}
}
&-close {
position: absolute;
top: px-to-em(40, 25);
right: fluid-margin();
width: 25px;
height: 25px;
line-height: 1;
font-size: px-to-em(25, 17);
@include for-largerthan-ipad-portrait {
right: $max-size;
}
a {
@include disable-underlines;
&,
&:link {
display: inline-block;
transition: transform .3s $default-animation-curve;
color: $white;
&:hover {
transform: rotate(90deg);
}
}
}
}
}
.main-navigation {
@include header-panel;
&-principle-menu,
&-secondary-menu {
a {
@include underline-only-on-hover;
@include link-colour($white);
display: block;
border-bottom: 1px dashed $dark-grey;
@include for-largerthan-ipad-portrait {
margin-right: px-to-em(60, 17);
}
&:hover {
border-bottom-color: $black;
}
}
p {
@include small-body-font;
padding-bottom: px-to-em(12, 14);
color: $light-grey;
@include for-phone-only {
display: none;
}
}
h6 {
margin-bottom: px-to-em(12, 20);
}
li {
margin-bottom: px-to-em(14);
}
}
&-principle-menu {
@include for-largerthan-ipad-portrait {
lost-column: 4/13;
lost-offset: 1/13;
}
}
&-secondary-menu {
@include for-largerthan-ipad-portrait {
lost-column: 4/13;
}
}
&-actions-menu {
&-panel {
margin-top: px-to-em(30, 17);
margin-bottom: px-to-em(30 - 20, 17);
&,
.header & {
.button-yellow {
margin-bottom: 0;
color: $black;
}
}
.light & {
a {
color: $black;
}
}
}
@include for-largerthan-ipad-portrait {
lost-column: 4/13;
&-panel {
background: $text-black;
padding: px-to-em(30, 17);
margin-top: 0;
p {
@include small-body-font;
color: $light-grey;
}
}
}
}
&-title {
lost-column: 12/13;
lost-offset: 1/13;
margin-bottom: px-to-em(40, 17);
}
&-inner-panel {
margin-top: 50px;
}
&-case-studies {
display: none;
@include for-largerthan-ipad-portrait {
display: initial;
}
&-title {
font-family: $header-font;
font-size: px-to-em(15, 17);
line-height: px-to-em(11, 15);
text-transform: uppercase;
margin-bottom: 1em;
}
}
&-desktop {
display: none;
@include for-largerthan-ipad-portrait {
display: initial;
}
}
&-mobile {
display: initial;
@include for-largerthan-ipad-portrait {
display: none;
}
}
&-mobile-link {
width: 100%;
background: #191919;
border: none;
border-radius: 2px;
line-height: 50px;
padding: 0 10px;
font-size: responsive 20px 28px;
font-range: $mobile-portrait $tablet-portrait;
font-weight: bold;
font-family: $header-font;
margin-bottom: $margin-extra-small;
display: block;
transition: background-color .3s $default-animation-curve;
&:hover,
&:focus,
&:active {
background-color: $text-black;
}
@include for-tablet-portrait-up {
padding: 0 $margin-extra-small;
height: 60px;
line-height: 60px;
}
}
}
The main navigation menu of the site, to be activated from buttons in the header. This component has no logic - the Header component encapsulates all of the logic necessary to reveal and hide the menus as required.