Element: Hamburger Menu Button

The element "Hamburger Menu Button" generates a navigation menu, which is created depending on the defined page tree.

Structure

The Hamburger Menu Button contains four sub-elements that can be customized:

  1. Hamburger Button
  2. Navigation-Layer
  3. Menu item
  4. Aktive menu item

The styles for all four sub-elements are listed on this page.

Sample App

You can test this element with sample styles directly in the public area of the contentDock® Viewer App. You can also load these sample styles from the Template Library into your user account and import them into your app project.

Styles

  • Background
    Color
    Contentdock color help
    Defines the color of the element background. Possible values are hexadecimal and of RGBA color values.

    The hexadecimal color system uses three sequently hexadecimal numbers, each representing one color of the RGB color space. Example: #ffffff for the color white.

    The RGBA color system has been extended by the RGB system with an alpha value for transparencies. Example: rgba (255,255,255,0.5) for the color white with an alpha value of 0.5.

    Preset system value

    This value is used if no style is defined for this element.

    rgba(255,255,255,0)

  • Border
    Height
    Contentdock hh border height help
    Defines the thickness of the border in pixels surrounding the element. The value is set individually in an input field.

    Please note that only integers are entered. A "px" need not be captured.

    Preset system value

    This value is used if no style is defined for this element.

    0

    Radius
    Contentdock hh border radius help
    Defines the radius of the border in pixels used in the element corners. The value is set individually in an input field.

    Please note that only integers are entered. A "px" need not be captured.

    Preset system value

    This value is used if no style is defined for this element.

    0

    Color
    Contentdock color help
    Defines the color of the element border. Possible values are hexadecimal and of RGBA color values.

    The hexadecimal color system uses three sequently hexadecimal numbers, each representing one color of the RGB color space. Example: #ffffff for the color white.

    The RGBA color system has been extended by the RGB system with an alpha value for transparencies. Example: rgba (255,255,255,0.5) for the color white with an alpha value of 0.5.

    Preset system value

    This value is used if no style is defined for this element.

    rgba(255,255,255,0)

    Position
    Contentdock hh border position help
    Specify the position of the border. The border always encloses the element, but you can choose in which direction the border will be drawn.

    Possible values are:

    Inside: The border is drawn inside.

    Outside: The border is drawn outside.

    Preset system value

    This value is used if no style is defined for this element.

    inner

  • Inner Space
    At the top
    Contentdock hh padding top help
    The text in the element is centered vertically and horizontally by default. You can change the space between the text and the top border of the element in this style.

    Preset system value

    This value is used if no style is defined for this element.

    10

    At the bottom
    Contentdock hh padding bottom help
    The text in the element is centered vertically and horizontally by default. You can change the space between the text and the bottom border of the element in this style.

    Preset system value

    This value is used if no style is defined for this element.

    0

    To the left
    Contentdock hh padding left help
    The text in the element is centered vertically and horizontally by default. You can change the space between the text and the left border of the element in this style.

    Preset system value

    This value is used if no style is defined for this element.

    10

    To the right
    Contentdock hh padding right help
    The text in the element is centered vertically and horizontally by default. You can change the space between the text and the right border of the element in this style.

    Preset system value

    This value is used if no style is defined for this element.

    0

  • Title Font
    Name of the font
    Contentdock font family help
    In contentDock® there are various fonts from fonts.google.com pre installed. You can also load your own fonts in contentDock® as TTF (TrueType Font) or OTF (OpenType Font).

    Preset system value

    This value is used if no style is defined for this element.

    Open Sans Light

    Font size
    Contentdock font size help
    Defines the size of the text in pixels. The value is selected from the dropdown or can be set individually.

    Preset system value

    This value is used if no style is defined for this element.

    16

    Color
    Contentdock color help
    Defines the color of the text. Possible values are hexadecimal and of RGBA color values.

    The hexadecimal color system uses three sequently hexadecimal numbers, each representing one color of the RGB color space. Example: #ffffff for the color white.

    The RGBA color system has been extended by the RGB system with an alpha value for transparencies. Example: rgba (255,255,255,0.5) for the color white with an alpha value of 0.5.

    Preset system value

    This value is used if no style is defined for this element.

    #000000

  • Button behavior
    Normal image
    Contentdock background image help
    This defines the image for the normal state of the button.

    Preset system value

    This value is used if no style is defined for this element.

    Vzcdmnrc

    Down image
    Contentdock background image help
    This defines the image for the touched / pressed state of the button.

    Preset system value

    This value is used if no style is defined for this element.

    Eequkpto

    Color for the pressed state
    Contentdock color help
    This defines the background color for the touched / pressed state of the button

    Attention: This style has no effect, when a background image is defined for the touched / pressed state.

    Preset system value

    This value is used if no style is defined for this element.

    rgba(255,255,255,0)

