EverWeb Codebox logo

EverWeb Widgetbox 3

Vertical Navigation

Vertical Navigation New WIndow Ext link
Vertical Navigation New Window
Vertical Navigation New Window

New Window & External Link Option

This is a single level vertical 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 styled for width and color.
There are settings for font color and hover color as well as tab background and hover colors.
The navigation container can be styled for background color, padding, crner radius and border width and color.
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.
If more tabs are required, use two widgets stacked one on top of the other.

Widget Settings

Set the container background color, padding, corner radius and border width and color.
Choose the web safe font family and set its size, color and background color.
Set the separator color and width. Set the width to zero if no separator is required.
Set the hover color for the font and the background.
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.