CSS3 Box Menu

  • Avinash
  • 1
  • May 27, 2012
  • Tutorial

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 nth-child(even) 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

  <ul class="step_menu1">
    <li><a href="#">First Menu</a></li>
    <li><a href="#">Second Menu</a></li>
    <li><a href="#">Third Menu</a></li>
    <li><a href="#">Fourth Menu</a></li>
    <li><a href="#">Fifth Menu</a></li>
  </ul>

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; }
.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;
}

Live Demo

Dont’ worry I also have prepared fully working demo for you to see that in action. You can have this demo working at below URL:

CSS3 Box Menu Demo

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.

Related Posts

Written by Avinash

Avinash Zala is leading various projects which deals with the various technology involved with the web. A combination of perfect technical and management skills. Avinash would like to chat with you and convert your imagination into the working system. You can get in touch with him on Facebook and Twitter.

View all posts by:

  • http://epicmagazine.net Harikrishna

    OMG! Awesome :D

    Well I tried this for horizontal menus :3 And, yeah -moz-transform doesn’t seem to be working for Mozilla …. I can see it render beautifully on Chrome, but Mozilla couldn’t :(

    Will it work with background as an image ?? I didnt try it yet :P