Site Header

Global

This is a global component and should be present on all pages.

Logo & Link

The Logo & Link will be CMS manageable.

Top Nav

The following items are present in the top nav:

• ASCE sites (with dropdown capability)

• Membership (with dropdown capability)

• Login: Clicking this link will cause a Personify login page to display. Once a user enters their credentials and passes validation, the user will be redirected back to the page they were on. The login ink will switch to a label that displays the user's first name, along with a dropdown menu.

• Join: Clicking will take a user to a join page.

Main Nav

The main nav is comprised of 5 links; each section title links directly to the corresponding landing page, and can also display child pages on hover:

• Menu is CMS Managed

• Each of the 5 sections can include a drop down state; see requirement #6

• When in a respective main nav section, blue top border should indicate active state

Search

Clicking on the magnifying glass icon pops open a site wide search field. Users can then enter search terms and click enter or click on the inline search icon again to execute the search and display the search results page. Clicking the 'x' will cause the search field to close.

Dropdown Hover State

The vertical drop - down state with the options below:

• 3 column menu format: to be used for Publications & News

  • Left Column reserved for featured Items: this will be set in the navigation menu, rather than the individual page(s)

    • Hover state: when a user moves the cursor into any of the columns, hover state will be triggered, per designs.

  • Center Column to be used for pubs and news By Type:

    • Journals & Magazines

    • News Releases

    • Policy Statements

    • Books

    • Videos

  • Right Column to be used for Featured News

    • a max of two (2) items will be allowed; both render in bold; these will be chosen directly in the navigation menu in Sitecore

    • a link that reads "View all news" will render under the second link

• 2 column format: to be used for Career & Growth, Education & Events, Communities, Topics

  • Each dropdown will feature three sections:

    • Section 1 (upper left): Jobs

      • for site launch these links will be: Find Job Opportunities, Salary & Workplace Research, Post a Job

    • Section 2 (upper right): By Type

      • for site launch these links will be: Students, Early Career Engineer, Experienced Engineer, Retired, Educators

    • Section 3 (bottom left): Support For

      • for site launch these links will be: PE licensure, Certifications, Career Paths, Mentor Match, Leadership, Ethics, Awards & Honors, Get Involved

Hamburger Menu - Desktop

The hamburger menu will display the following utility links:

• About ASCE

• Initiatives

• Advocacy

• Diversity & Inclusion

• Historic Landmarks

Button:

• Donate to ASCE: clicking will take a user to the donate page

Social media Icons:

• LinkedIn

• Facebook

• Twitter

• YouTube

• Instagram

Clicking the "x" will collapse the hamburger menu.

Hamburger Menu - Mobile

On mobile, all main level links & sublinks will display. In other words, if a user clicks on "Publications & News", the system will display the pages under that menu item:

• Featured:

  • Civil Engineering Source

  • ASCE 7 Standard

  • Civil Engineering Magazine

  • Infrastructure Report Card

• By Type:

  • Journals

  • News Releases

  • Policy

  • Standards & Books

  • Videos

  • Conference Proceedings

NOTE: The featured news articles will NOT display in the hamburger menu.
The same treatment will be applied to the remaining main menu items. Clicking the back arrow will take a user back to the main hamburger menu.

The top nav links will transition under the hamburger menu. These links are:

• Login

• Membership

• ASCE Sites

These three links will render above the utility links listed in requirements #7. Button:

• Donate to ASCE: clicking will take a user to the donate page

Social media Icons:

• LinkedIn

• Facebook

• Twitter

• YouTube

• Instagram

Clicking the "x" will collapse the hamburger menu.

Personalization requirements:

Personalization & Gated Content

Main Logo

image

yes

Main Logo image for the header.

Main Nav 1 Link

general link

yes

Publications & News

Main Nav 1 Section Title 1

single-line text

no

Text that appears in the menu drop down state as Title (Featured)

Main Nav 1 Left Column Links

links list

no

List of Links for left column.

Main Nav 1 Section Title 2

single-line text

yes

Text that appears in the menu drop down state as Title (By Type)

Main Nav 1 Center Column Links

links list

no

List of Links for center column.

Main Nav 1 Section Title 3

single-line text

no

Text that appears in the menu drop down state as Title (Featured News)

Main Nav 1 Right Column Links

links list

no

List of Links for right column.

Main Nav 2 Link

general link

yes

Main Nav 2 Section 1 Title

single-line text

no

Jobs

Main Nav 2 Section 1 Links

links list

no

List of Links for first section. Maximum 3 links.

Main Nav 2 Section 2 Title

single-line text

no

Support For

Main Nav 2 Section 2 Links

links list

no

List of Links for second section. Maximum 5 links.

Main Nav 2 Section 3 Title

single-line text

no

By Type

Main Nav 2 Section 3 Links

links list

no

List of Links for third section.

Utility Nav Links

general links

for site launch: ASCE Sites (list of external sites) and Membership

Utility Nav - Login Link

general link

Utility Nav - Join Link

Hamburger Links

link list

yes

no max

Button

link

no

includes button text and URL

Hamburger Social Media

multi-select

no

Options are: Linkedin, Facebook, Twitter, Youtube, Instagram; if not selected in CMS, icon will not display