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.

Izmir - ImageHover CSS Library

Izmir is a mini CSS library allowing you to quickly create beautiful image hover elements. Packed with a host of styling classes and custom properties, Izmir allows you total control and almost limitless possibilites.

Turin - ImageHover CSS Library

Turin is the second in a series of mini CSS ImageHover libraries, this time with a transparent border effect on hover These libraries allow you to create beautiful image hover elements quickly and easily.