Submit your widget

Awesome jQuery and CSS3 Interactive menu

Created 5 years ago   Views 73958   downloads 15605    Author red-team-design
Awesome jQuery and CSS3  Interactive menu
View DemoDownload 9.6 KB
Share |

This example will tell you how to create an interactive menu using CSS3 goodness and jQuery’s power.

The idea

The idea behind this example was to have some nicely arranged blocks and once you click on one of them, the block will start showing its hidden content starting at its current position.

Besides being a menu, this example can also serve as a perfect single page website. For example, just think that a block can be named “Contact” and could contain a nice contact form.


Nothing too complicated here, each block has a title that is hidden once its adjacent content will be triggered. Regarding tabindex will discuss a little later.

 <ul class="menu">
    <li tabindex="1">
      <span class="title">One</span>
      <div class="content">Lorem ipsum dolor sit amet...</div>
    <li tabindex="1">
      <span class="title">Nine</span>
      <div class="content">Lorem ipsum dolor sit amet...</div>


In the following rows I’ll try to explain a bit the styles that were used to create this example.


First of all we’re going to add some basic styles for our list wrapper including clearing floats. Also, you may have noticed the counter-reset: li; declaration, you’ve seen it before and we’ll use it further again to create a nice counter effect.

  width: 620px;
  margin: 100px auto; padding: 15px;
  list-style: none;
  counter-reset: li;
  background: #eee;
  box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;
  border-radius: 10px;

.menu:after {
  content: "";
  display: table;

.menu:after {
  clear: both;

.menu {

Read more: