Search on Pixelhint.com

Tutorial – CSS3 Horizontal Navigation Menu Fold Effect

In this weeks tutorial, we will create a horizontal navigation menu fold/unfold effect using css3, lexus inspired us to recreate this tutorial but we will using only css3 no javascript is required for this tutorial and the results are amazing, we will be using css rotateX() function, 3D transform and transition properties to create the fold effect, we will create two styles, one with two sub menu levels and the second with the sub menu level and an image preview, you can preview the final result in the link below.

HTML Markup:

We will create two sub navigation menu styles, below we have a header wrapping a logo and a navigation menu <nav>, the <nav> consists of an unordered list <ul>, with an anchor links <a> and a sub menu inside each list item, the first sub menu style consists of two levels, the first level contains an unordered list <ul>, within each list item <li> there is an anchor link wrapping an icon, text and an <i> element with the “nav_arrow” class to hold the up/down arrow, and the second level contains also an unordered list wrapping an anchor link with text inside it, the second sub menu style consists a list of items, each list item consist of two anchor links one with text(name of the country) and the second one with a span element with the class “preview_arrow” (it’s an arrow holder, it will help us to make the preview look like a tool tip) and an image(preview of the country).

CSS Styling :

Now it’s time for the css, we started first by floating the navigation menu to the right, then we applied some basic styling to the list items “li” and the anchor links inside each list item, we gave the anchor links “a” a line height of 100px just to center them vertically with the header.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

nav{

float:right;

}

navulli{

list-style:none;

float:left;

margin-left:40px;

}

navullia{

display:block;

height:100%;

line-height:100px;

text-decoration:none;

color:#e5edf1;

font-family:'raleway-regular',arial;

font-size:14px;

letter-spacing:1px;

}

Below we styled the icon holder for the navigation items with children, we applied inline-block value to the display property to set the icon in same line as the menu item text/label, we set the background-position x and y axis to 0 0 because we are using a sprite image for the background (you can find the images in the source files), then we applied the transition property to get a smooth linear effect on the hover state, on the hover sate we changed the background-position y axis to -8px to show the arrow pointing to the bottom part of the sprite image we are using.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

nav ul lia.nav_arrow{

display:inline-block;

width:9px;

height:7px;

background:url('../images/nav_arrow.png')no-repeat;

background-position:00;

margin-left:6px;

-webkit-transition:all linear.1s;

-moz-transition:all linear.1s;

-o-transition:all linear.1s;

transition:all linear.1s;

}

nav ul li:hover>a.nav_arrow,

nav ul li.sub_menu>ul>li:hover>a.nav_arrow{

background-position:0-8px;

}

Next we will add the styling for the sub menus style 1 level 1, level 2 and style 2 level 1, we absolutely positioned the sub menus, and set the width to full window width, we applied the transition property to get a slick animation effect, we used the transform property to achieve the flip effect we want by passing a value of 1000px to the perspective function and rotating the sub menu by -90deg on x axis, we will change it to 0 later on the hover state to get the flip effect we want, make sure to set the transform origin on the x axis to 50%.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

.sm_style1_level1,

.sm_style1_level2,

.sm_style2_level1{

width:100%!important;

height:80px;

left:0;

top:100px;

background:#435765;

position:absolute;

opacity:0;

z-index:2;

/* transition: <property> <duration> <timing-function> <delay>; */

-webkit-transition:all.4scubic-bezier(0.77,0,0.175,1).4s;

-moz-transition:all.4scubic-bezier(0.77,0,0.175,1).4s;

-o-transition:all.4scubic-bezier(0.77,0,0.175,1).4s;

transition:all.4scubic-bezier(0.77,0,0.175,1).4s;

-webkit-transform:perspective(1000px)rotateX(-90deg);

-moz-transform:perspective(1000px)rotateX(-90deg);

-o-transform:perspective(1000px)rotateX(-90deg);

transform:perspective(1000px)rotateX(-90deg);

-webkit-transform-style:preserve-3d;

-moz-transform-style:preserve-3d;

-o-transform-style:preserve-3d;

transform-style:preserve-3d;

-webkit-transform-origin:50%0;

-moz-transform-origin:50%0;

-o-transform-origin:50%0;

transform-origin:50%0;

}

.sm_style1_level2{

top:80px;

background:#3c4f5d;

-webkit-transition-delay:.2s;

-moz-transition-delay:.2s;

-o-transition-delay:.2s;

transition-delay:.2s;

}

