College of Business Style Guide

Left Navigation 

<nav class="subnav" aria-label="left navigation">
    <h2><button>In This Section</button></h2>
    <ul class="first-menu">
        <li>
            <a href="#" class="is-active">
                Active Page
            </a>
        </li>
        <li>
            <a href="#" class="">
                Other Page
            </a>
        </li>
        <li>
            <a href="#" class="">
                Other Page
            </a>
        </li>
    </ul>
</nav>
 
<nav class="subnav" aria-label="left navigation">
  {% block title %}
    <h2><button>{{ title }}</button></h2>
  {% endblock title %}
  {% block cms_override_desktop %}
    <ul class="first-menu">
    {% for nav_item in items %}
      <li>
        <a href="{{ nav_item.url }}" class="{{ nav_item.is_active ? 'is-active' }}">
          {{ nav_item.title }}
        </a>
      </li>
    {% endfor %}
    </ul>
  {% endblock cms_override_desktop %}
</nav>
 
{
  "title": "In This Section",
  "items": [
    {
      "title": "Active Page",
      "url": "#",
      "is_active": true
    },
    {
      "title": "Other Page",
      "url": "#"
    },
    {
      "title": "Other Page",
      "url": "#"
    }
  ]
}
  • Content: 
    var Drupal = Drupal || {};
(function ($, Drupal) {
  Drupal.behaviors = Drupal.behaviors || {};
  Drupal.behaviors.lehigh_business_leftnav = {
    attach: function(context) {
      var $subnav = $('.subnav-select', context);
      if ($subnav.length) {
        $('button', $subnav).click(function(e) {
          e.preventDefault();
          window.location.href = $('select', $subnav).val();
        });
        // @todo Loop over options and select the current page, if present.
      }

      var sw = document.body.clientWidth;
      if (sw < 769) {
        $('.subnav > ul.menu:first-of-type').addClass('mobile-menu');
      }

      $(window).resize(function () {
        var sw_resize = document.body.clientWidth;
        if (sw_resize < 769) {
          $('.subnav > ul.menu:first-of-type').addClass('mobile-menu');
        }
        else {
          $('.subnav > ul.menu:first-of-type').removeClass('mobile-menu');
        }
      });

      $('.subnav h2 button').click(function () {
        $('.mobile-menu').toggleClass('open');
        $('.subnav h2 button').toggleClass('rotate');
      });
    }
  };
})(jQuery, Drupal);
  • URL: /components/raw/leftnav/leftnav.js
  • Filesystem Path: components/02-pieces/03-menus/05-leftnav/leftnav.js
  • Size: 1.1 KB
  • Content: 
    .subnav {
  background-color: $grey_lightest;
  padding: $space;
  width: 100%;
  margin: 0 0 $space-triple 0;

  @media only screen and (min-width: $break-desktop) {
    width: 25%;
    margin: 0 $space-triple 0 0;
  }

  &~ {
    .main-content {
      width: 100%;

      @media only screen and (min-width: $break-desktop) {
        width: 75%;
      }
    }
  }

  h2 {
    text-align: left;

    @media only screen and (min-width: $break-desktop) {
      text-align: center;
    }

    button {
      font-weight: bold;
      font-size: 1.5rem;
      border: 0;
      padding: 0;
      cursor: pointer;

      @media only screen and (min-width: $break-desktop) {
        font-weight: normal;
        font-size: 1rem;
        cursor: initial;
      }

      @media only screen and (max-width: $break-desktop) {
        &::before {
          font-weight: normal;
          font-family: $font-awesome;
          content: '\f078';
          margin: 0 10px 0 0;
          display: inline-block;
          -webkit-transform: rotate(0deg);
          -moz-transform: rotate(0deg);
          -o-transform: rotate(0deg);
          -ms-transform: rotate(0deg);
          transform: rotate(0deg);
          -webkit-transition: .5s;
          -moz-transition: .5s;
          -o-transition: .5s;
          transition: .5s;
        }
      }


      &.rotate {
        @media only screen and (max-width: $break-desktop) {
          &::before {
            display: inline-block;
            -webkit-transform: rotate(540deg);
            -moz-transform: rotate(540deg);
            -o-transform: rotate(540deg);
            -ms-transform: rotate(540deg);
            transform: rotate(540deg);
            -webkit-transition: .75s;
            -moz-transition: .75s;
            -o-transition: .75s;
            transition: .75s;
          }
        }
      }
    }
  }

  ul {
    @include reset-list-nav;

    li {
      margin: $space 0 $space $space;

      a {
        font-size: 1rem;
        color: $grey_darkest;

        &.is-active {
        font-weight: bold;
        }
      }
    }
  }
  @media only screen and (max-width: $break-desktop) {
    > {
      ul {
        &.menu {
          &:first-of-type {
            margin: -10px 0 10px 0;
            max-height: 0;
            overflow: hidden;
            transition: max-height .35s ease-out;

            &.open {
              height: auto;
              max-height: 1500px;
              transition: max-height .5s ease-in !important;
            }
          }
        }
      }
    }
  }
}
  • URL: /components/raw/leftnav/leftnav.scss
  • Filesystem Path: components/02-pieces/03-menus/05-leftnav/leftnav.scss
  • Size: 2.6 KB

No notes defined.