Details
-
Type:
Improvement
-
Status: Closed
-
Priority:
Major
-
Resolution: Fixed
-
Affects Version/s: 4.0.0-b1
-
Fix Version/s: 4.0.0-b1
-
Component/s: Staff Interface
-
Labels:None
-
Epic Link:
Description
Convert staff sub-nav links into a drop down menu. Use bootstrap for the menu, styles will change as described below.
- Hovering over a primary nav item should still change it's tab color (for example: to gray in the case of the FOUR theme).
- Sub nav links will no longer appear in the star/search bar.
- Clicking on a primary nav item would drop down a menu with sub-nav items. The background color of the menu should be the same color as the sub-nav background area and the text color should be the same as the current sub-nav links.
I'll attach a mock of the menu shortly.
Activity
It's ideal if for the desktop the drop down menu is activated on hover. The problem with making it on hover is that the menu would be inaccessible to mobile devices which cannot hover. However, there may be a solution to this.
See the first response to http://stackoverflow.com/questions/24685000/bootstrap-3-dropdowns-on-hover-and-on-click
..since jQuery is a dependency for bootstrap.js, you might as well do it the jQuery way by just adding all of the events that you want to attach to in quotes space-separated:
$('.dropdown').on('mouseenter mouseleave click tap', function()
Unknown macro: { $(this).toggleClass("open"); });
The selectors are based on the standard Bootstrap markup, taken directly from the docs
Paul Phillips
added a comment - It's ideal if for the desktop the drop down menu is activated on hover. The problem with making it on hover is that the menu would be inaccessible to mobile devices which cannot hover. However, there may be a solution to this.
See the first response to http://stackoverflow.com/questions/24685000/bootstrap-3-dropdowns-on-hover-and-on-click
..since jQuery is a dependency for bootstrap.js, you might as well do it the jQuery way by just adding all of the events that you want to attach to in quotes space-separated:
$('.dropdown').on('mouseenter mouseleave click tap', function()
Unknown macro: {
$(this).toggleClass("open");
}
);
The selectors are based on the standard Bootstrap markup, taken directly from the docs Let's make the following changes:
Update the theme style:
header#main_header .menu ul ul li, header#main_header .menu ul ul li a
Add the following attributes:
padding-bottom: 2px;
font-weight: 300;
Paul Phillips
added a comment - Let's make the following changes:
Update the theme style:
header#main_header .menu ul ul li, header#main_header .menu ul ul li a
Add the following attributes:
padding-bottom: 2px;
font-weight: 300; Those styles have been updated.
Tyson Phillips (Inactive)
added a comment - Those styles have been updated. 
Here's a photoshop mockup of what the drop down menu should look like.