Navigation/Menu layer

  • Background
    Color
    Contentdock color help
    Defines the color of the navigation menu layer background. Possible values are hexadecimal and of RGBA color values.

    The hexadecimal color system uses three sequently hexadecimal numbers, each representing one color of the RGB color space. Example: #ffffff for the color white.

    The RGBA color system has been extended by the RGB system with an alpha value for transparencies. Example: rgba (255,255,255,0.5) for the color white with an alpha value of 0.5.

    Preset system value

    This value is used if no style is defined for this element.

    #000000

    Image
    Contentdock background image help
    Defines the background image for the navigation menu layer. The image is scaled in the element.
  • Border
    Height
    Contentdock hh layer border height help
    Defines the thickness of the border in pixels surrounding the navigation layer. The value is set individually in an input field.

    Please note that only integers are entered. A "px" need not be captured.

    Preset system value

    This value is used if no style is defined for this element.

    0

    Radius
    Contentdock hh layer border radius help
    Defines the radius of the border in pixels used in the layer corners. The value is set individually in an input field.

    Please note that only integers are entered. A "px" need not be captured.

    Preset system value

    This value is used if no style is defined for this element.

    0

    Color
    Contentdock color help
    Defines the color of the navigation layer border. Possible values are hexadecimal and of RGBA color values.

    The hexadecimal color system uses three sequently hexadecimal numbers, each representing one color of the RGB color space. Example: #ffffff for the color white.

    The RGBA color system has been extended by the RGB system with an alpha value for transparencies. Example: rgba (255,255,255,0.5) for the color white with an alpha value of 0.5.

    Preset system value

    This value is used if no style is defined for this element.

    rgba(255,255,255,0)

    Position
    Contentdock hh layer border position help
    Specify the position of the border. The border always encloses the navigation layer, but you can choose in which direction the border will be drawn.

    Possible values are:

    Inside: The border is drawn inside.

    Outside: The border is drawn outside.

    Preset system value

    This value is used if no style is defined for this element.

    inner

  • Inner Space
    At the top
    Contentdock hh layer padding top help
    Defines the distance between the top of the "Navigation Layer" and the menu entries.

    Preset system value

    This value is used if no style is defined for this element.

    150

    At the bottom
    Contentdock hh layer padding bottom help
    Defines the distance between the bottom of the "Navigation Layer" and the menu entries.

    Preset system value

    This value is used if no style is defined for this element.

    150

    To the left
    Contentdock hh layer padding left help
    Defines the distance between the left of the "Navigation Layer" and the menu entries.

    Preset system value

    This value is used if no style is defined for this element.

    70

    To the right
    Contentdock hh layer padding right help
    Defines the distance between the right of the "Navigation Layer" and the menu entries.

    Preset system value

    This value is used if no style is defined for this element.

    70

  • Layer position & size
    Layer Position
    Contentdock hh layer position help
    With this style you define the general position of the navigation layer.

    Possible values are:

    Left device border: The layer opens from the left edge of the tablet.

    Right device border: The layer opens from the right edge of the tablet.

    Right from the button: The layer opens on the right side of the button, depending on the button position.

    Left from the button: The layer opens on the left side of the button, depending on the button position.

    Preset system value

    This value is used if no style is defined for this element.

    right_device_border

    Distance between button and layer
    Contentdock hh layer disance button help
    Only if the "Layer Position" style is set to "Left from the button" or "Right from the button"

    Defines the distance between the button and the navigation layer.
    Distance from the left border
    Contentdock hh layer disance border left help
    Only if the "Layer Position" style is set to "Left device border".

    Defines the distance between the left border and the navigation layer.
    Distance from the right border
    Contentdock hh layer disance border right help
    Only if the "Layer Position" style is set to "Right device border".

    Defines the distance between the right border and the navigation layer.

    Preset system value

    This value is used if no style is defined for this element.

    0

    Distance from the top border
    Contentdock hh layer disance border top help
    Only if the "Layer Position" style is set to "Left device border" or "Right device border".

    Defines the distance between the top border and the navigation layer.

    Preset system value

    This value is used if no style is defined for this element.

    0

    Distance from the bottom border
    Contentdock hh layer disance border bottom help
    Only if the "Layer Position" style is set to "Left device border" or "Right device border".

    Defines the distance between the bottom border and the navigation layer.

    Preset system value

    This value is used if no style is defined for this element.

    0

    Layer height type
    Contentdock hh layer height type help
    Defines the height alignment of the navigation layer.

    Possible values are:

    Full screen height: The height of the navigation layer depends on the screen height.

    special: The height can be set individually in the style "Layer height".

    Preset system value

    This value is used if no style is defined for this element.

    full_height

    Layer height
    Contentdock hh layer height help
    Only if the style "Layer height type" is set to "special".

    Defines the height of the navigation layer.
    Layer width
    Contentdock hh layer width help
    Defines the width of the navigation layer.

    Preset system value

    This value is used if no style is defined for this element.

    250

  • Layer behavior
    Animation when the layer will open
    Contentdock hh layer animation help
    Defines the animation when the navigation layer will open or close.

    Possible values are:

    Fade in / Fade out: The navigation layer will open via "Fade in" and close with "Fade out".

    Slide in / Slide out: The navigation layer will open via "Slide in" and close with "Slide out".

    Preset system value

    This value is used if no style is defined for this element.

    fade

    Animation time in milliseconds
    Contentdock hh layer animation time help
    Defines the time in milliseconds, shows how long the animation is for.

    Preset system value

    This value is used if no style is defined for this element.

    500

    Layer close icon
    Contentdock hh layer close icon help
    Defines the icon to close the navigation layer.

    Preset system value

    This value is used if no style is defined for this element.

    Uclyhhbp

    Height of the close icon
    Width of the close icon
    Position close icon from the left
    Contentdock hh layer close icon position left help
    Defines the distance from the left border to the close icon.

    Preset system value

    This value is used if no style is defined for this element.

    420

    Position close icon from the top
    Contentdock hh layer close icon position top help
    Defines the distance from the top border to the close icon.

    Preset system value

    This value is used if no style is defined for this element.

    30

    Show a full screen layer, when the menu is open
    Contentdock hh layer full screen layer help
    If this style is activated, an additional color layer is displayed over the whole screen when the navigation layer is opened.

    Preset system value

    This value is used if no style is defined for this element.

    0

    Full screen layer color
    Contentdock color help
    Defines the color of the full screen layer. Possible values are hexadecimal and of RGBA color values.

    The hexadecimal color system uses three sequently hexadecimal numbers, each representing one color of the RGB color space. Example: #ffffff for the color white.

    The RGBA color system has been extended by the RGB system with an alpha value for transparencies. Example: rgba (255,255,255,0.5) for the color white with an alpha value of 0.5.
  • Navigation setup
    Menu start level

    Preset system value

    This value is used if no style is defined for this element.

    menu_start_at_1level

    Always show the active page first

    Preset system value

    This value is used if no style is defined for this element.

    0

    Menu type
    Contentdock hh layer type help
    This defines the menu type.

    Possible values are:

    Drill down menu: With this type you navigate in & out of the levels. Only the current level is displayed.

    Drop down menu: This menu type is currently under construction.

    Preset system value

    This value is used if no style is defined for this element.

    drill_down_menu

    Number of menu levels that are displayed directly
    Attention: This style is currently not used and is being prepared for other menu types.
    Text-Offset for the menu levels - These are added up from level to level
    Attention: This style is currently not used and is being prepared for other menu types.
    Image for a menu level back
    Contentdock hh layer level back icon help
    Only for menu type "Drill down menu".

    Defines the icon to navigate back in the levels.
    Height of the menu level back icon
    Width of the menu level back icon
    Distance right between the level back image and the menu text
    Contentdock hh layer level back icon distance right help
    Only for menu type "Drill down menu".

    Defines the distance between the icon for a level back and the menu text.

    Preset system value

    This value is used if no style is defined for this element.

    0

    Image for a menu level down
    Contentdock hh layer level down icon help
    Only for menu type "Drill down menu".

    Defines the icon to navigate down in the level.
    Image height for drill down icon
    Image width for drill down icon
    Distance left between the level down image and the menu text or the page screenshot if visible there
    Contentdock hh layer level down icon distance left help
    Only for menu type "Drill down menu".

    Defines the distance between the icon for a level down and the menu text.

    Preset system value

    This value is used if no style is defined for this element.

    0

