Skip to content
Snippets Groups Projects
Commit 0f0bc70a authored by Brian Canini's avatar Brian Canini
Browse files

main menu 

- updating styles so that menu appears correct from the outset before a11y script runs
- removing js timer that hides menu
parent 9f0f4336
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
web/themes/asc_bootstrap/assets/sass/components/_menu.scss
+ 51
− 34
View file @ 0f0bc70a
......@@ -4,11 +4,12 @@
#main-nav {
background-color: #373535;
position: -webkit-sticky;
position: sticky;
z-index: 50;
position: absolute;
left: -9000px;
@media (max-width: 768px) {
position: inherit;
display: block;
}
}
......@@ -184,62 +185,71 @@
.bux-container {
.a11y-navbar {
.asc-main-menu {
padding: 0 !important;
background-color: transparent !important;
.a11y-navbar-menubar {
.menu--main {
font-weight: 400 !important;
float: left;
.bux-menu__item {
margin: 0 !important;
display: inline-block;
.bux-menu__link {
border-bottom: none !important;
padding: 0.75em 1em !important;
}
}
color: $white !important;
min-width: 0 !important;
text-transform: uppercase;
padding: 10px 12px !important;
.a11y-navbar-menuitem {
color: $white !important;
min-width: 0 !important;
text-transform: uppercase;
padding: 10px 12px !important;
&:after {
display: none;
}
&:after {
display: none;
}
&:hover:after {
display: block;
left: 50%;
bottom: 0;
right: revert !important;
top: revert !important;
margin: 0 0 0 -8px;
border-bottom: 7px solid #E0E0E0;
border-left: 8px solid transparent !important;
border-right: 8px solid transparent !important;
border-top: none !important;
transform: rotate(0deg) !important;
}
&:hover:after {
display: block;
left: 50%;
bottom: 0;
right: revert !important;
top: revert !important;
margin: 0 0 0 -8px;
border-bottom: 7px solid #E0E0E0;
border-left: 8px solid transparent !important;
border-right: 8px solid transparent !important;
border-top: none !important;
transform: rotate(0deg) !important;
}
&:hover {
background: rgba(216,216,216,0.25);
border-top: none !important;
}
&:hover {
background: rgba(216,216,216,0.25);
border-top: none !important;
&:focus {
background: rgba(216,216,216,0.25);
}
}
&:focus {
background: rgba(216,216,216,0.25);
.asc-submenu {
height: 1px;
margin: -1px;
overflow: hidden;
position: absolute;
width: 1px;
}
}
.a11y-navbar-menu-open {
.asc-submenu.a11y-navbar-menu-open {
padding: 0 !important;
width: 12em !important;
background: $menu-gray !important;
top: 3em !important;
height: 100%;
margin: 0;
overflow: inherit;
.bux-menu__item {
margin: 0 !important;
......@@ -264,7 +274,14 @@
color: $filter-color-hover !important;
}
.a11y-navbar-menu-open {
.bux-menu__item {
.bux-menu__link {
color: $filter-color-hover !important;
min-width: 44px !important;
}
}
.asc-submenu.a11y-navbar-menu-open {
width: 100% !important;
.a11y-navbar-submenu {
......
web/themes/asc_bootstrap/css/style.css
+ 60
− 47
View file @ 0f0bc70a
......@@ -8140,11 +8140,12 @@ article .field--name-body {
#main-nav {
background-color: #373535;
z-index: 50;
position: absolute;
left: -9000px; }
position: -webkit-sticky;
position: sticky;
z-index: 50; }
@media (max-width: 768px) {
#main-nav {
position: inherit;
display: block; } }
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
......@@ -8265,76 +8266,88 @@ article .field--name-body {
#main-nav-menubar-instructions p {
color: #ffffff; }
.bux-container .a11y-navbar {
.bux-container .asc-main-menu {
padding: 0 !important;
background-color: transparent !important; }
.bux-container .a11y-navbar .a11y-navbar-menubar {
.bux-container .asc-main-menu .menu--main {
font-weight: 400 !important;
float: left; }
.bux-container .a11y-navbar .a11y-navbar-menubar .bux-menu__item {
margin: 0 !important; }
.bux-container .a11y-navbar .a11y-navbar-menubar .bux-menu__item .bux-menu__link {
.bux-container .asc-main-menu .menu--main .bux-menu__item {
margin: 0 !important;
display: inline-block; }
.bux-container .asc-main-menu .menu--main .bux-menu__item .bux-menu__link {
border-bottom: none !important;
padding: 0.75em 1em !important; }
.bux-container .a11y-navbar .a11y-navbar-menubar .a11y-navbar-menuitem {
color: #ffffff !important;
min-width: 0 !important;
text-transform: uppercase;
padding: 10px 12px !important; }
.bux-container .a11y-navbar .a11y-navbar-menubar .a11y-navbar-menuitem:after {
display: none; }
.bux-container .a11y-navbar .a11y-navbar-menubar .a11y-navbar-menuitem:hover:after {
display: block;
left: 50%;
bottom: 0;
right: revert !important;
top: revert !important;
margin: 0 0 0 -8px;
border-bottom: 7px solid #E0E0E0;
border-left: 8px solid transparent !important;
border-right: 8px solid transparent !important;
border-top: none !important;
transform: rotate(0deg) !important; }
.bux-container .a11y-navbar .a11y-navbar-menubar .a11y-navbar-menuitem:hover {
background: rgba(216, 216, 216, 0.25);
border-top: none !important; }
.bux-container .a11y-navbar .a11y-navbar-menubar .a11y-navbar-menuitem:focus {
background: rgba(216, 216, 216, 0.25); }
.bux-container .a11y-navbar .a11y-navbar-menubar .a11y-navbar-menu-open {
padding: 0.75em 1em !important;
color: #ffffff !important;
min-width: 0 !important;
text-transform: uppercase;
padding: 10px 12px !important; }
.bux-container .asc-main-menu .menu--main .bux-menu__item .bux-menu__link:after {
display: none; }
.bux-container .asc-main-menu .menu--main .bux-menu__item .bux-menu__link:hover:after {
display: block;
left: 50%;
bottom: 0;
right: revert !important;
top: revert !important;
margin: 0 0 0 -8px;
border-bottom: 7px solid #E0E0E0;
border-left: 8px solid transparent !important;
border-right: 8px solid transparent !important;
border-top: none !important;
transform: rotate(0deg) !important; }
.bux-container .asc-main-menu .menu--main .bux-menu__item .bux-menu__link:hover {
background: rgba(216, 216, 216, 0.25);
border-top: none !important; }
.bux-container .asc-main-menu .menu--main .bux-menu__item .bux-menu__link:focus {
background: rgba(216, 216, 216, 0.25); }
.bux-container .asc-main-menu .menu--main .bux-menu__item .asc-submenu {
height: 1px;
margin: -1px;
overflow: hidden;
position: absolute;
width: 1px; }
.bux-container .asc-main-menu .menu--main .asc-submenu.a11y-navbar-menu-open {
padding: 0 !important;
width: 12em !important;
background: #E0E0E0 !important;
top: 3em !important; }
.bux-container .a11y-navbar .a11y-navbar-menubar .a11y-navbar-menu-open .bux-menu__item {
top: 3em !important;
height: 100%;
margin: 0;
overflow: inherit; }
.bux-container .asc-main-menu .menu--main .asc-submenu.a11y-navbar-menu-open .bux-menu__item {
margin: 0 !important; }
.bux-container .a11y-navbar .a11y-navbar-menubar .a11y-navbar-menu-open .bux-menu__item a[aria-haspopup=true]:after {
.bux-container .asc-main-menu .menu--main .asc-submenu.a11y-navbar-menu-open .bux-menu__item a[aria-haspopup=true]:after {
right: 1em !important;
top: 1.25em !important; }
.bux-container .a11y-navbar .a11y-navbar-menubar .a11y-navbar-menu-open .bux-menu__item .a11y-navbar-submenu {
.bux-container .asc-main-menu .menu--main .asc-submenu.a11y-navbar-menu-open .bux-menu__item .a11y-navbar-submenu {
top: 0 !important; }
@media (max-width: 768px) {
.bux-container .a11y-navbar .a11y-navbar-menubar {
.bux-container .asc-main-menu .menu--main {
float: none;
font-weight: 700 !important; }
.bux-container .a11y-navbar .a11y-navbar-menubar .a11y-navbar-menuitem {
.bux-container .asc-main-menu .menu--main .a11y-navbar-menuitem {
color: #212325 !important; }
.bux-container .a11y-navbar .a11y-navbar-menubar .a11y-navbar-menu-open {
.bux-container .asc-main-menu .menu--main .bux-menu__item .bux-menu__link {
color: #212325 !important;
min-width: 44px !important; }
.bux-container .asc-main-menu .menu--main .asc-submenu.a11y-navbar-menu-open {
width: 100% !important; }
.bux-container .a11y-navbar .a11y-navbar-menubar .a11y-navbar-menu-open .a11y-navbar-submenu .bux-menu__item a {
.bux-container .asc-main-menu .menu--main .asc-submenu.a11y-navbar-menu-open .a11y-navbar-submenu .bux-menu__item a {
padding-left: 3em !important;
color: #212325 !important; }
.bux-container .a11y-navbar .a11y-navbar-menubar .a11y-navbar-menu-open .a11y-navbar-submenu .bux-menu__item .bux-menu__item a {
.bux-container .asc-main-menu .menu--main .asc-submenu.a11y-navbar-menu-open .a11y-navbar-submenu .bux-menu__item .bux-menu__item a {
padding-left: 4em !important;
color: #212325 !important; }
.bux-container .a11y-navbar .a11y-navbar-menubar .a11y-navbar-menu-open .a11y-navbar-submenu .bux-menu__item .bux-menu__item .bux-menu__item a {
.bux-container .asc-main-menu .menu--main .asc-submenu.a11y-navbar-menu-open .a11y-navbar-submenu .bux-menu__item .bux-menu__item .bux-menu__item a {
padding-left: 5em !important;
color: #212325 !important; }
.bux-container .a11y-navbar .a11y-navbar-menubar .a11y-navbar-menu-open .bux-menu__item a {
.bux-container .asc-main-menu .menu--main .asc-submenu.a11y-navbar-menu-open .bux-menu__item a {
padding-left: 2em !important; } }
@media (max-width: 768px) {
.bux-container .a11y-navbar {
.bux-container .asc-main-menu {
background: #ffffff !important; }
.bux-container .a11y-navbar ul[role=menubar].a11y-navbar-orientation-horizontal li ul[role=menu] li ul[role=menu] li a[role=menuitem] {
.bux-container .asc-main-menu ul[role=menubar].a11y-navbar-orientation-horizontal li ul[role=menu] li ul[role=menu] li a[role=menuitem] {
background-color: #ffffff !important; } }
.bux-container .search-container {
margin-bottom: 0 !important; }
......
web/themes/asc_bootstrap/css/style.css.map
+ 1
− 1
View file @ 0f0bc70a
source diff could not be displayed: it is too large. Options to address this: view the blob.
web/themes/asc_bootstrap/js/scripts.js
+ 27
− 27
View file @ 0f0bc70a
......@@ -14,33 +14,33 @@ jQuery(document).ready(function(){
//sets up timer to show main menu in order to give page time to load content
//so user doesn't see accessible menu loading
if(jQuery(".a11y-navbar")) {
if (window.matchMedia('(max-width: 768px)').matches) {
if(jQuery(".view-people-directory").length) {
if((jQuery(".site-department-of-english").length)||(jQuery(".site-department-of-mathematics").length)) {
setTimeout(function(){ jQuery("#main-nav").css({'position':'inherit', 'left':'0px'}); }, 4000);
}
else {
setTimeout(function(){ jQuery("#main-nav").css({'position':'inherit', 'left':'0px'}); }, 3000);
}
}
else {
setTimeout(function(){ jQuery("#main-nav").css({'position':'inherit', 'left':'0px'}); }, 500);
}
} else {
if(jQuery(".view-people-directory").length) {
if((jQuery(".site-department-of-english").length)||(jQuery(".site-department-of-mathematics").length)) {
setTimeout(function(){ jQuery("#main-nav").css({'position':'sticky', 'left':'0px'}); }, 4000);
}
else {
setTimeout(function(){ jQuery("#main-nav").css({'position':'sticky', 'left':'0px'}); }, 3000);
}
}
else {
setTimeout(function(){ jQuery("#main-nav").css({'position':'sticky', 'left':'0px'}); }, 500);
}
}
}
// if(jQuery(".a11y-navbar")) {
// if (window.matchMedia('(max-width: 768px)').matches) {
// if(jQuery(".view-people-directory").length) {
// if((jQuery(".site-department-of-english").length)||(jQuery(".site-department-of-mathematics").length)) {
// setTimeout(function(){ jQuery("#main-nav").css({'position':'inherit', 'left':'0px'}); }, 4000);
// }
// else {
// setTimeout(function(){ jQuery("#main-nav").css({'position':'inherit', 'left':'0px'}); }, 3000);
// }
// }
// else {
// setTimeout(function(){ jQuery("#main-nav").css({'position':'inherit', 'left':'0px'}); }, 500);
// }
// } else {
// if(jQuery(".view-people-directory").length) {
// if((jQuery(".site-department-of-english").length)||(jQuery(".site-department-of-mathematics").length)||(jQuery(".site-department-of-mathematics").length)) {
// setTimeout(function(){ jQuery("#main-nav").css({'position':'sticky', 'left':'0px'}); }, 4000);
// }
// else {
// setTimeout(function(){ jQuery("#main-nav").css({'position':'sticky', 'left':'0px'}); }, 3000);
// }
// }
// else {
// setTimeout(function(){ jQuery("#main-nav").css({'position':'sticky', 'left':'0px'}); }, 500);
// }
// }
// }
//opens Discover Your Path interest list on initial page load
if (jQuery("#views-exposed-form-discover-your-path-page-1 .panel-heading")) {
......
web/themes/asc_bootstrap/templates/menu/menu--main.html.twig
+ 3
− 4
View file @ 0f0bc70a
......@@ -20,7 +20,6 @@
*/
#}
{# {{ dpm() }} #}
{% macro menu_links(items, attributes, menu_level, classes, issidebar) %}
......@@ -80,7 +79,7 @@ https://stackoverflow.com/questions/52312728/accessing-the-referencing-parent-el
{# {% if isMobile() %}
<ul{{ attributes.addClass(menu_level == 0 ? classes : dropdown_classes, 'mobileview') }} role="menubar">
{% else %} #}
<ul{{ attributes.addClass(menu_level == 0 ? classes : dropdown_classes) }} {% if menu_level == 0 %}role="menubar"{% endif %}>
<ul{{ attributes.addClass(menu_level == 0 ? classes : dropdown_classes, menu_level != 0 ? 'asc-submenu') }} {% if menu_level == 0 %}role="menubar"{% endif %}>
{# {% endif %} #}
{% for item in items %}
{%
......@@ -103,9 +102,9 @@ https://stackoverflow.com/questions/52312728/accessing-the-referencing-parent-el
{% set link_attributes = link_attributes.addClass('dropdown-toggle').setAttribute('data-toggle', 'dropdown') %}
{% endif %} #}
{# Must use link() here so it triggers hook_link_alter(). #}
{{ link(link_title, item.url, link_attributes.addClass(item.in_active_trail ? 'active-trail', issidebar != 'sidebar_menu' ? item.in_active_trail :'bux-menu__link')) }}
{{ link(link_title, item.url, link_attributes.addClass(item.in_active_trail ? 'active-trail', issidebar != 'sidebar_menu' and menu_level == 0 ? 'bux-menu__link')) }}
{% if item.below %}
{{ _self.menu_links(item.below, attributes.removeClass(classes), menu_level + 1, classes, dropdown_classes) }}
{{ _self.menu_links(item.below, attributes.removeClass(classes), menu_level + 1) }}
{% endif %}
</li>
{% endfor %}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment