Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
23rd January 2014

Build a CSS flipdown/flipup menu

Recreate the flipdown/flip up menu effect seen on the Lexus International site

 

Build a CSS flipdown/flipup menu

inspiration www.lexus-int.com

If your company’s strapline is ‘The Pursuit of Perfection’, then you really can’t get away with publishing a sub-standard website. Lexus has put a considerable amount of care into their online presence and the intention to reflect the same brand values for their cars as well as through their website is clear.

Each time you write a line of code, there’s an opportunity to match what you are doing to the values of a company’s brand or a website’s content. If you make thoughtful, value-adding decisions you will achieve a website that is greater than the sum of its parts and really lends support to a campaign or identity.

TECHNIQUE

Set up the holder

The perspective property enables the 3d-space for all of the children elements and also controls the distance between the Z plane and the user. A smaller value creates a more dynamic result. A greater value creates a more subtle effect. You should tweak this property to fine-tune exactly how your flipdown menu appears. The preserve-3d property enables each child element to maintain its 3D position.

001 .menuHolder {
002 perspective: 80px;
003 }
004 .menuHolder ul.nav {
005 transform-style: preserve-3d;
006 }

Set up animation and hide

The sub-menu <div> is rotated by -90 degrees, which is its flipped up position. The backface-visibility property, as its name suggests, enables you to make an element hidden when the back of it would have otherwise been displayed. If you leave this snippet of code out, you’ll see the sub-menus hanging in place ready to flip down when required.

001 .menuHolder ul.nav div { 
002 transition: 0.5s;
003 transform-origin: 0px 0px;
004 transform: rotateX(-90deg);
005 backface-visibility: hidden;
006 }

Rotate into position

When the user hovers over a main menu item that has its own sub-menu, the sub-menu is transformed back to its ‘normal’ position, that is, 0 degrees rotated. The main menu item and its sub-menu are all inside the <div> so the sub-menu remains visible when the mouse hovers over either of these areas.

001 .menuHolder ul.nav li:hover div {
002 transform: rotateX(0deg);
003 }

CSS-only arrows

To make it apparent to the user which main menu item has its own sub-menu, little arrows are used. CSS only, obviously! You can work out the code yourself or visit cssarrowplease.com and have it generate the CSS for you. Then all you need to is add where the arrows should appear (in this case, top: 78px) and then be sure to add the arrow_box class.

001 .arrow_box {position:relative;} 
002 .arrow_box:after { top: 78px;     border:     solid transparent; content:     “ “; height: 0; width: 0; position:     absolute;     pointer-events: none;} 
003 .arrow_box:after { border-color:     rgba(221, 221, 221, 0); border-top-    color: #67A; border-width: 10px; left:     50%; margin-left: -10px;}

The HTML

All of the clever stuff is kept apart from the HTML, as it should be, leaving just a main unordered list with nested unordered lists for each one of the sub-menus. The full page background image CSS and the webfont (and custom icon font covered in Section 3) are both linked as separate styles.

Tags: ,
  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • Michael White

      all of that was crystal clear…..NOT?