No notes defined.
{% macro menuItem(item, headingLevel) %}
<li class="uol-section-nav__item {{ 'uol-section-nav__item--parent' if item.items }}">
{% if item.url and not item.items %}
<a class="uol-section-nav__link" href="{{ item.url }}" {% if item.current %}aria-current="page"{% endif %}>
<span class="uol-section-nav__item__label">{{ item.title }}</span>
</a>
{% else %}
{% if headingLevel < 7 %} {# There is no h7 #}
<h{{ headingLevel }} class="uol-section-nav__item__label">{{ item.title }}</h{{ headingLevel }}>
{% else %} {# So output span instead of heading #}
<span class="uol-section-nav__item__label">{{ item.title }}</span>
{% endif %}
{% endif %}
{% if item.items %}
{# increment headingLevel to maintain semantic headings tags #}
{% set headingLevel = headingLevel + 1 %}
<ul class="uol-section-nav__sublist">
{% for item in item.items %}
{{ menuItem(item, headingLevel) }}
{% endfor %}
</ul>
{% endif %}
</li>
{% endmacro %}
{% if section_nav.items.length %}
<nav class="uol-section-nav" aria-label="Section navigation">
<h2 class="uol-section-nav__title">
<span class="uol-section-nav__title__intro">In this section</span>
<span class="uol-section-nav__title__text">{{ section_nav.title }}</span>
</h2>
<ul class="uol-section-nav__list">
{% for item in section_nav.items %}
{# Set initial headingLevel that may be incremented in menuItem() #}
{% set headingLevel = 3 %}
{{ menuItem(item, headingLevel) }}
{% endfor %}
</ul>
</nav>
{% endif %}
<nav class="uol-section-nav" aria-label="Section navigation">
<h2 class="uol-section-nav__title">
<span class="uol-section-nav__title__intro">In this section</span>
<span class="uol-section-nav__title__text">Undergraduate</span>
</h2>
<ul class="uol-section-nav__list">
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/undergraduate/overview">
<span class="uol-section-nav__item__label">Undergraduate overview</span>
</a>
</li>
<li class="uol-section-nav__item uol-section-nav__item--parent">
<h3 class="uol-section-nav__item__label">Academic experience</h3>
<ul class="uol-section-nav__sublist">
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/learning_and_teaching">
<span class="uol-section-nav__item__label">Learning and teaching</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/academic_facilities">
<span class="uol-section-nav__item__label">Academic facilities</span>
</a>
</li>
</ul>
</li>
<li class="uol-section-nav__item uol-section-nav__item--parent">
<h3 class="uol-section-nav__item__label">Enrichment opportunities</h3>
<ul class="uol-section-nav__sublist">
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/study_abroad">
<span class="uol-section-nav__item__label">Study abroad</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/work_experience">
<span class="uol-section-nav__item__label">Work experience</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/clubs_and_societies">
<span class="uol-section-nav__item__label">Clubs and societies</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/student_enterprise">
<span class="uol-section-nav__item__label">Student enterprise</span>
</a>
</li>
</ul>
</li>
<li class="uol-section-nav__item uol-section-nav__item--parent">
<h3 class="uol-section-nav__item__label">Your future</h3>
<ul class="uol-section-nav__sublist">
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/careers">
<span class="uol-section-nav__item__label">Careers</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/leeds_for_life">
<span class="uol-section-nav__item__label">Leeds for Life</span>
</a>
</li>
</ul>
</li>
<li class="uol-section-nav__item uol-section-nav__item--parent">
<h3 class="uol-section-nav__item__label">Campus life</h3>
<ul class="uol-section-nav__sublist">
<li class="uol-section-nav__item uol-section-nav__item--parent">
<h4 class="uol-section-nav__item__label">City life</h4>
<ul class="uol-section-nav__sublist">
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/city_life/overview">
<span class="uol-section-nav__item__label">City life overview</span>
</a>
</li>
</ul>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/wellbeing_and_support">
<span class="uol-section-nav__item__label">Wellbeing and support</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/sport_and_fitness">
<span class="uol-section-nav__item__label">Sport and fitness</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/a_global_university">
<span class="uol-section-nav__item__label">A global university</span>
</a>
</li>
</ul>
</li>
<li class="uol-section-nav__item uol-section-nav__item--parent">
<h3 class="uol-section-nav__item__label">Fees and costs</h3>
<ul class="uol-section-nav__sublist">
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/undergraduate_fees">
<span class="uol-section-nav__item__label">Undergraduate fees</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/additional_costs">
<span class="uol-section-nav__item__label">Additional costs</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/living_expenses">
<span class="uol-section-nav__item__label">Living expenses</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/tuition_fee_liability">
<span class="uol-section-nav__item__label">Tuition fee liability</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/tuition_fee_payment_schedule">
<span class="uol-section-nav__item__label">Tuition fee payment schedule</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/how_to_pay">
<span class="uol-section-nav__item__label">How to pay</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/sponsored_students">
<span class="uol-section-nav__item__label">Sponsored students</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/paying_for_your_accommodation">
<span class="uol-section-nav__item__label">Paying for your accommodation</span>
</a>
</li>
</ul>
</li>
<li class="uol-section-nav__item uol-section-nav__item--parent">
<h3 class="uol-section-nav__item__label">Funding</h3>
<ul class="uol-section-nav__sublist">
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/funding">
<span class="uol-section-nav__item__label">Funding overview</span>
</a>
</li>
<li class="uol-section-nav__item uol-section-nav__item--parent">
<h4 class="uol-section-nav__item__label">University scholarships and funding</h4>
<ul class="uol-section-nav__sublist">
<li class="uol-section-nav__item uol-section-nav__item--parent">
<h5 class="uol-section-nav__item__label">Leeds financial support</h5>
<ul class="uol-section-nav__sublist">
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/leeds_financial_support_eligibility" aria-current="page">
<span class="uol-section-nav__item__label">Leeds financial support eligibility</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/how_much_is_it_worth">
<span class="uol-section-nav__item__label">How much is it worth?</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/choosing_your_support">
<span class="uol-section-nav__item__label">Choosing your support</span>
</a>
</li>
</ul>
</li>
<li class="uol-section-nav__item uol-section-nav__item--parent">
<h5 class="uol-section-nav__item__label">Scholarships | personal circumstances</h5>
<ul class="uol-section-nav__sublist">
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/scholarships_personal_circumstances/scholarships">
<span class="uol-section-nav__item__label">Scholarships</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/scholarships_personal_circumstances/scholarships_faqs">
<span class="uol-section-nav__item__label">Scholarships FAQs</span>
</a>
</li>
</ul>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/scholarships_academic_achievement">
<span class="uol-section-nav__item__label">Scholarships | academic achievement</span>
</a>
</li>
</ul>
</li>
<li class="uol-section-nav__item uol-section-nav__item--parent">
<h4 class="uol-section-nav__item__label">Student loans and bursaries</h4>
<ul class="uol-section-nav__sublist">
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/what_help_is_available">
<span class="uol-section-nav__item__label">What help is available?</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/eligibility_and_applications">
<span class="uol-section-nav__item__label">Eligibility and applications</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/tuition_fee_loans_for_new_part-time_students">
<span class="uol-section-nav__item__label">Tuition fee loans for new part-time students</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/nhs_funding">
<span class="uol-section-nav__item__label">NHS funding</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/financial_support_for_muslim_students">
<span class="uol-section-nav__item__label">Financial support for Muslim students</span>
</a>
</li>
</ul>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/international_funding">
<span class="uol-section-nav__item__label">International funding</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/government_part-time_maintenance_loans">
<span class="uol-section-nav__item__label">Government part-time maintenance loans</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/extra_financial_help">
<span class="uol-section-nav__item__label">Extra financial help</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/funds_available_after_you_arrive">
<span class="uol-section-nav__item__label">Funds available after you arrive</span>
</a>
</li>
</ul>
</li>
<li class="uol-section-nav__item uol-section-nav__item--parent">
<h3 class="uol-section-nav__item__label">Applying</h3>
<ul class="uol-section-nav__sublist">
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/how_to_apply">
<span class="uol-section-nav__item__label">How to apply</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/accepted_qualifications">
<span class="uol-section-nav__item__label">Accepted qualifications</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/application_timetable">
<span class="uol-section-nav__item__label">Application timetable</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/writing_your_personal_statement">
<span class="uol-section-nav__item__label">Writing your personal statement</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/alternative_admissions">
<span class="uol-section-nav__item__label">Alternative admissions</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/care_leavers_and_estranged_students">
<span class="uol-section-nav__item__label">Care leavers and estranged students</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/applying_faqs">
<span class="uol-section-nav__item__label">Applying FAQs</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/transparency_data">
<span class="uol-section-nav__item__label">Transparency data</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/degree_outcomes_statement">
<span class="uol-section-nav__item__label">Degree outcomes statement</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/declaring_criminal_convictions">
<span class="uol-section-nav__item__label">Declaring criminal convictions</span>
</a>
</li>
</ul>
</li>
<li class="uol-section-nav__item uol-section-nav__item--parent">
<h3 class="uol-section-nav__item__label">Types of course</h3>
<ul class="uol-section-nav__sublist">
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/part-time_and_mature_students">
<span class="uol-section-nav__item__label">Part-time and mature students</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/joint_honours">
<span class="uol-section-nav__item__label">Joint honours</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/foundation_courses">
<span class="uol-section-nav__item__label">Foundation courses</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/intercalating_and_integrated_masters">
<span class="uol-section-nav__item__label">Intercalating and Integrated Masters</span>
</a>
</li>
</ul>
</li>
<li class="uol-section-nav__item uol-section-nav__item--parent">
<h3 class="uol-section-nav__item__label">Teachers and advisors</h3>
<ul class="uol-section-nav__sublist">
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/teachers_and_advisors">
<span class="uol-section-nav__item__label">Teachers and advisors overview</span>
</a>
</li>
<li class="uol-section-nav__item uol-section-nav__item--parent">
<h4 class="uol-section-nav__item__label">Supporting students</h4>
<ul class="uol-section-nav__sublist">
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/he_talks_and_workshops">
<span class="uol-section-nav__item__label">HE talks and workshops</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/subject-specific_outreach">
<span class="uol-section-nav__item__label">Subject-specific outreach</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/online_courses_for_schools">
<span class="uol-section-nav__item__label">Online courses for schools</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/live_webinars_for_schools_and_colleges">
<span class="uol-section-nav__item__label">Live webinars for schools and colleges</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/research_and_study_skills">
<span class="uol-section-nav__item__label">Research and study skills</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/alternative_admissions">
<span class="uol-section-nav__item__label">Alternative admissions</span>
</a>
</li>
</ul>
</li>
<li class="uol-section-nav__item uol-section-nav__item--parent">
<h4 class="uol-section-nav__item__label">Supporting teachers and advisors</h4>
<ul class="uol-section-nav__sublist">
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/teachers_and_advisors_cpd_webinars">
<span class="uol-section-nav__item__label">Teachers and advisors CPD webinars</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/talks_in_schools">
<span class="uol-section-nav__item__label">Talks in schools</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/intouniversity">
<span class="uol-section-nav__item__label">IntoUniversity</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/students_into_schools">
<span class="uol-section-nav__item__label">Students into schools</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/epq_virtual_conference">
<span class="uol-section-nav__item__label">EPQ Virtual Conference</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="uol-section-nav__item uol-section-nav__item--parent">
<h3 class="uol-section-nav__item__label">Parents and carers</h3>
<ul class="uol-section-nav__sublist">
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/supporting_your_son_or_daughter">
<span class="uol-section-nav__item__label">Supporting your son or daughter</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/tips_for_parents">
<span class="uol-section-nav__item__label">Tips for parents</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/parents_faqs">
<span class="uol-section-nav__item__label">Parents FAQs</span>
</a>
</li>
</ul>
</li>
</ul>
</nav>
# TODO
- [X] Fix z-index on local nav
- [X] Add escape to local nav and quicklinks
- [X] Fix nav widening when sub links open
- [ ] Improve default article with nav layout
- [ ] Provide person insight with/without examples
.uol-section-nav {
margin: 0;
@include media(">=uol-media-m") {
margin: 0;
}
@include media(">=uol-media-l") {
margin: $spacing-4 0 0;
}
.js & {
.uol-header & {
@include media(">=uol-media-l") {
display: none;
padding-left: $spacing-2;
}
}
}
}
.uol-section-nav--relocated {
.js & {
@include media(">=uol-media-l") {
display: block;
}
}
.uol-article-container & {
@extend .uol-col-l-3;
padding-left: $spacing-2;
}
}
.uol-section-nav__title {
@include media("<uol-media-l") {
margin: 0;
}
@include media(">=uol-media-l") {
margin-top: $spacing-2;
margin-bottom: $spacing-4;
}
}
.uol-section-nav__title__intro {
display: none;
@include media(">=uol-media-l") {
display: block;
font-size: 1rem;
}
}
.uol-section-nav__title__text {
display: none;
@include media(">=uol-media-l") {
display: block;
font-size: 1.5rem;
}
}
.uol-section-nav__toggle {
box-sizing: border-box;
width: 100%;
padding: $spacing-4;
background: $color-brand;
color: $color-white;
font-size: 1.125rem;
text-align: left;
border: none;
box-shadow:
0 10px 20px 0 rgba($color-black--dark, 0.15),
0 3px 6px 0 rgba($color-black--dark, 0.1);
&[aria-expanded="true"] {
box-shadow: none;
}
@include media(">=uol-media-l") {
display: none;
}
}
.uol-section-nav__toggle__icon {
position: relative;
display: inline-block;
width: 18px;
height: 2px;
top: -6px;
margin-right: $spacing-4;
background: $color-white;
transition: background 0.3s ease;
&::before,
&::after {
content: "";
display: block;
position: absolute;
width: inherit;
height: inherit;
background: $color-white;
transition: all 0.3s ease;
}
&::before {
top: -6px;
}
&::after {
top: 6px;
}
.uol-section-nav__toggle[aria-expanded="true"] & {
background: transparent;
&::before {
top: 0;
transform: rotate(-45deg);
}
&::after {
top: 0;
transform: rotate(45deg);
}
}
}
.uol-section-nav__list {
.js & {
@include font-size-responsive(1.125rem, 1.25rem);
list-style: none;
@include media("<uol-media-l") {
margin: 0;
padding: $spacing-2 $spacing-4 $spacing-6 $spacing-7;
box-shadow:
0 10px 20px 0 rgba($color-black--dark, 0.15),
0 3px 6px 0 rgba($color-black--dark, 0.1);
display: none;
}
@include media(">=uol-media-l") {
border-left: $spacing-1 solid $color-brand;
padding-left: $spacing-6;
}
}
}
.uol-section-nav__list--expanded {
.js & {
display: block;
}
}
.uol-section-nav__sublist {
.js & {
list-style: none;
padding: 0 0 0 $spacing-5;
display: none;
}
button[aria-expanded="true"] + & {
display: block;
}
}
.uol-section-nav__item {
}
.uol-section-nav__item--parent {
}
.uol-section-nav__item__label {
.no-js & {
margin: 0;
}
}
.uol-section-nav__link,
.uol-section-nav__branch-toggle {
.js & {
display: inline-block;
box-sizing: border-box;
position: relative;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: transparent;
color: $color-font;
border: none;
padding: $spacing-3 $spacing-1 $spacing-2;
margin-left: -$spacing-1;
text-align: left;
text-decoration: none;
transition: background 0.15s ease-in;
&:hover,
&:focus {
outline: 2px dotted transparent;
text-decoration: underline;
text-underline-offset: 6px;
text-decoration-color: $color-brand;
text-decoration-thickness: 4px;
}
&:focus-visible {
background-color: $color-brand--faded;
}
&[aria-current] {
&:not(:focus) {
color: $color-brand;
&:not(:hover) {
text-decoration: underline;
}
}
}
}
}
.uol-section-nav__branch-toggle {
overflow: visible;
svg {
position: absolute;
left: -#{$spacing-4 + $spacing-4};
top: $spacing-3;
transition: transform 0.1s ease;
fill: $color-font--dark;
}
&[aria-expanded="true"] {
svg {
transform: rotate(90deg) translateX(6.25%);
}
}
}
// Utilities
const getParents = (elem, selector) => {
// Element.matches() polyfill
if (!Element.prototype.matches) {
Element.prototype.matches =
Element.prototype.matchesSelector ||
Element.prototype.mozMatchesSelector ||
Element.prototype.msMatchesSelector ||
Element.prototype.oMatchesSelector ||
Element.prototype.webkitMatchesSelector ||
function(s) {
var matches = (this.document || this.ownerDocument).querySelectorAll(s),
i = matches.length;
while (--i >= 0 && matches.item(i) !== this) {}
return i > -1;
};
}
// Set up a parent array
var parents = [];
// Push each parent element to the array
for ( ; elem && elem !== document; elem = elem.parentNode ) {
if (selector) {
if (elem.matches(selector)) {
parents.push(elem);
}
continue;
}
parents.push(elem);
}
// Return our parent array
return parents;
};
export const uolSectionNavToggle = () => {
const sectionNavs = document.querySelectorAll('.uol-section-nav')
sectionNavs.forEach((sectionNav) => {
const sectionNavList = sectionNav.querySelector('.uol-section-nav__list')
const sectionHeading = sectionNav.querySelector('.uol-section-nav__title')
const sectionTitle = sectionHeading.querySelector('.uol-section-nav__title__text').innerText
const button = document.createElement('button')
button.type = 'button'
button.setAttribute('aria-expanded', false)
button.classList.add('uol-section-nav__toggle')
button.innerHTML = `<span class="uol-section-nav__toggle__icon"></span>${sectionTitle}`
sectionHeading.appendChild(button)
button.onclick = () => {
let expanded = button.getAttribute('aria-expanded') === 'true' || false
button.setAttribute('aria-expanded', !expanded)
sectionNavList.classList.toggle('uol-section-nav__list--expanded')
// On close, close any child lists
if (expanded) {
sectionNavList.querySelectorAll('ul button').forEach(
subButton => subButton.setAttribute('aria-expanded', 'false')
)
}
}
// Close on escape
window.addEventListener("keydown", function(event) {
if (event.key === 'Escape' || event.keyCode === 27) {
// Toggle button
button.setAttribute('aria-expanded', 'false')
// Close nav
sectionNavList.classList.remove('uol-section-nav__list--expanded')
// Close children - if button visible ie small screen
if (getComputedStyle(button).display !== 'none' ) {
sectionNavList.querySelectorAll('ul button').forEach(
subButton => subButton.setAttribute('aria-expanded', 'false')
)
}
}
}, true);
})
}
export const uolSectionNavTree = () => {
const svgChevronRight = `<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" focusable="false" aria-hidden="true">
<path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"></path>
</svg>`
const trees = document.querySelectorAll('.uol-section-nav')
trees.forEach( (tree) => {
const branches = tree.querySelectorAll('.uol-section-nav__item--parent')
branches.forEach((branch) => {
const label = branch.querySelector('.uol-section-nav__item__label')
label.outerHTML = `
<button class="uol-section-nav__branch-toggle" type="button" aria-expanded="false">
${svgChevronRight}
${label.innerText}
</button>
`
// Open parents if child is aria-current
const currentPage = branch.querySelector('[aria-current="page"]')
if (currentPage) {
const currentPageParents = getParents(currentPage, '.uol-section-nav__item--parent');
currentPageParents.forEach( (parent) => {
const parentButton = parent.querySelector('.uol-section-nav__branch-toggle')
if (parentButton) {
parentButton.setAttribute('aria-expanded', 'true')
}
})
}
const button = branch.querySelector('button')
button.onclick = () => {
let expanded = button.getAttribute('aria-expanded') === 'true' || false
button.setAttribute('aria-expanded', !expanded)
// On close, close any child lists
if (expanded) {
branch.querySelectorAll('ul button').forEach(
subButton => subButton.setAttribute('aria-expanded', 'false')
)
}
}
})
})
}
export const uolSectionNavMove = () => {
const sectionNavs = document.querySelectorAll('.uol-section-nav')
sectionNavs.forEach((sectionNav) => {
const main = document.getElementById('main')
const uolHeader = document.querySelector('.uol-header')
const sectionNavContainer = document.querySelector('.uol-side-nav-container')
if (main && sectionNavContainer) {
window.addEventListener('resize', () => {
if (window.innerWidth >= 1024) {
sectionNavContainer.classList.add('uol-side-nav-container--populated')
sectionNavContainer.insertAdjacentElement('afterbegin', sectionNav)
} else {
sectionNavContainer.classList.remove('uol-side-nav-container--populated')
uolHeader.insertAdjacentElement('afterend', sectionNav)
}
})
}
if (typeof(Event) === 'function') {
// modern browsers
window.dispatchEvent(new Event('resize'));
} else {
// for IE and other old browsers
// causes deprecation warning on modern browsers
var evt = window.document.createEvent('UIEvents')
evt.initUIEvent('resize', true, false, window, 0)
window.dispatchEvent(evt)
}
})
}
{
"section_nav": {
"title": "Undergraduate",
"items": [
{
"title": "Undergraduate overview",
"url": "/undergraduate/overview"
},
{
"title": "Academic experience",
"url": "/academic experience",
"items": [
{
"title": "Learning and teaching",
"url": "/learning_and_teaching"
},
{
"title": "Academic facilities",
"url": "/academic_facilities"
}
]
},
{
"title": "Enrichment opportunities",
"url": "/enrichment_opportunities",
"items": [
{
"title": "Study abroad",
"url": "/study_abroad"
},
{
"title": "Work experience",
"url": "/work_experience"
},
{
"title": "Clubs and societies",
"url": "/clubs_and_societies"
},
{
"title": "Student enterprise",
"url": "/student_enterprise"
}
]
},
{
"title": "Your future",
"url": "/your_future",
"items": [
{
"title": "Careers",
"url": "/careers"
},
{
"title": "Leeds for Life",
"url": "/leeds_for_life"
}
]
},
{
"title": "Campus life",
"url": "/campus_life",
"items": [
{
"title": "City life",
"url": "/city_life",
"items": [
{
"title": "City life overview",
"url": "/city_life/overview"
}
]
},
{
"title": "Wellbeing and support",
"url": "/wellbeing_and_support"
},
{
"title": "Sport and fitness",
"url": "/sport_and_fitness"
},
{
"title": "A global university",
"url": "/a_global_university"
}
]
},
{
"title": "Fees and costs",
"url": "/fees_and_costs",
"items": [
{
"title": "Undergraduate fees",
"url": "/undergraduate_fees"
},
{
"title": "Additional costs",
"url": "/additional_costs"
},
{
"title": "Living expenses",
"url": "/living_expenses"
},
{
"title": "Tuition fee liability",
"url": "/tuition_fee_liability"
},
{
"title": "Tuition fee payment schedule",
"url": "/tuition_fee_payment_schedule"
},
{
"title": "How to pay",
"url": "/how_to_pay"
},
{
"title": "Sponsored students",
"url": "/sponsored_students"
},
{
"title": "Paying for your accommodation",
"url": "/paying_for_your_accommodation"
}
]
},
{
"title": "Funding",
"url": "/funding",
"items": [
{
"title": "Funding overview",
"url": "/funding"
},
{
"title": "University scholarships and funding",
"url": "/university_scholarships_and_funding",
"items": [
{
"title": "Leeds financial support",
"url": "/leeds_financial_support",
"items": [
{
"title": "Leeds financial support eligibility",
"url": "/leeds_financial_support_eligibility",
"current": true
},
{
"title": "How much is it worth?",
"url": "/how_much_is_it_worth"
},
{
"title": "Choosing your support",
"url": "/choosing_your_support"
}
]
},
{
"title": "Scholarships | personal circumstances",
"url": "/scholarships_personal_circumstances",
"items": [
{
"title": "Scholarships",
"url": "/scholarships_personal_circumstances/scholarships"
},
{
"title": "Scholarships FAQs",
"url": "/scholarships_personal_circumstances/scholarships_faqs"
}
]
},
{
"title": "Scholarships | academic achievement",
"url": "/scholarships_academic_achievement"
}
]
},
{
"title": "Student loans and bursaries",
"url": "student_loans_and_bursaries",
"items": [
{
"title": "What help is available?",
"url": "/what_help_is_available"
},
{
"title": "Eligibility and applications",
"url": "/eligibility_and_applications"
},
{
"title": "Tuition fee loans for new part-time students",
"url": "/tuition_fee_loans_for_new_part-time_students"
},
{
"title": "NHS funding",
"url": "/nhs_funding"
},
{
"title": "Financial support for Muslim students",
"url": "/financial_support_for_muslim_students"
}
]
},
{
"title": "International funding",
"url": "/international_funding"
},
{
"title": "Government part-time maintenance loans",
"url": "/government_part-time_maintenance_loans"
},
{
"title": "Extra financial help",
"url": "/extra_financial_help"
},
{
"title": "Funds available after you arrive",
"url": "/funds_available_after_you_arrive"
}
]
},
{
"title": "Applying",
"url": "/applying",
"items": [
{
"title": "How to apply",
"url": "/how_to_apply"
},
{
"title": "Accepted qualifications",
"url": "/accepted_qualifications"
},
{
"title": "Application timetable",
"url": "/application_timetable"
},
{
"title": "Writing your personal statement",
"url": "/writing_your_personal_statement"
},
{
"title": "Alternative admissions",
"url": "/alternative_admissions"
},
{
"title": "Care leavers and estranged students",
"url": "/care_leavers_and_estranged_students"
},
{
"title": "Applying FAQs",
"url": "/applying_faqs"
},
{
"title": "Transparency data",
"url": "/transparency_data"
},
{
"title": "Degree outcomes statement",
"url": "/degree_outcomes_statement"
},
{
"title": "Declaring criminal convictions",
"url": "/declaring_criminal_convictions"
}
]
},
{
"title": "Types of course",
"url": "/types_of_course",
"items": [
{
"title": "Part-time and mature students",
"url": "/part-time_and_mature_students"
},
{
"title": "Joint honours",
"url": "/joint_honours"
},
{
"title": "Foundation courses",
"url": "/foundation_courses"
},
{
"title": "Intercalating and Integrated Masters",
"url": "/intercalating_and_integrated_masters"
}
]
},
{
"title": "Teachers and advisors",
"url": "/teachers_and_advisors",
"items": [
{
"title": "Teachers and advisors overview",
"url": "/teachers_and_advisors"
},
{
"title": "Supporting students",
"url": "HE talks and workshops",
"items": [
{
"title": "HE talks and workshops",
"url": "/he_talks_and_workshops"
},
{
"title": "Subject-specific outreach",
"url": "/subject-specific_outreach"
},
{
"title": "Online courses for schools",
"url": "/online_courses_for_schools"
},
{
"title": "Live webinars for schools and colleges",
"url": "/live_webinars_for_schools_and_colleges"
},
{
"title": "Research and study skills",
"url": "/research_and_study_skills"
},
{
"title": "Alternative admissions",
"url": "/alternative_admissions"
}
]
},
{
"title": "Supporting teachers and advisors",
"url": "/supporting_teachers_and_advisors",
"items": [
{
"title": "Teachers and advisors CPD webinars",
"url": "/teachers_and_advisors_cpd_webinars"
},
{
"title": "Talks in schools",
"url": "/talks_in_schools"
},
{
"title": "IntoUniversity",
"url": "/intouniversity"
},
{
"title": "Students into schools",
"url": "/students_into_schools"
},
{
"title": "EPQ Virtual Conference",
"url": "/epq_virtual_conference"
}
]
}
]
},
{
"title": "Parents and carers",
"url": "/parents_and_carers",
"items": [
{
"title": "Supporting your son or daughter",
"url": "/supporting_your_son_or_daughter"
},
{
"title": "Tips for parents",
"url": "/tips_for_parents"
},
{
"title": "Parents FAQs",
"url": "/parents_faqs"
}
]
}
]
}
}