ThemeKit Mega

Mega Tab & Nav

The ThemeKit Mega Nav is created using two widgets - the ThemeKit Mega Tab and the ThemeKit Mega Nav - in combination.
Links are sorted into groups which are opened using filter tabs at the top of the navigation links.
Research has shown that a horizontal menu at the top with dropdowns is not the best choice to achieve click through to other pages of the site.
This mega navigation overcomes the problems of navigating large sites by placing all the links - front and center - in the middle of the browser/device window.

Mega Tab

The ThemeKit Mega Nav is created using two widgets - the ThemeKit Mega Tab and the ThemeKit Mega Nav - in combination.
Links are sorted into groups which are opened using filter tabs at the top of the navigation links.
Mega Tab
The tab can show an icon, text or both. When both are displayed there is a horizontal spacing control to adjust their relative positions.
Styles
The tet can use a Google hosted font with a websafe fallback. There are controls for font size, color, background color and opacity, hover background color, padding top/bottom and left/right and border radius.
Position
The tab is fixed can be positioned at the top left or right. There are controls for setting its position on the X and the Y-axis.
Mobile Position
To make life a lot easier for mobile users the tap position can be switched to the bottom for these devices by checking a box.
The mobile tab has controls for maximum width and its position up from the bottom.

Mega Nav

The ThemeKit Mega Nav widget creates the category buttons and the links. As the links are added and the categories entered. The group tabs and their text are autonatically generated.
The active tab is distinguished by using a different background color.
Grid Layout
Both the filter tabs and the navigation links have a grid layout using auto-fit keyword with the minmax selector so that the number of links per row will automatically change in relation to browser/device screen width depending on the value set for min width..
Both the filter tabs and the links have common controls for adjusting the overall background color and its opacity. padding and grid gap.
Separator
The separator line between the filter buttons and links has controls for border width (height) and color. The separator style options are dashed, dotted, double and solid.
Links
The links inherit the min width, font size color and bacground from the filter tabs and have their own comtrol for hover background color. The hovers are animated for a smooth transition.
As can be seen from the demo, when the link text needs to return to a second row the text in all the links in that row is vertically centered.
Mobile
When the navigation links are too large to be viewed on a mobile device screen the overflow will scroll into view.