Back to overview

Website navigation

Website header with 1st level navigation

Header measurements
Back to top

Basic measurements

Basic measurements

1. Meta navigation, 2. Logo area, 3. Search, 4. Service navigation, 5. Main navigation, 6. Breadcrumb

Breadcrumb navigation

The current page is in "active link" mode and therefore, not clickable.

Breadcrumb navigation

Search with auto-suggest

Search with auto-suggest

A maximum of ten entries is shown in the list.

Back to top

Interaction concept:

Action 1With typing in the input box of the search in the header, the auto-suggest function kicks in.
Action 2

By moving the mouse out of the layer area, the layer has to close automatically with a little bit allowance (ca. 0.5 seconds).

Display of layer:

  • Animation: Alpha from 0 to 100% (and back)
  • Transition: easeOutCubic/ easeInCubic
  • Time: 0.5 seconds
  • Delay: 0.3 (open) 0.5 (close, only on mouse moving out)
  • Reaction to user input on text field
  • Animation: Only update if no input happens for 0.3 seconds

Functional layer basic

Functional layer basic
Back to top

Interaction concept: functional layer basic (Login/M. Mustermann, shopping cart)

Action 1With mouse-over on a link with arrow button in the service navigation a layer opens. The layer also opens, when the user clicks on the arrow-button.
Action 2

By moving the mouse out of the layer area, the layer has to close automatically with a little bit allowance (ca. 0.5 seconds).

Display of layer:

  • Animation: Alpha from 0 to 100% (and back)
  • Transition: easeOutCubic/ easeInCubic
  • Time: 0.5 seconds
  • Delay: 0.3 (open) 0.5 (close, only on mouse moving out)

Functional layer country selector

Functional layer country selector
  1. Straight alphabetically sorted list of countries that have a Phoenix Contact website
  2. Country names are always in English and in the language offered on the target country website
  3. Countries are marked with their respective flag
  4. Countries without a Phoenix Contact Website are accessible through “Cannot find your local Phoenix Contact site? Use our selector”
  5. Links always leads to the homepage of the chosen country website
  6. For multi language websites: The target country website is displayed in the language determined by the language browser setting of the user
Back to top

Navigational layer

The width of the navigational layer is 944 pixels, the height is variable but does not exceed 432 pixels.

Navigational layer
Back to top

Interaction concept:

Action 1

With mouse-over on a first level navigation link or with click on a navigational arrow behind the navigational link, the 1st navigational layer opens. By moving the mouse out of the layer area, the layer has to close automatically with a little bit allowance

Display of layer:

  • Animation: Alpha from 0 to 100% (and back)
  • Transition: easeOutCubic/ easeInCubic
  • Time: 0.5 seconds
  • Delay: 0.3 (open), 0.5 (close, only on mouse moving out)

The quick moving of the mouse from the header to the content area across the navigation shall not cause an opening of the layer.

Action 2

With click on a navigational arrow behind a navigational link within the layer, the current layer disappears and the assigned layer is shown.

Change of layer navigational structure:

  • Animation:
    1. Alpha from 100 to 0% (former content)
    2. Alpha from 0 to 100% (new content)
    3. Horizontal movement of new content by +/-20px depending whether navigating up/ down
  • Transition: easeOutCubic
  • Time: 0.5 seconds
Action 3With click on one 1st level navigation point the chosen entry page opens. The navigational layer must not open, even if the mouse-cursor is still on the sensitive link area. The user has to move the mouse actively out of the sensitive area and back to the sensitive area to open the layer again.

Page functions

Page functions
Back to top

Footer

Footer
Back to top

Back to overview
Further information

PHOENIX CONTACT
GmbH & Co. KG

+49 5235 3-41984

Christine Nolte-Dietrich

Christine Nolte-Dietrich

Coordinator Communication Guidelines