Navigation/Menu item

  • Background
    Color
    Contentdock color help
    Defines the background color of the menu text item. Possible values are hexadecimal and of RGBA color values.

    The hexadecimal color system uses three sequently hexadecimal numbers, each representing one color of the RGB color space. Example: #ffffff for the color white.

    The RGBA color system has been extended by the RGB system with an alpha value for transparencies. Example: rgba (255,255,255,0.5) for the color white with an alpha value of 0.5.

    Preset system value

    This value is used if no style is defined for this element.

    rgba(255,255,255,0)

    Image
    Contentdock background image help
    Specify an image for the background of the menu text item.
  • Border
    Height
    Contentdock hh item border height help
    Defines the thickness of the border in pixels surrounding the menu text item. The value is set individually in an input field.

    Please note that only integers are entered. A "px" need not be captured.

    Preset system value

    This value is used if no style is defined for this element.

    0

    Radius
    Contentdock hh item border radius help
    Defines the radius of the border in pixels used in the menu text item corners. The value is set individually in an input field.

    Please note that only integers are entered. A "px" need not be captured.

    Preset system value

    This value is used if no style is defined for this element.

    0

    Color
    Contentdock color help
    Defines the border color of the menu text item. Possible values are hexadecimal and of RGBA color values.

    The hexadecimal color system uses three sequently hexadecimal numbers, each representing one color of the RGB color space. Example: #ffffff for the color white.

    The RGBA color system has been extended by the RGB system with an alpha value for transparencies. Example: rgba (255,255,255,0.5) for the color white with an alpha value of 0.5.

    Preset system value

    This value is used if no style is defined for this element.

    rgba(255,255,255,0)

  • Margin
    Top
    Contentdock hh item distance top help
    Defines the top distance to the previous menu text item. The distance depends on the height of the menu text item and its border.

    Preset system value

    This value is used if no style is defined for this element.

    5

    Bottom
    Contentdock hh item distance bottom help
    Defines the bottom distance to the next menu text item. The distance depends on the height of the menu text item and its border.

    Preset system value

    This value is used if no style is defined for this element.

    5

  • Title Font
    Name of the font
    Contentdock font family help
    In contentDock® there are various fonts from fonts.google.com pre installed. You can also load your own fonts in contentDock® as TTF (TrueType Font) or OTF (OpenType Font).

    Preset system value

    This value is used if no style is defined for this element.

    Open Sans Light

    Font size
    Contentdock font size help
    Defines the size of the menu text in pixels. The value is selected from the dropdown or can be set individually.

    Preset system value

    This value is used if no style is defined for this element.

    20

    Color
    Contentdock color help
    Defines the color of the menu text. Possible values are hexadecimal and of RGBA color values.

    The hexadecimal color system uses three sequently hexadecimal numbers, each representing one color of the RGB color space. Example: #ffffff for the color white.

    The RGBA color system has been extended by the RGB system with an alpha value for transparencies. Example: rgba (255,255,255,0.5) for the color white with an alpha value of 0.5.

    Preset system value

    This value is used if no style is defined for this element.

    #ffffff

  • Alignment
    Alignment
    Contentdock text align help
    Defines the general alignment of the text within the menu text item.

    Possible values are:

    left: The text is left aligned.

    right:The text is right aligned.

    center:The text is centered in the element.

    Preset system value

    This value is used if no style is defined for this element.

    center

  • Size
    Height of the menu item - The menu text is always displayed centered vertically
    Contentdock hh item height help
    Defines the height of the menu text item.

    Attention: The width of the menu text item is calculated by the width of the navigation layer minus the inner distances to the left and right of the navigation layer.

    Preset system value

    This value is used if no style is defined for this element.

    40

  • Menu item behavior
    Show a dividing line
    Contentdock hh item split line help
    If this style is activated, a dividing line between the menu text items is displayed.

    Please also refer to the styles for the margins

    Preset system value

    This value is used if no style is defined for this element.

    0

    Height of the dividing line
    Contentdock hh item split line height help
    Defines the height of the dividing line.

    Preset system value

    This value is used if no style is defined for this element.

    1

    Color of the dividing line
    Contentdock color help
    Defines the color of the dividing line. Possible values are hexadecimal and of RGBA color values.

    The hexadecimal color system uses three sequently hexadecimal numbers, each representing one color of the RGB color space. Example: #ffffff for the color white.

    The RGBA color system has been extended by the RGB system with an alpha value for transparencies. Example: rgba (255,255,255,0.5) for the color white with an alpha value of 0.5.

    Preset system value

    This value is used if no style is defined for this element.

    #ffffff

