Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library

CSS Library: Horizontal CSS Menus: CSS3 demos: Here

FlexBox Rectangles Menu

Author: Dynamic Drive

This is a logo plus UL menu combination where the menu links consist of big colorful rectangles. It uses CSS Flexbox to render the menu links equal in dimension while fluid at the same time- modify the number of menu links as desired without breaking the layout. The text inside the menu is also perfectly centered thanks to Flexbox. And as a little sugar on top, we use CSS3 transform to create a "lift up" effect when the mouse rolls over a menu item.

This menu works in IE10+ and all other modern browsers. In IE9 or below, a fallback layout is used where the menu links are fixed in dimension but not fluid to take advantage of the available width of the browser window.

Demo:

The CSS:

The HTML:

Code Info

Rate this code:

Date Posted: 06/20/2016

Revision History: None

Usage Terms: Click here

Your Comments
Copyright 2006-2016 Dynamic Drive