Add progressive enhancement to service switcher

- by default, the menu is open
- if Javascript is enabled/loaded, the links are hidden, and visual cues (▶) to
  show that it can be opened are added
- clicking it opens and closes it
This commit is contained in:
Chris Hill-Scott
2016-01-11 16:23:34 +00:00
parent 732efd25c7
commit 4cb535a2e1
6 changed files with 82 additions and 5 deletions

View File

@@ -0,0 +1,53 @@
%dropdown,
.dropdown {
position: relative;
.js-enabled &-toggle {
color: $link-colour;
position: relative;
padding-left: 20px;
cursor: pointer;
&:hover {
color: $link-hover-colour;
text-decoration: underline;
}
&::before {
content: '';
font-size: 12px;
position: absolute;
top: 1px;
left: -1px;
}
}
.js-closed &-toggle::before {
content: '';
left: -1px;
top: 2px;
}
a {
display: block;
.js-enabled & {
padding-left: 20px;
}
}
&.js-closed {
a {
left: -9999em;
position: absolute;
}
}
}

View File

@@ -1,7 +1,7 @@
.management-navigation {
@extend %site-width-container;
@include core-19();
@include core-16();
border-bottom: 1px solid $border-colour;
padding: 10px 0 8px;