Hostgator coupons for up to 99% off hosting for Dynamic Drive visitors!
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 (0)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.


Copyright 2006-2015 Dynamic Drive Read our Usage Terms before using any of the CSS codes.