make mainnav dropdowns open on hover, with accommodations for tablets

This commit is contained in:
Mark Eaton
2022-06-23 16:01:29 -04:00
parent e107598a09
commit c518e03c6c
2 changed files with 26 additions and 6 deletions
+21 -1
View File
@@ -44,6 +44,9 @@ body {
-webkit-transition-duration: 5s; /* Safari */ -webkit-transition-duration: 5s; /* Safari */
transition-duration: 0.5s; transition-duration: 0.5s;
} }
.dropdown:hover .dropdown-menu {
display: block;
}
/* style the login at the top right */ /* style the login at the top right */
#login-div { #login-div {
@@ -273,7 +276,7 @@ a.no-underline { text-decoration: none; }
} }
} }
@media only screen and (min-width: 1px) and (max-width: 768px) { @media only screen and (min-width: 1px) and (max-width: 767px) {
#hamburger-alternative { display: none; } #hamburger-alternative { display: none; }
@@ -371,6 +374,23 @@ a.no-underline { text-decoration: none; }
</style> </style>
<!-- trigger click event when you hover over dropdowns -->
<script>
$(document).ready(function(){
// on tablets, trigger the dropdown on touchend, since there is no hover
if (navigator.userAgent.match(/iPad/i) != null) {
$('.dropdown.main-nav-dropdown').on('touchend', function() {
$(this).click();
});
} else {
// else trigger dropdown on hover
$('.dropdown.main-nav-dropdown').hover(function() {
$('.dropdown-toggle', this).trigger('click');
});
};
});
</script>
<!-- scripts to make the Book a Study Room widget run --> <!-- scripts to make the Book a Study Room widget run -->
<script src="https://kbcc-cuny.libcal.com/js/equipment.min.js"></script> <script src="https://kbcc-cuny.libcal.com/js/equipment.min.js"></script>
<script> <script>
+3 -3
View File
@@ -78,7 +78,7 @@
<div class="container-fluid"> <div class="container-fluid">
<ul class="nav navbar-nav" id="navbar-center"> <ul class="nav navbar-nav" id="navbar-center">
<li class="dropdown"> <li class="dropdown main-nav-dropdown">
<a class="dropdown-toggle ga-main-navbar" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Find It <span class="caret"></span></a> <a class="dropdown-toggle ga-main-navbar" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Find It <span class="caret"></span></a>
<ul class="dropdown-menu fade dropdown-margin"> <ul class="dropdown-menu fade dropdown-margin">
<li> <li>
@@ -146,7 +146,7 @@
</li> </li>
</ul> </ul>
</li> </li>
<li class="dropdown"> <li class="dropdown main-nav-dropdown">
<a class="dropdown-toggle ga-main-navbar" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Services <span class="caret"></span></a> <a class="dropdown-toggle ga-main-navbar" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Services <span class="caret"></span></a>
<ul class="dropdown-menu fade dropdown-margin"> <ul class="dropdown-menu fade dropdown-margin">
<li> <li>
@@ -200,7 +200,7 @@
</li> </li>
</ul> </ul>
</li> </li>
<li class="dropdown"> <li class="dropdown main-nav-dropdown">
<a class="dropdown-toggle ga-main-navbar" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">About Us <span class="caret"></span></a> <a class="dropdown-toggle ga-main-navbar" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">About Us <span class="caret"></span></a>
<ul class="dropdown-menu fade dropdown-margin"> <ul class="dropdown-menu fade dropdown-margin">
<li> <li>