Skip to content

Commit

Permalink
Begin implementing desktop child menu buttons.
Browse files Browse the repository at this point in the history
Still need to figure out focus placement for heavily nested child menus.
  • Loading branch information
kimisgold committed Dec 6, 2024
1 parent 2e87bce commit b362181
Show file tree
Hide file tree
Showing 4 changed files with 87 additions and 47 deletions.
2 changes: 1 addition & 1 deletion asset/css/style.css

Large diffs are not rendered by default.

63 changes: 51 additions & 12 deletions asset/js/default.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
(function($) {

function fixIframeAspect() {
$('iframe').each(function () {
var aspect = $(this).attr('height') / $(this).attr('width');
Expand All @@ -20,17 +21,41 @@
}
}

var toggleChildNav = function(childMenu, childToggle, expandString, collapseString) {
childMenu.toggleClass('open');
childToggle.toggleClass('open');
if (childMenu.hasClass('open')) {
childToggle.attr('aria-label', collapseString);
} else {
childToggle.attr('aria-label', expandString);
}
};

var closeChildNav = function(childMenu, childToggle, expandString) {
childMenu.removeClass('open');
childToggle.removeClass('open');
childToggle.attr('aria-label', expandString);
};

var openChildNav = function(childMenu, childToggle, collapseString) {
childMenu.addClass('open');
childToggle.addClass('open');
childToggle.attr('aria-label', collapseString);
};

$(document).ready(function() {
$('header nav').addClass('closed');
var navElement = $('header nav');
var expandString = Omeka.jsTranslate('Expand');
var collapseString = Omeka.jsTranslate('Collapse');

$('header nav').click(function() {
navElement.addClass('closed');

navElement.click(function() {
$(this).toggleClass('open').toggleClass('closed');
});

var expandString = Omeka.jsTranslate('Expand');
var collapseString = Omeka.jsTranslate('Collapse');

$('header nav ul ul').each(function(){
navElement.find('ul ul').each(function(){
var childMenu = $(this);
var parentItem = childMenu.parent('li');
var toggleButton = $('<button type="button" class="child-toggle"></button>');
Expand All @@ -40,16 +65,30 @@
parentItem.find('.parent-link').append(toggleButton);
});

$('header nav').on('click', '.child-toggle', function(e) {
navElement.on('click', '.child-toggle', function(e) {
e.stopPropagation();
var childToggle = $(this);
var childMenu = childToggle.parents('.parent').first().find('ul').first();
childMenu.toggleClass('open');
if (childMenu.hasClass('open')) {
childToggle.attr('aria-label', collapseString);
} else {
childToggle.attr('aria-label', expandString);
}
toggleChildNav(childMenu, childToggle, expandString, collapseString);
});

navElement.on('mouseenter', '.parent', function() {
$(this).find('.child-toggle').addClass('open');
});

navElement.on('mouseleave', '.parent', function() {
$(this).find('.child-toggle').removeClass('open');
});

navElement.on('keydown', '.open li:last-child a:only-child', function(e) {
if (e.keyCode = "Tab" && !e.shiftKey) {
var parentLi = $(this).parents('.parent');
e.preventDefault();
var childMenu = $(this).parents('ul');
var childToggle = parentLi.find('.child-toggle');
closeChildNav(childMenu, childToggle, expandString);
parentLi.next().find('a').first().focus();
}
});

// Maintain iframe aspect ratios
Expand Down
65 changes: 31 additions & 34 deletions asset/sass/_desktop.scss
Original file line number Diff line number Diff line change
Expand Up @@ -169,33 +169,28 @@ header nav ul.navigation {
}

& > li > ul {
position: absolute;
top: 100%;
left: -9999px;
background-color: #fff;
padding: 0;
list-style: none;
width: 100%;
padding: ($spacing-m - 1px) 0 ($spacing-s - 1px);
display: flex;
flex-direction: row;
flex-flow: row wrap;
z-index: 1;
}

ul ul {
height: 0;
display: none;
}

& > li:hover > ul {
& > li:hover > ul,
.parent ul.open {
@include container;
padding: $spacing-m (2 * $spacing-l);
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: #fff;
list-style: none;
width: 100%;
padding: ($spacing-m - 1px) (2 * $spacing-l);
border-bottom: 0;
border-color: $light;
height: auto;
overflow: visible;
display: flex;
flex-direction: row;
flex-flow: row wrap;
z-index: 1;

&:after {
content: "";
Expand All @@ -215,12 +210,11 @@ header nav ul.navigation {
width: 25%;
font-size: .75 * $base-font-size;
font-weight: bold;
padding-bottom: $spacing-l;
}

& > li > ul > li ul {
font-weight: normal;
padding: 0;
padding-left: $spacing-m;
list-style-type: none;
height: auto;
}
Expand All @@ -230,35 +224,38 @@ header nav ul.navigation {
}
}

header nav > ul ul li {
height: auto;
overflow: visible;
}

header nav > ul > li > a {
margin: $spacing-s;
}

header nav > ul > li > .parent-link {
display: inline-block;
display: inline-flex;
width: 100%;
}

header nav > ul > li > .parent-link > a {
margin: $spacing-s;
width: 100%;
header nav ul.open > li {
border-top: 0;
}

/* All top-level nav items with siblings are parent items and get an arrow. */
header nav > ul > li > .parent-link a:after {
font-family: "Font Awesome 5 Free";
content: "\f107";
font-weight: 900;
display: inline-block;
margin-left: $spacing-s;
header nav > ul > li > .parent-link > a {
margin: $spacing-s 0 $spacing-s $spacing-s;
width: calc(100% - #{$spacing-l});
}

header nav > ul li:hover ul li {
height: auto;
header nav ul .child-toggle {
display: inline-block;
padding: 0;
border-left: 0;
width: $spacing-l;
color: $link;
}

.child-toggle {
header nav .parent .parent .child-toggle {
display: none;
}

Expand Down
4 changes: 4 additions & 0 deletions asset/sass/_screen.scss
Original file line number Diff line number Diff line change
Expand Up @@ -303,6 +303,10 @@ header nav ul {
content: "\f105";
font-weight: 900;
}

&.open:before {
content: "\f107";
}
}
}

Expand Down

0 comments on commit b362181

Please sign in to comment.