Theme:
SCSS TypeScript TypeScript

Menu

  • menu
    • menu–horizontal
    • menu–vertical
    • menu–reverse-items
    • menu__list
      • menu__list–before
      • menu__list–after
      • menu__list–active
      • menu__list–active-fix
      • menu__list–2-rows
      • menu__list–5-cols-small-ad
      • menu__list–5-cols-big-ad
      • menu__list–6-cols-small-ad
      • menu__list–6-cols-big-ad
      • menu__list–7-cols-small-ad
      • menu__list–8-cols-small-ad
      • menu__list–2-cols-big-ad
      • menu__list–2-cols-2-ads
    • menu__item
      • menu__item–hover
      • menu__item–has-ad
      • menu__item–current-path
    • menu__text
    • menu__icon
      • icon icon–plus
      • icon icon–minus
      • icon icon–arrow-right
      • icon icon–arrow-down
      • icon icon–arrow-down-1
    • menu__icon-opener

The menu is one of the most complex components of the style guide. It is very variable and can be greatly expanded.

The menu consists of the simplest possible HTML so that the browser can interpret it as quickly as possible. The complexity lies particularly in the styling and scripting.

At this point, a few basic points about the menu are explained:

  • We do not differentiate between a mobile and desktop menu! We have cases where a vertical menu is also used on desktop devices. Therefore we always differentiate between vertical and horizontal menu. * Each menu is always displayed on mobile devices (XS, SM, MD) in the vertical variant. On desktop devices (LG, XL) the menu can be vertical or horizontal. By default it is horizontal, but you can change this by a modifier.
  • A menu item can have sub-items. We call the different levels layers. In theory, a menu can have any number of layers. However, it is strongly recommended that you do not go any further than the third layer! We mostly only show elements up to the third layer in the horizontal menus. **General Structure
    • Normally the menu consists of one or more lists.
    • A list consists of one or more items.
    • An item usually contains a text (this is often a link).
    • An item in which subitems should to be displayed also contains a list and an icon.
    • There are cases in which there is no menu text in an item, but a separate HTML code. This is mostly for advertising purposes.
  • Almost all settings in the menu are made using class modifiers (see below).

In the following, the HTML will first be explained in more detail and how the behavior and appearance of the menu can be controlled using appropriate modifiers. Then we go into more detail on special style and script peculiarities. Finally, we will present different examples of the menu.

HTML Structure

As already mentioned, the menu should consist of a maximally simple HTML.

The block class of the menu is

  • .menu - contains at least one .menu__list

The menu element classes are

  • .menu__list - is a child element of .menu or .menu__item, contains at least one .menu__item
  • .menu__item - is a child element of .menu__item, contains mostly .menu__text, could contain one .menu__list and one .menu__icon
  • .menu__text - is a child element of .menu__item
  • .menu__icon - is a child element of .menu__item

The behavior of the menu is mainly determined by HTML class modifier. There are some modifiers that you have to set and some that are used by scripting. The modifiers that you can use have a certain sub-category: the second layer modifiers. These define the appearance and behavior of the sub layers in the horizontal menu.

General modifier classes that you can use:

  • .menu--vertical - If this modifier is used, the menu is in the vertical style on all screen sizes.
  • .menu__list--before- TODO
  • .menu__list--after- TODO
  • .menu__item--current-page - This is an important modifier and should always be set. It indicates that a menu entry corresponds to the current page. The styling will adjusted accordingly (see .menu__item–current-path).
  • .menu--reverse-items - Normally the vertical menu shows the texts on the left and icons on the right side. This modifier reverses the order.
  • .menu__list--active-fix - Sub-layers are not shown by default (there are exceptions with certain second layer modifiers). Only an user interaction shows the sub layer. With this modifier the sub-layer can be displayed permanently. This is mainly used for debug purposes.
  • .menu__item--has-ad - A menu item usually contains a text and possibly sub lists. If this modifier is used on an item, none of them are expected and you can add any HTML code to the item. This is especially used with “col” second layer modifier.
  • Second Layer Modifier:
    • .menu__list--2-rows- TODO
    • .menu__list--5-cols- TODO
    • .menu__list--5-cols-small-ad- TODO
    • .menu__list--5-cols-big-ad- TODO
    • .menu__list--6-cols-small-ad- TODO
    • .menu__list--6-cols-big-ad- TODO
    • .menu__list--7-cols-small-ad- TODO
    • .menu__list--8-cols-small-ad- TODO

Modifier class, which are set via scripting:

  • .menu__list--active - TODO
  • .menu__item--active - TODO
  • .menu__item--hover - TODO
  • .menu__item--current-path - TODO

In the following we show a simplified structure of a menu. A crucial fact is that the menu works exclusively with HTML classes and not with HTML tags. However, we recommend that a few specific HTML tags be used per class:

  • nav.menu
  • ul.menu__list
  • li.menu__item
  • a.menu__text or span.menu__text
  • span.menu__icon
.menu
  .menu__list menu__list--before {OPTIONAL}
    .menu__item
      .menu__text .menu__icon
    .menu__item
      .menu__text .menu__icon
    ...

  .menu__list
    .menu__item
      .menu__text .menu__icon
      .menu__list
        .menu__item
          .menu__text .menu__icon
          .menu__list
            ...
        .menu__item
          .menu__text .menu__icon
        ...
    .menu__item
      .menu__text .menu__icon
    ...

  .menu__list menu__list--after {OPTIONAL}
    .menu__item
      .menu__text .menu__icon
    .menu__item
      .menu__text .menu__icon
    ...

CSS Particularities

TODO

  • differentiation between vertical and horizontal
  • the idea of the horizontal menu with position absolute sub layer
  • differentiation between hover, active and current item modifier
  • which sub layer styles exist
  • the different icon versions (arrow, plus/minus, opener)

JavaScript Structure

TODO DOCU

Example A

TODO DOCU

Theme basic Screen size XL
html

Example B

TODO DOCU

Theme basic Screen size XL
html