Hi guys, Here I come with very cool box effect menu using just CSS3 and HTML. I am pretty sure that you have read my one of the previous article for CSS3 Pulse Effect.
I have used box-shadow and transform effect to make this happen. Also I have used some pseudo element selector to provide the different styles to element. In this tutorial I have used [code]nth-child(even)[/code] to find all even li under UL.
So let’s start with how to build this, I will provide you the whole source code for this tutorial.
HTML
[cc lang=”html”]
[/cc]
CSS
[cc lang=”CSS”]
.step_menu1 {
z-index: 1000;
float: left;
min-width: 160px;
max-width: 220px;
_width: 160px;
padding: 4px 0;
margin: 0px 0px 0px 95px;
list-style: none;
background-color: whitesmoke;
}
.step_menu1 a {
display: block;
padding: 10px 15px;
clear: both;
font-weight: bold;
font-size: 14px;
line-height: 18px;
color: #B7B7B7;
white-space: nowrap;
}
.step_menu1 li {
text-align: center;
padding: 7px 0;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
line-height: 18px;
background: whitesmoke;
-moz-transition: all 0.26s ease-out;
-o-transition: all 0.26s ease-out;
-webkit-transition: all 0.26s ease-out;
-ms-transition: all 0.26s ease-out;
}
/* Giving border to even LI */
.step_menu1 li:nth-child(even) {
background: whitesmoke;
border: solid #CCC;
border-width: 0 1px 1px 0;
}
/* Hover Action Here */
.step_menu1 li:hover {
-moz-box-shadow: 1px 1px #CCC, 2px 2px #CCC, 3px 3px #CCC, 4px 4px #CCC,
5px 5px #CCC, 6px 6px #CCC, 7px 7px #CCC, 8px 8px #CCC;
-webkit-box-shadow: 1px 1px #CCC, 2px 2px #CCC, 3px 3px #CCC, 4px 4px
#CCC, 5px 5px #CCC, 6px 6px #CCC, 7px 7px #CCC, 8px 8px #CCC;
box-shadow: 1px 1px #CCC, 2px 2px #CCC, 3px 3px #CCC, 4px 4px #CCC, 5px
5px #CCC, 6px 6px #CCC, 7px 7px #CCC, 8px 8px #CCC;
-webkit-transform: translate(-10px, -10px);
-moz-transform: translate(-10px, -10px);
-o-transform: translate(-10px, -10px);
-ms-transform: translate(-10px, -10px);
text-decoration: none;
}
[/cc]
Live Demo
Don’t’ worry I also have prepared a fully working demo for you to see that in action. You can have this demo working at below URL:
Any Thoughts?
If you any doubts and problems in implementing this for your use, you can simply comment over here are i will follow through it. Don’t forget to share your thoughts on this article via comments.
And Yes last but not least, so subscribe to our RSS Feed via mail to get all latest updated from US, Like us on Facebook or Follow us no Twitter. If you do so, I am sure you will never miss any article/freebies or updates from us.
