Animated Horizonal Navigation

The navigation can have up to fourteen links. The last two links can be configured as internal or external links to open in a new window if required.
There are options for indicating the current page and the links have a hover animation.
Setup
The menu can use a web safe font or a non web safe or Google hosted font with web safe fallback and can be styled for font size, color, background color, hover color and the navigation background color and its opacity.
Fixed Width or Responsive
For a fixed width page layut, adjust the navigation widget width using a drag handle or the Metrics inspector. For a full width responsive item, check the Full Width box in the Metrics inspector.
The navigation links can aligned left, center or right within the container. The value for LR padding is used to move the links away from the browser edge when left or right align is selected.
The value for TB padding adjusts the overall height.

Options

Current Page
The navigation can show the current page in a different color if required by checking a box and choosing the color.
Animation
The animation is created by adding aborder using CSS pseudo element. On load, the border width is zero and on hover it expands to 100%.
The change from on load to the hover state is smoothed out by adding a CSS transition. The transition time is adjustable in milliseconds.
If the indicator is not required, set its width to zero.
The vertical position of the indicator can be adjusted in relation to the text. If this value is increased, the value for TB padding should also be increased to keep the indicator within the navigation container.
Vertical Nav
A vertical version of this widget is available. This can be used in combination with the horizontal nav to create two level navigation. The horizontal nav is used for the top level items and the vertical nav for navigating within each directory.
Click the Info button to see the vertical navigation.