Core Framework – Top Navigation v1.0.0 – Documentation

Change Log

Version 1.0.0

Features and Improvements

  • The top navigation has gotten a major redesign on small devices.
  • The interaction on small devices now involves overlays rather than slide-in menues.
  • In the tab navigation, layers will no longer open on mouse hover. The corresponding tabs now need to be explicitly clicked.

Breaking Changes

This is a major release and as such introduces a couple of non-backwards-compatible changes to the header markup.

  • The classes topnavigation__slide-in-trigger--left and topnavigation__slide-in-trigger--right are obsolete.
  • The account tab and menu triggers now use the topnavigation__overlay-trigger--account and topnavigation__overlay-trigger--menu classes, respectively.
  • The menu trigger now contains a burger element rather than a FontAwesome icon.
  • The account and menu lists must now be wrapped in the new topnavigation__overlay--account and topnavigation__overlay--menu wrappers, respectively.
  • The menu wrapper includes the new topnavigation__overlay--menu__logo image element.
  • The structure of the account tab link lists has been slightly adjusted.

Please refer to the demo snippets (particularly the sample markup) for more detailed information.

Version 0.6.4

Bug Fixes

  • A regression introduced in v0.6.3 caused the opened account tab layer to be overlapped by other content with an elevated z-index. This has been fixed.

Version 0.6.3

Bug Fixes

  • The account tab had its z-index decreased to prevent it from showing through elements that are placed on top of the navigation, such as advertisements.

Version 0.6.2

Features and Improvements

  • A layout fix for delayed hover tabs was resulting in cut off content in certain home-made versions of the header. The related rule has been made more specific to apply only to inactive layers.

Version 0.6.1

Bug Fixes

  • The login and logout links in the account tab are properly toggled again based on the user's login status.

Version 0.6.0

Features and Improvements

  • The whole area of the navigation tabs can now be clicked and hovered.
  • The account tab may now also be shown as active.

API Changes

  • The user image is no longer a sibling of the account tab label, but its descendant.
  • Also, a new wrapper element has been introduced for the label text in the account tab.

Please refer to the tab structure documentation for details.

Version 0.5.3

Bug Fixes

  • On touch devices, tapping on the user image while the tab navigation is active will now correctly open the account tab instead of immediately following the link.

Version 0.5.2

Bug Fixes

  • Using the reduced account tab no longer causes its label to disappear in display sizes where it should really be shown.

Version 0.5.1

Bug Fixes

  • The decorator icon on the account tab is now properly shown/hidden based on what navigation type is active.

Version 0.5.0

Features and Improvements

  • Small layers may now be aligned dynamically, based on display size, with the topnavigation__hover-tabs--self-aligned module.
  • The account tab can now be displayed without a label to make space for more navigation tabs.

Version 0.4.0

Features and Improvements

  • The CSS rules for opening the slide-in navigation are now slightly more competitive to allow for competing slide-in effects defined later on.
  • Small layers may now be aligned to the left or the right edge of the tab.

Bug Fixes

  • The banners of the no-media-queries CSS files now show the proper version number.
  • Fixed a bug where the slide-in triggers would be wrongly positioned in certain page contexts.

Version 0.3.0

Features and Improvements

  • There is now a version of the CSS for browsers without support for media queries.

Bug Fixes

  • The top navigation container now forces the proper standard font styles to prevent layout bugs in environments using older versions of the Core framework.

Version 0.2.2

Bug Fixes

  • The layout of list items in the slide-in navigation has been corrected.
  • Tabs with the active class are now properly colored when hovered.

Version 0.2.1

Bug Fixes

  • Moved fallback styles for legacy selectors around to fix an issue with specificity.
  • Wrapped some styles related to large hover layers in the appropriate selector to avoid conflicts in small layers.

Version 0.2.0

Features and Improvements

  • Added topnavigation__hover-tabs--small-layers and topnavigation__hover-tabs--large-layers to configure the size of hover layers.
  • Added topnavigation__hover-layer--right-aligned to make small layers open to the left rather than to the right.
  • Added the topnavigation__hover-layer__link-block class for link lists in large layers.

API Changes

  • The navigation wrapper selector has changed from top-navigation-slide-in-container to topnavigation-slide-in-container. The old selector is deprecated, but will continue to be supported.
  • Tab lists (topnavigation__hover-tabs) must now explicitly specify a layer size via topnavigation__hover-tabs--small-layers or topnavigation__hover-tabs--large-layers.
  • The login hover layer now also needs a topnavigation__hover-layer__navigation-wrapper wrapper to get the proper internal spacing. The login lists no longer get their own spacing.
  • The link blocks in large layers now require the topnavigation__hover-layer__link-block class to receive the appropriate layout. These styles used to be bound to the topnavigation__level--3 class.
  • The following classes have been renamed for the sake of the separation of concerns:
    • topnavigation__level--2__navigation-wrapper is now topnavigation__hover-layer__navigation-wrapper
    • topnavigation__level--2__teaser-wrapper is now topnavigation__hover-layer__teaser-wrapper
    • topnavigation__level--2__teaser is now topnavigation__hover-layer__teaser

Bug Fixes

  • Corrected a bunch of faulty class name references in the documentation.

Version 0.1.1

Features and Improvements

  • Added info on CSS and JS dependencies to the documentation.
  • Added this change log.

Bug Fixes

  • Renamed the main documentation page to make sure that it will be accessible at /documentation/html/.

Version 0.1.0

Initial release reflecting the state of the header in Core v2.1.0.