This standard global header appears on all Cambridge sites. It provides a consistent way to navigate to key destinations and helps visitors to instantly associate any Cambridge website with the University.
The global header should not be edited in any way, with the exception of the search box. The search box can be set to perform a search scoped to the current Faculty/institution, rather than searching all University content. In this case, the search results page will display the scoped results by default.
The three primary links provide a consistent, prominent route to the University's key strategic content areas.
At full screen width, clicking these links exposes a menu that pushes the rest of the page content down. The menu displays top-level links for each category, with the option to include some summary copy below the section title.
Further common destinations appear within the Quick links menu.
At smaller screen widths, the three primary links and Quick links all appear in one menu launched from a single button at the top left of the page.
Opening any menu item, Quick links, Search or navigation menu should close any other open panel.
Separate desktop and mobile views are created by using a 767px max-width media query to present a different navigation structure for global navigation items and Quick link items.
A separate search form field is inserted for mobile users and hidden from view for desktop users.
A Home button link is available at the top of the mobile navigation hidden by CSS from desktop users.
The first two primary navigation items open a mega drop down menu. A close button is dynamically appended to the megadropdown containers. and a click event is bound to both the primary navigation and close buttons to control the open and close mechanism for the menu.
Users without Javascript will see both menus opened by default.
The Quick links panel is dynamically created by cloning links from the navigation and appending them to the Quick links container.
The Quick links button is also dynamically appended to the header and a click event is bound to this to control the open and close mechanism of the Quick links container. There is also a click event bound to the HTML tag which allows a user to click anywhere on screen to close the Quick links container.
Users without Javascript will see the Quick links below the navigation items where they appear in the HTML markup.
Mobile users will be given two menu items controlled by the search and navigation buttons. These buttons are dynamically appended using Javascript.
The Search button opens a drawer below the header with a search field. The navigation button appends a class to the body tag which moves the body of the HTML to display the navigation in a side drawer.
Menu items are not available to mobile users without Javascript.
Javascript is also used to create equal height columns in the megadropdown drawer and in the primary navigation links. The columns in the megadropdown drawer are hardcoded to a height of 300px. Users without Javascript will see the primary navigation links and megadropdown columns rendered at their original height.
A variation of the header is implemented on the main University homepage to differentiate it from internal pages. The homepage header variant can be viewed here.