CSS3 3D Top Shift Menu
Join the DZone community and get the full member experience.
Join For Free
in this tutorial i will show you how to create animated 3d
navigation menu (with images) with css3 only (javascript-free ). we will
be using the power of css3 effects like perspective, box-sizing,
transforms, gradients and transitions. you can use this menu in order to
make a professional look of your website. pay attention, than to see
this menu you should move and hover your mouse over the blue element at
the top of page.
this is our final result:
here are samples and downloadable package:
live demo
download in package
step 1. html
the first step is to define the html markup.
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>css3 3d top shift menu | script tutorials</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<link href="css/menu.css" rel="stylesheet" type="text/css" />
</head>
<body class="menu_body">
<!-- the main menu element -->
<div class="menu">
<ul>
<li><a href="#"><img src="images/1.png" /></a></li>
<li><a href="#"><img src="images/2.png" /></a></li>
<li><a href="#"><img src="images/3.png" /></a></li>
<li><a href="#"><img src="images/4.png" /></a></li>
<li><a href="#"><img src="images/5.png" /></a></li>
<li><a href="#"><img src="images/6.png" /></a></li>
<li><a href="#"><img src="images/7.png" /></a></li>
</ul>
</div>
<div class="page_content">
<div class="shade"></div>
<div class="box">
<div class="header">box header</div>
<div class="body">
any dummy text
</div>
<div class="footer">box footer</div>
</div>
<div class="box">
<div class="header">box header</div>
<div class="body">
any dummy text
</div>
<div class="footer">box footer</div>
</div>
</div>
</body>
</html>
in the body of the document we have the menu and page_content element. main idea is to divide the page into two semantic sections. the main menu consists of ul-li unordered list elements. each element has own image.
the page contains of the shade element (which is invisible by default) and rest code (i prepared two design boxes here). each box contains – the header, the body and the footer.
step 2. css
i want to notice that current menu should work well in most of the modern web browsers (except ie). the best results are in firefox and chrome.
now – let’s start styling the navigation menu! first, we write the rules for document’s body element:
css/menu.css
.menu_body {
/* css3 perspective */
-webkit-perspective: 1500px;
-moz-perspective: 1500px;
-ms-perspective: 1500px;
-o-perspective: 1500px;
perspective: 1500px;
}
it adds perspective to our page. now we have to write the base rules for our menu and even for content section:
.menu, .page_content {
/* css3 box-sizing, transition and transform */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: -webkit-transform 0.5s ease;
-moz-transition: -moz-transform 0.5s ease;
-ms-transition: -ms-transform 0.5s ease;
-o-transition: -o-transform 0.5s ease;
transition: transform 0.5s ease;
}
/* the main menu element (which appears from the top) */
.menu {
background-color: #002edb;
display: block;
position: fixed;
width: 100%;
height: 148px;
z-index: 1;
/* css3 transform */
-webkit-transform: rotatex(-45deg) translatey(-95%);
-moz-transform: rotatex(-45deg) translatey(-95%);
-ms-transform: rotatex(-45deg) translatey(-95%);
-o-transform: rotatex(-45deg) translatey(-95%);
transform: rotatex(-45deg) translatey(-95%);
}
/* change background color and rotate the main menu element on hover */
.menu:hover {
background-color: #4169ff;
/* css3 transform */
-webkit-transform: rotatex(0deg);
-moz-transform: rotatex(0deg);
-ms-transform: rotatex(0deg);
-o-transform: rotatex(0deg);
transform: rotatex(0deg);
}
/* rest page content */
.page_content {
padding: 20px 0 0;
}
please notice that we use rotatex and translatey properties to show and hide the main menu. now, we should prepare the rules for our unordered list with images:
/* the main menu - ul-li properties */
.menu ul {
display: block;
margin: 0 auto;
overflow: hidden;
position: relative;
width: 1036px;
}
.menu ul li {
float: left;
list-style: none outside none;
margin: 10px;
/* css3 transition */
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.menu ul li:hover {
background-color: #7e00d6;
/* css3 border-radius */
-webkit-border-radius: 64px;
-moz-border-radius: 64px;
-ms-border-radius: 64px;
-o-border-radius: 64px;
border-radius: 64px;
}
we use easy transition for our images – we change color and set the radius for them. when we keep our mouse over the menu – we should make the page a little bit darker (we are going to use the shade element – gradient):
/* page's shade element (invisible by default) */
.page_content .shade {
display: block;
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
visibility: hidden;
width: 100%;
z-index: 1000;
/* css3 linear-gradient */
background: -moz-linear-gradient(top, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.65) 100%);
background: -webkit-gradient(linear, top top, bottom top, color-stop(0%,rgba(0,0,0,0.15)), color-stop(100%,rgba(0,0,0,0.65)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.65) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.65) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.65) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.65) 100%);
/* css3 transition */
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
and finally, we should enable our shade and also we should rotate our page_content element when we hover the menu:
/* when we hover on menu - turn page_content down */
.menu:hover ~ .page_content {
/* css3 transform */
-webkit-transform: rotatex(-45deg) translatey(80px);
-moz-transform: rotatex(-45deg) translatey(80px);
-ms-transform: rotatex(-45deg) translatey(80px);
-o-transform: rotatex(-45deg) translatey(80px);
transform: rotatex(-45deg) translatey(80px);
}
/* when we hover on menu - display the shade */
.menu:hover ~ .page_content .shade {
opacity: 1;
visibility: visible;
}
in the long run our animated 3d css3 menu is complete!
live demo
download in package
conclusion
have you liked this tutorial? if so – make sure to share it with your friends and share your thoughts in the comment section below.
Published at DZone with permission of Andrey Prikaznov, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
Comments