Now let’s style the sub menu list items, we floated the li items to the right, and we set a separator between each list item by giving each one of them a border right, we gave each list item a width of 19.9% (this values is calculated by dividing 100% by 5, 5 is the number of sub menu list item “li”), we removed the border from the last list item child by using the pseudo class :last-child, we want the anchor link the take the full width and height of the list items, then we moved the menu item icon from right of the text and we pushed it from the bottom by -5px to center it vertically with the menu item text.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

navulliulli{

list-style:none;

float:left;

display:block;

text-align:center;

border-right:1pxsolid#3c4f5d;

margin:0;

width:19.9%;

}

nav ul li ul li:last-child{

border-right:0;

}

navulliullia{

display:block;

width:100%;

height:100%;

line-height:80px;

text-decoration:none;

color:#e3eff4;

}

nav ul li ul li img.menu_icon{

margin:010px-5px0;

}

navulliullili{

border-right:1pxsolid#334552;

}

We need to relatively position the list items li of the sub menu style 2, so we can absolutely position the previews inside each list item, by giving the preview a left position of 50% and a negative margin left value of -75px we centered it horizontally with it’s parent element (li), we added a nice white border of 2px around the preview, we set it’s opacity to 0 in order to hide it but we will show on the hover state later.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

nav ul li.sm_style2_level1>ul>li{

position:relative;

}

nav ul li li.preview{

display:block;

width:150px;

height:100px;

position:absolute;

left:50%;

margin-left:-75px;

background:#ffffff;

text-decoration:none;

border:2pxsolid#fff;

opacity:0;

/* transition: <property> <duration> <timing-function> <delay>; */

-webkit-transition:all.4scubic-bezier(0.77,0,0.175,1).2s;

-moz-transition:all.4scubic-bezier(0.77,0,0.175,1).2s;

-o-transition:all.4scubic-bezier(0.77,0,0.175,1).2s;

transition:all.4scubic-bezier(0.77,0,0.175,1).2s;

-webkit-transform:perspective(1000px)rotateX(-90deg);

-moz-transform:perspective(1000px)rotateX(-90deg);

-o-transform:perspective(1000px)rotateX(-90deg);

transform:perspective(1000px)rotateX(-90deg);

-webkit-transform-style:preserve-3d;

-moz-transform-style:preserve-3d;

-o-transform-style:preserve-3d;

transform-style:preserve-3d;

-webkit-transform-origin:50%0;

-moz-transform-origin:50%0;

-o-transform-origin:50%0;

transform-origin:50%0;

}

we used the “preview_arrow” class to add a white arrow (find the arrow in the source files) to the preview, to make look like a tool tip, we absolutely positioned it and gave it a left value of 50% and a negative left margin to center it horizontally, it’s the same techniques that we used in the step before to center the element, the element must be absolutely positioned.

1

2

3

4

5

6

7

8

9

10

nav ul li li.preview.preview_arrow{

display:block;

position:absolute;

width:12px;

height:6px;

background:url('../images/box-arrow.png')no-repeat;

left:50%;

margin:-7px00-6px;

text-align:center;

}

Let’s move now to the final step which is the hover state, on hover we will show the sub menus level 1, level 2 and the preview, for that we set the opacity to 1, and rotate them on the x axis to 0deg to get the fold effect we want to achieve, we will fold the second sub menu level(sm_style1_level2) and the preview first, then follow by the first levels(sm_style1_level1 and sm_style2_level1) to get a nice fold effect when the cursor leaves the second sub menu or the preview, that’s why we delayed the first level by 6ms and the second level by 4ms.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

nav ul li:hover.sm_style1_level1,

nav ul li li:hover.sm_style1_level2,

nav ul li:hover.sm_style2_level1,

nav ul li li:hover.preview{

opacity:1;

-webkit-transform:perspective(1000px)rotateX(0deg);

-moz-transform:perspective(1000px)rotateX(0deg);

-o-transform:perspective(1000px)rotateX(0deg);

transform:perspective(1000px)rotateX(0deg);

}

nav ul li:hover.sm_style1_level1,

nav ul li:hover.sm_style2_level1{

-webkit-transition-delay:.6s;

-moz-transition-delay:.6s;

-o-transition-delay:.6s;

transition-delay:.6s;

}

nav ul li li:hover.sm_style1_level2,

nav ul li li:hover.preview{

-webkit-transition-delay:.4s;

-moz-transition-delay:.4s;

-o-transition-delay:.4s;

transition-delay:.4s;

}

We are Done, we hope you find this tutorial useful, you can find more useful tutorial here, if you have any question please write it in the comment section below, we read and reply to every single comment.