<nav class="section-navigation">
<a href="#" class="section-navigation-link">In this section</a>
<div class="section-navigation-wrapper">
<i class="uod-icons uod-icons-cross"></i>
<!-- T4 generated syntax -->
<div class="section-navigation-title">Accommodation</div>
<div class="section-navigation-wrapper-inner">
<ul class="section-navigation-wrapper-inner-ul">
<li>
<a href="#">Halls of residence</a>
</li>
<li>
<a href="#">Applying for halls</a>
</li>
<li>
<a href="#">Moving In</a>
</li>
<li>
<a href="#">Once you are here</a>
</li>
<li>
<a href="#">FAQ’s</a>
</li>
</ul>
</div>
<!-- end of T4 generated syntax -->
</div>
</nav>
<nav class="section-navigation">
<a href="#" class="section-navigation-link">In this section</a>
<div class="section-navigation-wrapper">
<i class="uod-icons uod-icons-cross"></i>
<!-- T4 generated syntax -->
<div class="section-navigation-title">{{ title|raw }}</div>
<div class="section-navigation-wrapper-inner">
<ul class="section-navigation-wrapper-inner-ul">
{% for item in items %}
<li{% if item.subItems %} class="active"{% endif %}>
<a href="{{ item.href }}">{{ item.label|raw }}</a>
{% if item.subItems %}
<ul>
{% for subItem in item.subItems %}
<li><a href="{{ subItem.href }}">{{ subItem.label|raw }}</a></li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
</div>
<!-- end of T4 generated syntax -->
</div>
</nav>
{#
This is an example of the HTML T4 generates for a section navigation list
<!-- T4 generated syntax -->
<div class="">
<ul>
<li class="active">
<a href="/campus/campuses/" class="cufon">Our Campuses</a>
<ul>
<li><a href="/campus/campuses/derby/" class="">Derby Campus</a></li>
<li><a href="/campus/campuses/buxton/" class="">Buxton Campus</a></li>
<li class="last"><a href="/campus/campuses/chesterfield/" class="">Chesterfield Campus</a></li>
</ul>
</li>
<li><a href="/virtual-campus/" class="cufon">Virtual campus</a></li>
<li><a href="/campus/accommodation/" class="cufon">Accommodation</a></li>
<li><a href="/campus/preparing-to-go-university/" class="cufon">Preparing to go to University</a></li>
<li><a href="/campus/first-weeks/" class="cufon">First weeks</a></li>
<li><a href="/campus/facilities/" class="cufon">Facilities</a></li>
<li><a href="/study/undergraduate/why-choose-derby/this-is-our-city/" class="cufon">Our city</a></li>
<li><a href="/campus/library/" class="cufon">Library</a></li>
<li><a href="/campus/sport/" class="cufon">Sport</a></li>
<li><a href="/campus/studentsunion/" class="cufon">Union of Students</a></li>
<li><a href="/campus/support/" class="cufon">Student support</a></li>
<li><a href="/campus/faith-religion/" class="cufon">Faith and religion</a></li>
<li class="last"><a href="/study/students/" class="cufon">What our students say</a></li>
</ul>
</div>
<!-- end of T4 generated syntax -->
#}
{
"title": "Accommodation",
"items": [
{
"label": "Halls of residence",
"href": "#"
},
{
"label": "Applying for halls",
"href": "#"
},
{
"label": "Moving In",
"href": "#"
},
{
"label": "Once you are here",
"href": "#"
},
{
"label": "FAQ’s",
"href": "#"
}
]
}
import $ from 'jquery'
import stickybits from 'stickybits'
// Hide the "In this section" navigation element if it's empty
if (!$(".section-navigation-wrapper-inner-ul").length) {
$(".section-navigation").hide();
}
$('.section-navigation-wrapper').hide();
$('.section-navigation-link').click(function (e) {
e.preventDefault();
$('.section-navigation-wrapper').slideToggle();
});
$('.section-navigation-wrapper > .uod-icons-cross').click(function (e) {
e.preventDefault();
$('.section-navigation-wrapper').slideUp();
});
stickybits('.section-navigation');
.section-navigation {
background: $black;
max-width: 290px;
position: relative;
@include margin-small;
z-index: 3;
width: 290px;
@include for-tablet-portrait-up {
margin-top: 20px;
}
@include for-desktop-up {
lost-offset: 2/16;
}
.section-navigation-wrapper-inner {
max-height: calc(100vh - 46px - 49px);
overflow-y: auto;
overflow-x: hidden;
}
&-title {
padding: 15px 40px 15px 15px;
}
&-link {
background: $black;
color: $white;
@include header;
@include disable-underlines;
font-size: responsive 16px 18px;
font-range: $mobile-portrait $tablet-portrait;
padding: 10px 15px 10px 40px;
display: block;
position: relative;
height: 46px;
&:link {
color: $white;
}
&:before {
@extend %uod-icons;
content: $uod-icons-menu;
font-size: 18px;
position: absolute;
top: 50%;
left: 15px;
margin-top: -9px;
}
}
&-wrapper {
background: $black;
box-shadow: rgba($black, 0.3) 1px 1px 10px;
position: absolute;
top: 100%;
left: 0;
right: 0;
color: $white;
@include header;
@include disable-underlines;
font-size: responsive 16px 18px;
font-range: $mobile-portrait $tablet-portrait;
@include margin-small;
border-top: 1px solid $white;
&-show{
display: block !important;
}
> .uod-icons-cross {
font-size: 24px;
color: $white;
position: absolute;
right: 2px;
top: 4px;
padding: 8px;
cursor: pointer;
@include hover-rotate;
}
&-inner {
&-ul {
padding-left: 0;
margin-bottom: 0;
> li:last-child {
> a, > a:link {
padding-bottom: 20px;
}
}
}
ul {
margin-top: 0;
list-style-type: none;
li {
margin-bottom: 0;
border-left: 10px solid $green-blue;
background: $white;
font-weight: normal;
list-style-type: none;
a,
a:link {
@include body-font;
@include disable-underlines;
font-family: $large-body-font;
display: block;
color: $text-black;
transition: all .3s $default-animation-curve;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
&:before {
content: "";
position: absolute;
height: 1px;
right: 20px;
left: 0;
top: -1px;
border: 1px dashed $dark-grey;
z-index: 2;
transition: all .3s $default-animation-curve;
}
&:hover {
background: $white;
font-weight: bold;
&:before {
visibility: hidden;
}
}
}
/* hide the border of the next element on hover */
&:hover + li > a:before {
visibility: hidden;
}
/* hide border of first child li and the next li to an active li */
&:first-child, &.active + li {
> a, > a:link {
&:before {
visibility: hidden;
}
}
}
> a, > a:link {
background: rgba($black, 0.05);
padding-left: 34px;
&:before {
left: 34px;
}
}
ul {
padding-left: 0;
li {
> a, > a:link {
background: rgba($black, 0.025);
padding-left: 40px;
&:before {
left: 40px;
}
}
}
}
}
}
}
}
}
The section navigation component is a menu that allows a user to navigate within the pages of a section that are beneath the levels of the main menu.
The navigation will recurse 2 levels in the current section.