EverWeb Codebox logo

EverWeb Widgetbox 3

Horizontal Navigation

Horizontal Navigation New WIndow Ext link
Horizontal Navigation New Window
Horizontal Navigation Widget

New Window & External Link Option

This is a single level horizontal navigation which can accept from three to twelve links.
Each hyperlink has a checkbox for setting the option to open the link in a new window.
The last two items in the navigation menu can be configured as links to external pages or files. This is useful for linking to an external blog or ecommerce site.
The individual tabs can have a separator and the end tabs have the option of rounded corners.
There are settings for font color and hover color as well as tab background and hover colors.
The minimum width control allows the tabs to be created at equal width.
There are controls for Top/Bottom and Left/Right padding.
The TB Padding control is used to increase the height of the tabs.
The individual tabs should have a minimum total height of 30px so that they present a decent target for finger tips when the page is viewed on a tablet device.
The navigation can be forced to return by decreasing the widget width if a second row is required. However, it is better to use a second widget for this purpose.

Widget Settings

Choose the web safe font family and set its size, color and background color.
Set the hover color for the font and the background.
Set the minimum width for the tabs if required.
Adjust the top/bottom and left/right padding to taste.
Set the separator color and width. Set the width to zero if no separator is required.
Set the corner radius of the first and last tab if required.
Enter the link text and choose the Link to: page for the first three items.
Check the box for any link that is required to open in a new window.
Add more items as required and check the box to display them.
The last two items are for links to external pages or files. Enter the absolute URL into the box provided.
These two links can also be used for internal pages if needed by entering a relative file path into the box.

This widget is included in the Navigation-2 widget pack.