Navigation/Menu item active

  • Background
    Color
    Contentdock color help
    Defines the background color of the active menu text item. Possible values are hexadecimal and of RGBA color values.

    The hexadecimal color system uses three sequently hexadecimal numbers, each representing one color of the RGB color space. Example: #ffffff for the color white.

    The RGBA color system has been extended by the RGB system with an alpha value for transparencies. Example: rgba (255,255,255,0.5) for the color white with an alpha value of 0.5.

    Preset system value

    This value is used if no style is defined for this element.

    rgba(255,255,255,0)

    Image
    Contentdock background image help
    Specify an image for the background of the active menu text item.
  • Border
    Height
    Contentdock hh item border height help
    Defines the thickness of the border in pixels surrounding the active menu text item. The value is set individually in an input field.

    Please note that only integers are entered. A "px" need not be captured.

    Preset system value

    This value is used if no style is defined for this element.

    0

    Radius
    Contentdock hh item border radius help
    Defines the radius of the border in pixels used in the active menu text item corners. The value is set individually in an input field.

    Please note that only integers are entered. A "px" need not be captured.

    Preset system value

    This value is used if no style is defined for this element.

    0

    Color
    Contentdock color help
    Defines the border color of the active menu text item. Possible values are hexadecimal and of RGBA color values.

    The hexadecimal color system uses three sequently hexadecimal numbers, each representing one color of the RGB color space. Example: #ffffff for the color white.

    The RGBA color system has been extended by the RGB system with an alpha value for transparencies. Example: rgba (255,255,255,0.5) for the color white with an alpha value of 0.5.

    Preset system value

    This value is used if no style is defined for this element.

    rgba(255,255,255,0)

  • Margin
    Top
    Contentdock hh item distance top help
    Defines the top distance to the previous menu text item. The distance depends on the height of the menu text item and its border.

    Preset system value

    This value is used if no style is defined for this element.

    5

    Bottom
    Contentdock hh item distance bottom help
    Defines the bottom distance to the next menu text item. The distance depends on the height of the menu text item and its border.

    Preset system value

    This value is used if no style is defined for this element.

    5

  • Title Font
    Name of the font
    Contentdock font family help
    In contentDock® there are various fonts from fonts.google.com pre installed. You can also load your own fonts in contentDock® as TTF (TrueType Font) or OTF (OpenType Font).

    Preset system value

    This value is used if no style is defined for this element.

    Open Sans Regular

    Font size
    Contentdock font size help
    Defines the size of the active menu text item in pixels. The value is selected from the dropdown or can be set individually.

    Preset system value

    This value is used if no style is defined for this element.

    24

    Color
    Contentdock color help
    Defines the color of the active menu item text. Possible values are hexadecimal and of RGBA color values.

    The hexadecimal color system uses three sequently hexadecimal numbers, each representing one color of the RGB color space. Example: #ffffff for the color white.

    The RGBA color system has been extended by the RGB system with an alpha value for transparencies. Example: rgba (255,255,255,0.5) for the color white with an alpha value of 0.5.

    Preset system value

    This value is used if no style is defined for this element.

    #ff0000

  • Alignment
    Alignment
    Contentdock text align help
    Defines the general alignment of the text within the active menu text item.

    Possible values are:

    left: The text is left aligned.

    right: The text is right aligned.

    center: The text is centered in the element.

    Preset system value

    This value is used if no style is defined for this element.

    center

  • Size
    Height of the menu item - The menu text is always displayed centered vertically
    Contentdock hh item height help
    Defines the height of the active menu text item.

    Attention: The width of the menu text item is calculated by the width of the navigation layer minus the inner distances to the left and right of the navigation layer.

    Preset system value

    This value is used if no style is defined for this element.

    40

  • Menu item behavior
    Show a dividing line
    Contentdock hh item split line help
    If this style is activated, a dividing line between the menu text items is displayed.

    Please also refer to the styles for the margins

    Preset system value

    This value is used if no style is defined for this element.

    0

    Height of the dividing line
    Contentdock hh item split line height help
    Defines the height of the dividing line.

    Preset system value

    This value is used if no style is defined for this element.

    1

    Color of the dividing line
    Contentdock color help
    Defines the color of the dividing line. Possible values are hexadecimal and of RGBA color values.

    The hexadecimal color system uses three sequently hexadecimal numbers, each representing one color of the RGB color space. Example: #ffffff for the color white.

    The RGBA color system has been extended by the RGB system with an alpha value for transparencies. Example: rgba (255,255,255,0.5) for the color white with an alpha value of 0.5.

    Preset system value

    This value is used if no style is defined for this element.

    #ffffff

Navigation/Menu item back

  • Background
    Color

    Preset system value

    This value is used if no style is defined for this element.

    rgba(255,255,255,0)

    Image
  • Border
    Height

    Preset system value

    This value is used if no style is defined for this element.

    0

    Radius

    Preset system value

    This value is used if no style is defined for this element.

    0

    Color

    Preset system value

    This value is used if no style is defined for this element.

    rgba(255,255,255,0)

  • Margin
    Top

    Preset system value

    This value is used if no style is defined for this element.

    5

    Bottom

    Preset system value

    This value is used if no style is defined for this element.

    5

  • Title Font
    Name of the font

    Preset system value

    This value is used if no style is defined for this element.

    Open Sans Light

    Font size

    Preset system value

    This value is used if no style is defined for this element.

    20

    Color

    Preset system value

    This value is used if no style is defined for this element.

    #000000

  • Alignment
    Alignment
  • Size
    Height of the menu item - The menu text is always displayed centered vertically

    Preset system value

    This value is used if no style is defined for this element.

    40