University of Derby

Section Navigation: First child has sub items 

<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 class="active">
                    <a href="#">Halls of residence</a>
                    <ul>
                        <li><a href="#">Flamstead Court</a></li>
                        <li><a href="#">Cathederal Court</a></li>
                        <li><a href="#">Agard Court</a></li>
                        <li><a href="#">Nunnery Court</a></li>
                        <li><a href="#">Peak Court</a></li>
                        <li><a href="#">Princess Alice Court</a></li>
                        <li><a href="#">Sir Peter Hilton Court</a></li>
                        <li><a href="#">High Peak Halls (Buxton)</a></li>
                        <li><a href="#">Chesterfield Accomodation</a></li>
                        <li><a href="#">Room Types</a></li>
                    </ul>
                </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": "#",
      "subItems": [
        {
          "label": "Flamstead Court",
          "href": "#"
        },
        {
          "label": "Cathederal Court",
          "href": "#"
        },
        {
          "label": "Agard Court",
          "href": "#"
        },
        {
          "label": "Nunnery Court",
          "href": "#"
        },
        {
          "label": "Peak Court",
          "href": "#"
        },
        {
          "label": "Princess Alice Court",
          "href": "#"
        },
        {
          "label": "Sir Peter Hilton Court",
          "href": "#"
        },
        {
          "label": "High Peak Halls (Buxton)",
          "href": "#"
        },
        {
          "label": "Chesterfield Accomodation",
          "href": "#"
        },
        {
          "label": "Room Types",
          "href": "#"
        }
      ]
    },
    {
      "label": "Applying for halls",
      "href": "#"
    },
    {
      "label": "Moving In",
      "href": "#"
    },
    {
      "label": "Once you are here",
      "href": "#"
    },
    {
      "label": "FAQ’s",
      "href": "#"
    }
  ]
}
  • Content: 
    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');
  • URL: /components/raw/section-navigation/section-navigation.js
  • Filesystem Path: components/components/section-navigation/section-navigation.js
  • Size: 577 Bytes
  • Content: 
    .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;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
  • URL: /components/raw/section-navigation/section-navigation.scss
  • Filesystem Path: components/components/section-navigation/section-navigation.scss
  • Size: 5.1 KB

Section Navigation

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.

Key Features

  • Sticky; sticks to the top of the window when scrolled past
  • Height; max-height constricted so the bottom of the menu never overflows out of the viewport
  • Rotates; the menu anchor rotates on desktop and above to sit at 90 degrees anti-clockwise to the main content

Properties

  • title [required, string]
  • items [required, Array of Item]

Item

  • label [required, string]
  • href [required, string]
  • subItems [optional, Array of subItem]

subItem

  • label [required, string]
  • href [required, string]