This page is under construction. An updated version will be available soon. |
When it comes to the usability of a website the focus of your vistors is on one important component: the Navigation System. The Navigation System used by J1 Template
(this NAV module) is using a modified version of Bootsnav, a multi purpose navigation builder based on the Bootstrap V3 Framework.
Bootsnav extends the native navigation features of Bootstrap by more complex functionalities and additional features. J1 Template
integrates Bootsnav into the world of Jekyll, and make all features available by configuration - no programming is needed.
Since |
Bootstnav improves the Bootstrap Framework in regard to ease-of-use and a powerful, simplified navigation. This is achieved by providing a navigation bar (NavBar) which features a MainMenu, an area for Quicklinks and, as collapsible components, a Sidebar and a Topsearch bar.
There are plenty of layout flavours to be chosen from for an individual arrangement of these elements. As of today 20+ variations are available to navigate a site using Bootstrap with Bootsnav.
Content counts: a well-structured navigation system leads to an excellent browsing experience for your visitors by offering easy access, fast orientation and quick overviews.
Configuration
The NAV module is quite a complex feature of J1 Template. The module implements the navigation bar (1) which in turn consists of the Main Menu (2) and the Quicklinks (3). Via Quicklinks access is provided to additional navigational components: the Top Search (4) and the Sidebar (5). The global Brand Image (6) is also embedded.
Overall, the NAV module consists of 5 configurable sub-modules:
-
Navigation Bar
-
MainMenu
-
Quicklinks
-
TopSearch
-
Sidebar
The sub-module navigation bar NavBar covers the general behaviour of the navigation system, e.g. how the NavBar is embedded in the page, colors, icons etc. and the placement and behaviour of all the other navigation components.
In order to configure the NAV Module two YAML files are used. All sub-modules of the NavBar get configured in j1_bootsnav.yml
, whereas in j1_bootsnav_mainmenu.yml
*only the Main Menu gets configured. As dropdown menus typically grow over the time, they might become very large in data. This is why a separate file is used for their configuration.
_data
for the NAV Module├──── _data │ │ .. │ │ │ └─── modules │ ├── .. │ ├── j1_bootsnav.yml │ ├── j1_bootsnav_menu.yml │ └─── ..
Module Settings
Consectetur amet consequatur enim autem et sit aut voluptates dolor. Occaecati consectetur odit et sit. Vitae tempore ex fuga. Omnis assumenda quasi eos iure. Quia unde et non rerum sit enim aliquid consequatur quibusdam deleniti.
Resource Settings
resource.yml)
for the_NAV Module_`# -----------------------------------------------------------------------
# Bootsnav4 (NAV Module)
- resource:
enabled: true
id: bootsnav4
comment: Resources for J1 Bootsnav (BS4)
layout: [ all ]
region: head
required: always
script_load: sync
data:
files: [
core4/css/modules/j1_bootsnav4.css,
core4/css/modules/j1_bootsnav_template4.css,
core4/js/j1_adapter_bootsnav4.js
]
init_function: j1Bootsnav4.init
General Settings
The general settings, their values and descriptions are listed in the following excerpt from j1_bootsnav.yml
config file:
The general settings of the NAV module contain settings for the debug mode.
Parameter | Value | Default |
---|---|---|
Description | debug | boolean |
Default Settings
The default module settings, their values and short descriptions are listed in the following excerpt from j1_bootsnav.yml
config file:
# ------------------------------------------------------------------------------
# 1. Default settings
#
defaults:
globals:
debug: false
nav_bar:
brand_position: left
fixed: false
style: overlay
color: light
position: left
bottom_line_height: 1
bottom_line_color: md_grey_200
background_color_full: rgba_darken
background_color_collapsed: rgba_darken
background_color_scrolled: "#20295B"
nav_menu:
raised_level: 5
menu_font_size: large
megamenu_font_size: large
icon_family: FontAwesome
icon_color: md_grey
icon_size: large
menu_item_color: md_grey_50
menu_item_color_hover: md_pink
dropdown_style: raised
dropdown_item_style: flat
dropdown_animate: default
dropdown_animate_duration: 1.5
dropdown_width: 270
dropdown_font_size: small
dropdown_padding_x: 15
dropdown_padding_y: 10
dropdown_item_color: md_grey_900
dropdown_border_color: md_pink
dropdown_border_height: 3
dropdown_background_color_hover: md_indigo_50
dropdown_background_color_active: md_green_100
nav_quicklinks:
enabled: true
icon_family: ZMDI
icon_color: md_white
icon_size: larger
top_search_icon: search
sidebar_icon: more-vert
facebook_icon: facebook
facebook_url: none
twitter_icon: twitter
twitter_url: none
google_plus_icon: google-plus
google_plus_url: none
nav_topsearch:
enabled: true
type: quick_search
icon_family: ZMDI
icon_color: md_white
icon_size: xlarge
search_icon: search
close_icon: close
input_color: md_grey_900
background_color: md_indigo_400
placeholder: QuickSearch
search_heading_lead: Quick Search Results
result_heading_lead: none
nav_sidebar:
display_theme: true
icon_family: ZMDI
icon_color: md_white
icon_size: xlarge
close_icon: close
background_color: md_grey_800
Navigation Bar
The NavBar is configurable in many ways. Fixation, overlay style, color settings, position and many other parameters can be adjusted to one’s personal taste.
The table below provides a list of all possible configuration parameters, their default values and descriptions.
Parameter | Value | Default |
---|---|---|
Description |
| string |
| Color used for the NavBar if main menu is |
|
string |
| Color used for the NavBar if main menu is not |
| string |
|
Color used for the NavBar if the page is |
| string |
| Color used for .. bottom_line_color |
|
integer |
| bottom_line_height (px) |
|
|
|
Position of the brand image |
|
|
| Sets the color for the top level menu items (including Quicklink icons) |
|
boolean [ |
| Enables|Disables a fixed position of the top navigation bar. If a page is being scrolled down, the navigation bar leaves fixed at the most top position of the page. |
|
|
|
Position of the menu bar |
|
|
Main Menu
The Main Menu is the part of the NavBar where the website’s navigational menus themselves appear.
The table below shows all possible configuration parameters for the Main Menu. Note that sublevel
and dropdown
are special configurational parameters that mark the creation of another level of dropdown submenus.
Parameter | Value | Default | Description |
---|---|---|---|
| string |
| Puts an animation of the dropdown and mega-menu. All types allowed specified by animate.css |
| integer |
| dropdown animate duration. |
| string |
| Color used for |
| string |
| Color used for |
| string |
| Color used for |
| integer |
| dropdown_border_height. |
| string |
| dropdown_font_size |
| string |
| Color used for |
| string |
| dropdown_item_style |
| integer |
| dropdown_padding_x. |
| integer |
| dropdown_padding_y. |
| string |
| dropdown_style |
| integer |
| dropdown width (px). |
| string |
| Color used for all dropdown and mega-menu |
| FontAwesome|MDI|ZMDI |
| Set the DEFAULT icon family used for all dropdown and mega-menus from what a (menu) icon should be taken from. |
| string |
| Icon size used for dropdown and mega-menu |
| string |
| Font size used for |
| string |
| Font size used for |
| string |
| Color used for |
| string |
| Color used for |
| integer out of [0 .. 24] |
| Defines the |
Main Menu example
The following excerpt from j1_bootsnav.yml
config file is an example of how to create a main menu item. It shows a single top level item plus a dropdown list of two more topics. One of which eventually has a dropdown list that includes another two submenus.
# Main Menu settings
# -------------------------------------------------------------------------
mainmenu:
icon_family: FontAwesome
icon_color: md_grey
icon_size: large
dropdown_animate: default
animate_duration: 1.5
dropdown_width: 270
dropdown_font_size: small
megamenu_font_size: default
dropdown_padding_v: 10
dropdown_padding_h: 15
dropdown_border_color: j1_accent
dropdown_item_color: j1_primary_50
dropdown_item_color_hover: j1_primary
QuickLink bar
The QuickLink area of the NavBar hosts (as per default) links to common social media websites and provides access both to the Top Search (as will be described later) and the Sidebar.
The following table holds all the config parameters for the Quicklink area of the NavBar.
Parameter | Values | Default | Description |
---|---|---|---|
| boolean |
| Enables|Disables the use of the QuickLink bar. |
|
|
| Icon |
| string |
| Color used for |
| string |
| Icon The name | id depends on the icon font configured with the general settings ( |
| string |
| Icon The name | id depends on the icon font configured with the general settings ( |
| string | no defaults | Quick access to social media sites. The icon is placed within the Quicklink bar in the order configured from the left to the right. An icon is displayed, if the correspondend url is configured. |
| string, | no defaults | Weblink (URL) the the related web site. |
QuickLink settings
The following excerpt from j1_bootsnav.yml
config file gives an overview of the current default settings for the QuickLinks.
# --------------------------------------------------------------------
# QuickLinks settings
#
quicklinks:
enabled: true
icon_size: large
icon_color: "#FFF"
top_search_icon: magnify
sidebar_icon: menu
facebook_icon: facebook
facebook_url: "#"
twitter_icon: twitter
twitter_url:
google_plus_icon: google-plus
google_plus_url:
Top Search
The Top Search bar provides a collapsible search input bar on top of every page used by J1 Template performing SimpleJekyllSearch. If enabled, a magnifier icon is displayed within the Quicklinks area at the most top position of the navigation bar.
Following is a table with all the possible parameters for the top search bar.
Parameter | Values | Default | Description |
---|---|---|---|
| boolean |
| Enables|Disables the use of TopSearch. |
| string |
| Background color of the Search bar. |
| string | Placeholder string displayed if search input is empty. |
|
|
| Icon |
|
string |
| Color used for |
|
string |
| Icon |
|
string |
| Icon |
|
string | Lead title for search results. |
| string |
Top Search settings
Below is an example of how the Top Search bar can be configured.
# --------------------------------------------------------------------
# Top search settings
#
top_search:
enabled: true
background_color: j1_primary_400
placeholder: QuickSearch
icon_size: xxlarge
icon_color: "#FFF"
search_icon: magnify
close_icon: close
search_heading_lead: Quick Search Results
result_heading_lead: >
Quick Search carries out a basic search
for all documemts if this site.
Sidebar
The J1 NavBar also includes a collapsible Sidebar which, depending on the type of the content page, offers useful information or some more navigational items.
Again, also the sidebar provides a lot of interesting configurational parameters. Check them out in the table below.
Parameter | Values | Default | Description |
---|---|---|---|
| boolean |
| Enables or disables the collapsible sidebar. |
| boolean |
| If enabled some information about the theme |
| string |
| Define the size of the used icons. |
| string |
| Define the color of the used icons. |
| string |
| Choose a closing icon out of font awesome icons. |
| string |
| Configure the color of the sidebar’s background. |
| string |
| Set the name for each box in the sidebar. |
| string |
| Define the type of the box that is being used. |
Sidebar example
To get an idea of how the sidebar can be configured, see the following configuration snippet.
# --------------------------------------------------------------------
# Side bar settings
#
sidebar:
enabled: true
display_theme: true
icon_size: xxlarge
icon_color: "#FFF"
close_icon: close
background_color: md_grey_800
boxes:
- box:
title: Site Info
type: linkbox
links:
Über: /pages/about
Impressum: /pages/impress_de
Nutzung: /pages/terms_of_use_de
Datenschutz: /pages/privacy-de
Lizensierung: /pages/license_agreement_de
Contact: mailto:contact@jekyll.one