One component most websites will have in common is some form of navigation, more often than not this navigation will come in the form of a horizontal menu. Today we would like to share with you some inspiration for horizontal menus featuring animated border effects. Each of these snippet feature an animated border effect as you hover each menu item, adding life to your navigation and to your users website experience.

Please note that we use CSS properties which only work in modern browsers.

See the Pen #1226 - Horizontal menu with slide down on hover by LittleSnippets.net (@littlesnippets) on CodePen.

See the Pen #1217 - Horizonatal Menu by LittleSnippets.net (@littlesnippets) on CodePen.

See the Pen #1211 - Menu with animation on hover by LittleSnippets.net (@littlesnippets) on CodePen.

See the Pen #1198 - Menu vertical line effect on hover by LittleSnippets.net (@littlesnippets) on CodePen.

See the Pen #1189 - Horizontal menu items by LittleSnippets.net (@littlesnippets) on CodePen.

See the Pen #1175 - Menu sliding border on hover by LittleSnippets.net (@littlesnippets) on CodePen.

See the Pen #1169 - Menu with border on hover by LittleSnippets.net (@littlesnippets) on CodePen.

See the Pen #1155 - Menu with line hover effect by LittleSnippets.net (@littlesnippets) on CodePen.

See the Pen #1143 - Horizontal Menu Items by LittleSnippets.net (@littlesnippets) on CodePen.

See the Pen #1135 - Menu with reveal hover effect by LittleSnippets.net (@littlesnippets) on CodePen.