<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">
<div class="h3">Business Services</div>
</div>
<nav class="main-navigation">
<div class="main-navigation-principle-menu main-navigation-principle-menu-large">
<ul>
<li>
<a href="#">
<div class="h6">Developing People</div>
<p>We can help you fill your skills shortages by developing and empowering your workforce with our flexible work-based learning solutions.</p>
</a>
</li>
<li>
<a href="#">
<div class="h6">Funding, Services and Support</div>
<p>You can develop your business using our expertise and resources, grants and loans, or free support.</p>
</a>
</li>
<li>
<a href="#">
<div class="h6">Facilities and Services</div>
<p>We have venues for conferences, meetings and events, plus first-class technological centres and research and development facilities.</p>
</a>
</li>
<li>
<a href="#">
<div class="h6">Recruiting the Best Talent</div>
<p>We want to connect your organisation to our talent. Our students and graduates can provide you with new ideas and energy.</p>
</a>
</li>
<li>
<a href="#">
<div class="h6">Research and Expertise</div>
<p>We are experts in applied research with a practical, business focus and can help you with project development.</p>
</a>
</li>
<li>
<a href="#">
<div class="h6">Partnership Opportunities</div>
<p>Join our growing network of high-quality corporate and academic partners.</p>
</a>
</li>
</ul>
</div>
<div class="main-navigation-actions-menu">
<div class="main-navigation-actions-menu-panel">
<div class="h5">Book an open day</div>
<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">
<div class="accordion-tab-title h4">
Business Services
<span class="accordion-tab-title-indicator">
<i class="uod-icons uod-icons-chevron-down"></i>
</span>
</div>
</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="#">
<div class="h6">Developing People</div>
<p>We can help you fill your skills shortages by developing and empowering your workforce with our flexible work-based learning solutions.</p>
</a>
</li>
<li>
<a href="#">
<div class="h6">Funding, Services and Support</div>
<p>You can develop your business using our expertise and resources, grants and loans, or free support.</p>
</a>
</li>
<li>
<a href="#">
<div class="h6">Facilities and Services</div>
<p>We have venues for conferences, meetings and events, plus first-class technological centres and research and development facilities.</p>
</a>
</li>
<li>
<a href="#">
<div class="h6">Recruiting the Best Talent</div>
<p>We want to connect your organisation to our talent. Our students and graduates can provide you with new ideas and energy.</p>
</a>
</li>
<li>
<a href="#">
<div class="h6">Research and Expertise</div>
<p>We are experts in applied research with a practical, business focus and can help you with project development.</p>
</a>
</li>
<li>
<a href="#">
<div class="h6">Partnership Opportunities</div>
<p>Join our growing network of high-quality corporate and academic partners.</p>
</a>
</li>
</ul>
</div>
<div class="main-navigation-secondary-menu">
</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>
<style type="text/css">
#udol-course-taster-exercise .accordion-tab:after {
display: inline-block;
transform: translate(0, 0);
text-rendering: auto;
font: normal normal 400 14px/1 uod-icons;
font-size: inherit;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
content: "\ea0d";
font-size: 2em;
color: #101d49;
width: 100%;
text-align: center;
padding-top: 20px;
}
#udol-course-taster-exercise .accordion-tab:last-child:after {
content: '';
padding-top: 0;
}
</style>
</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">
<div class="h3">{{ item.title }}</div>
</div>
<nav class="main-navigation">
<div class="main-navigation-principle-menu{% if item.principleMenuItems.length > 4 %} main-navigation-principle-menu-large{% endif %}">
<ul>
{% for index, link in item.principleMenuItems %}
<li>
<a href="{{ link.href }}">
<div class="h6">{{ link.title }}</div>
<p>{{ link.description }}</p>
</a>
</li>
{% endfor %}
</ul>
</div>
{% if item.principleMenuItems.length <= 4 %}
<div class="main-navigation-secondary-menu">
{% if item.secondaryMenuItems.length %}
<ul>
{% for index, link in item.secondaryMenuItems %}
<li>
<a href="{{ link.href }}">
<div class="h6">{{ link.label }}</div>
</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 }}">
<div class="h6">{{ caseStudy.title }}</div>
<p>{{ caseStudy.description }}</p>
</a>
{% endfor %}
{% endif %}
</div>
{% endif %}
<div class="main-navigation-actions-menu">
{% for index, panel in item.actions %}
<div class="main-navigation-actions-menu-panel">
<div class="h5">{{ panel.title }}</div>
<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.principleMenuItems %}
{% set content %}
<div class="main-navigation-principle-menu">
<ul>
{% for index, link in item.principleMenuItems %}
<li>
<a href="{{ link.href }}">
<div class="h6">{{ link.title }}</div>
<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 }}">
<div class="h6">{{ link.label }}</div>
</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 }}">
<div class="h6">{{ caseStudy.title }}</div>
<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.title }}</a>
{% endif %}
{% endfor %}
{% if contents is not empty %}
{% include '@accordion' with {
contents: contents,
modal: true,
scheme: 'dark',
usehash: false,
useDivTitles: true
} %}
{% endif %}
</div>
</div>
</div>
</div>
{
"menu": [
{
"title": "Business Services",
"href": "#",
"principleMenuItems": [
{
"title": "Developing People",
"description": "We can help you fill your skills shortages by developing and empowering your workforce with our flexible work-based learning solutions.",
"href": "#"
},
{
"title": "Funding, Services and Support",
"description": "You can develop your business using our expertise and resources, grants and loans, or free support.",
"href": "#"
},
{
"title": "Facilities and Services",
"description": "We have venues for conferences, meetings and events, plus first-class technological centres and research and development facilities.",
"href": "#"
},
{
"title": "Recruiting the Best Talent",
"description": "We want to connect your organisation to our talent. Our students and graduates can provide you with new ideas and energy.",
"href": "#"
},
{
"title": "Research and Expertise",
"description": "We are experts in applied research with a practical, business focus and can help you with project development.",
"href": "#"
},
{
"title": "Partnership Opportunities",
"description": "Join our growing network of high-quality corporate and academic partners.",
"href": "#"
}
],
"secondaryMenuItems": [],
"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, h3,
.h5, h5,
.h6, 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);
list-style-type: none;
}
}
&-principle-menu {
@include for-largerthan-ipad-portrait {
lost-column: 4/13;
lost-offset: 1/13;
}
&-large {
@include for-largerthan-ipad-portrait {
lost-column: 8/13;
lost-offset: 1/13;
ul {
display: flex;
flex-wrap: wrap;
lost-utility: clearfix;
position: relative;
&:before {
width: 100%;
}
}
li {
lost-column: 4/8 2;
}
a {
height: 100%;
}
}
}
}
&-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 {
@include disable-underlines;
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.