Maux
11/12/2012 - 9:51 PM

A CodePen by Maux Webmaster. Menus Collections with CSS - Some cool menus with just CSS. Thanks to Codrops Link of reference: http://goo.gl/

A CodePen by Maux Webmaster. Menus Collections with CSS - Some cool menus with just CSS. Thanks to Codrops Link of reference: http://goo.gl/QodXi

/*********** LESS ************/
.rounded(@radius:5px){
  -webkit-border-radius:@radius;
  -moz-border-radius:@radius;
  border-radius:@radius;
}
.boxShadow(@args){
  -webkit-box-shadow:~"@{args}";
  -moz-box-shadow:~"@{args}";
  box-shadow:~"@{args}";
}
.gradientV(@start:#fff,@end:#000) {
  background-color: @start;
  background:-webkit-gradient(linear, left top, left bottom, from(@start), to(@end));
  background:-webkit-linear-gradient(top, @start, @end);
  background:-moz-linear-gradient(top, @start, @end);
	background:-ms-linear-gradient(top, @start, @end);
	background:-o-linear-gradient(top, @start, @end);
	background:linear-gradient(top, @start, @end);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorStr="@{start}", EndColorStr="@{end}");
}
.textShadow(@args){
	-webkit-text-shadow:~"@{args}";
	-moz-text-shadow:~"@{args}";
	text-shadow:~"@{args}";
}
.opacities(@arg:1){
	@ms_op:(@arg*100);
	-ms-filter:~"progid:DXImageTransform.Microsoft.Alpha(Opacity=@{ms_op})";
	filter: alpha(opacity=@ms_op);
	-khtml-opacity:@arg;
	-moz-opacity:@arg;
	opacity:@arg;
}
.transitions (@prop:all,@time:.5s,@timing:linear,@delay:0s){
	-webkit-transition:@prop @time @timing @delay;
	-moz-transition:@prop @time @timing @delay;
	-ms-transition:@prop @time @timing @delay;
	-o-transition:@prop @time @timing @delay;
	transition:@prop @time @timing @delay;
}
/**************************/
html,body{
  background:#333 !important;
}
.content{
  background:#fff;
  .rounded;
  margin:0 auto;
  padding:5px;
  width:80%;
}
#menu1{
  background:#000;
  border:0;
  border-bottom:5px solid #888;
  display:inline-block;
  margin:10px 0;
  padding:0;
  position:relative;
  width:100%;
  z-index:999;
  ul{
    float:right;
    list-style:none;
    margin:0;
    padding:0;
    position:relative;
    right:50%;
    li{
      border-right:1px dotted #999;
      float:left;
      left:50%;
      margin:0;
      padding:0;
      position:relative;
      &:last-of-type{
        border:0;
      }
      a{
        color:#fff;
        display:block;
        font:italic 18px "Georgia","Times New Roman",Times,serif;
        min-width:8em;
        padding:.25em .5em;
        text-decoration:none;
        .transitions(all,.5s,ease);
        span{
          display:block;
        }
        .title{
          border-bottom:1px dotted #999;
          padding:0 0 .25em;
        }
        .exp{
          font-size:12px;
          padding:.25em 0 0;
          .opacities(0);
          text-align:right;
        }
        &:hover{
          background:#444;
          .exp{
            .opacities;
          }
        }
      }
    }
  }
}
#menu2{
  background:#ccc;
  border:0;
  border-bottom:5px solid #666;
  border-top:5px solid #666;
  display:inline-block;
  margin:10px 0;
  padding:0;
  position:relative;
  width:100%;
  z-index:999;
  ul{
    float:right;
    list-style:none;
    margin:0;
    padding:0;
    position:relative;
    right:50%;
    li{
      float:left;
      left:50%;
      margin:0;
      padding:0;
      position:relative;
      a{
        color:#666;
        display:block;
        font:bold 21px sans-serif;
        min-width:7em;
        padding:.25em .5em;
        text-decoration:none;
        .transitions(all,.5s);
        span{
          display:block;
        }
        .title{
          text-align:center;
        }
        .exp{
          background:rgba(0,0,0,.75);
          bottom:-5px;
          color:#f0f0f0;
          font:bold 12px/1 sans-serif;
          margin:0 0 0 0;
          .opacities(0);
          padding:5px;
          position:absolute;          
          right:0;
          text-align:right;
          width:100%;
          .transitions(all,.5s);
        }
        &:hover{
          background:#e0e0e0;
          color:#000;
          .exp{
            .opacities;
          }
        } 
      }
    }
  }
}
#menu3{
  background:#fff;
  border:0;
  border-bottom:4px double #888;
  border-top:4px double #888;
  display:inline-block;
  margin:10px 0;
  padding:0;
  position:relative;
  width:100%;
  z-index:999;
  ul{
    float:right;
    list-style:none;
    margin:0;
    padding:0;
    position:relative;
    right:50%;
    li{
      float:left;
      left:50%;
      margin:0;
      padding:0;
      position:relative;
      a{
        color:#888;
        display:block;
        font:18px "Georgia","Times New Roman",Times,serif;
        min-width:9em;
        margin:0;
        padding:.5em .5em;
        text-decoration:none;
        .transitions(all,.3s);
        span{
          display:block;
          .transitions(all,.3s);
        }
        .title{
          border-bottom:1px solid;
          border-top:1px solid;
          margin-bottom:.5em;
          text-align:center;
        }
        .exp{
          color:#900;
          font:11px/1 "Georgia","Times New Roman",Times,serif;
          .opacities(0);
          text-align:center;
          text-transform:uppercase;
        }
        &:hover{
          background:rgba(255,0,0,.1);
          .title{
            color:#900;
          }
          .exp{
            .opacities;
          }
        } 
      }
    }
  }
}
#menu4{
  background:#FFC730;
  display:inline-block;
  margin:10px 0;
  padding:0;
  position:relative;
  width:100%;
  z-index:999;
  ul{
    float:right;
    list-style:none;
    margin:0;
    padding:0;
    position:relative;
    right:50%;
    li{
      float:left;
      left:50%;
      margin:0;
      padding:0;
      position:relative;
      a{
        color:#333;
        display:block;
        font:bold 18px/1.5em sans-serif;
        min-width:8em;
        margin:0;
        padding:.25em .5em;
        text-decoration:none;
        .transitions(all,.3s);
        span{
          display:block;
          .transitions(all,.3s);
        }
        .title{
          border-bottom:1px solid #333;
          text-align:left;
        }
        .exp{
          background:#FFC730;
          color:#333;
          font:11px/1.5 sans-serif;
          .opacities(0);
          padding:0 .75em 0 0;
          text-align:right;
          text-transform:uppercase;
        }
        &:hover{
          background:#333;
          .title{
            color:#ffc730;
          }
          .exp{
            .opacities;
          }
        } 
      }
    }
  }
}
#menu5{
  background:#FFF;
  display:inline-block;
  margin:10px 0;
  padding:0;
  position:relative;
  width:100%;
  z-index:999;
  ul{
    float:right;
    list-style:none;
    margin:0;
    padding:0;
    position:relative;
    right:50%;
    li{
      border-left:5px solid #888;
      float:left;
      left:50%;
      margin:0;
      padding:0;
      position:relative;
      &:last-child{
        border-right:5px solid #888;
      }
      a{
        color:#888;
        display:block;
        font:bold 18px/1.5em sans-serif;
        min-width:8em;
        margin:0;
        padding:.25em;
        text-decoration:none;
        span{
          display:block;
          .transitions(all,.5s,linear);
        }
        .title{
          border-bottom:2px solid #fff;
        }
        .exp{
          color:#c00;
          font:bold 11px/1.5 sans-serif;
          .opacities(0);
          padding:.25em 0 0;
          text-align:right;
          text-transform:uppercase;
          &:before{
            content:attr(data-hex)"\00a0";
            font:18px/1 sans-serif;
          }
        }
        &:hover{
          .title{
            color:#000;
            border-bottom:2px solid #c00;
          }
          .exp{
            .opacities;
          }
        } 
      }
    }
  }
}
#menu6{
  background:#ccc;
  .rounded(10em);
  display:inline-block;
  margin:10px 0;
  padding:0;
  position:relative;
  width:100%;
  z-index:999;
  ul{
    float:right;
    list-style:none;
    margin:0;
    padding:0;
    position:relative;
    right:50%;
    li{
      float:left;
      left:50%;
      margin:0;
      padding:0;
      position:relative;
      a{
        color:#888;
        border:4px double #ccc;
        display:block;
        font:18px/1.5em "Georgia","Times New Roman",Times,serif;
        min-width:8em;
        margin:0;
        padding:.25em;
        text-align:center;
        text-decoration:none;
        text-transform:uppercase;
        .transitions(all,.5s,linear);
        span{
          display:block;
          .transitions(all,.5s,linear);
        }
        .title{
          border-bottom:2px solid #ccc;
        }
        .exp{
          color:#888;
          font:10px "Georgia","Times New Roman",Times,serif;
          letter-spacing:1px;
          .opacities(0);
          padding:.25em 0 0;
          text-align:center;
        }
        &:hover{
          background:#fff;
          .title{
            color:#000;
          }
          .exp{
            .opacities;
          }
        } 
      }
    }
  }
}
<div class="content">
  <div id="menu1">
    <ul>
      <li>
        <a href="#">
          <span class="title">Home</span>
          <span class="exp">Welcome</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="title">Portfolio</span>
          <span class="exp">What I Do</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="title">Blog</span>
          <span class="exp">What's Happening</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="title">Resources</span>
          <span class="exp">All You Need</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="title">Tutorials</span>
          <span class="exp">In Details</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="title">Contact</span>
          <span class="exp">How to get in touch</span>
        </a>
      </li>
    </ul>
  </div>
  <div id="menu2">
    <ul>
      <li>
        <a href="#">
          <span class="title">Home</span>
          <span class="exp">Welcome</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="title">Portfolio</span>
          <span class="exp">What I Do</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="title">Blog</span>
          <span class="exp">What's Happening</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="title">Resources</span>
          <span class="exp">All You Need</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="title">Tutorials</span>
          <span class="exp">In Details</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="title">Contact</span>
          <span class="exp">How to get in touch</span>
        </a>
      </li>
    </ul>
  </div>
  <div id="menu3">
    <ul>
      <li>
        <a href="#">
          <span class="title">Home</span>
          <span class="exp">Welcome</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="title">Portfolio</span>
          <span class="exp">What I Do</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="title">Blog</span>
          <span class="exp">What's Happening</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="title">Resources</span>
          <span class="exp">All You Need</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="title">Tutorials</span>
          <span class="exp">In Details</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="title">Contact</span>
          <span class="exp">How to get in touch</span>
        </a>
      </li>
    </ul>
  </div>
  <div id="menu4">
    <ul>
      <li>
        <a href="#">
          <span class="title">Home</span>
          <span class="exp">Welcome</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="title">Portfolio</span>
          <span class="exp">What I Do</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="title">Blog</span>
          <span class="exp">What's Happening</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="title">Resources</span>
          <span class="exp">All You Need</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="title">Tutorials</span>
          <span class="exp">In Details</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="title">Contact</span>
          <span class="exp">Get in touch</span>
        </a>
      </li>
    </ul>
  </div>
  <div id="menu5">
    <ul>
      <li>
        <a href="#">
          <span class="title">Home</span>
          <span class="exp" data-hex="&#x2605">Welcome</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="title">Portfolio</span>
          <span class="exp" data-hex="&#x2714">What I Do</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="title">Blog</span>
          <span class="exp" data-hex="&#x2710">What's Happening</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="title">Resources</span>
          <span class="exp" data-hex="&#x2767">All You Need</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="title">Tutorials</span>
          <span class="exp" data-hex="&#x2702">In Details</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="title">Contact</span>
          <span class="exp" data-hex="&#x2764">Get in touch</span>
        </a>
      </li>
    </ul>
  </div>
  <div id="menu6">
    <ul>
      <li>
        <a href="#">
          <span class="title">Home</span>
          <span class="exp" data-hex="&#x2605">Welcome</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="title">Portfolio</span>
          <span class="exp" data-hex="&#x2714">What I Do</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="title">Blog</span>
          <span class="exp" data-hex="&#x2710">What's Happening</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="title">Resources</span>
          <span class="exp" data-hex="&#x2767">All You Need</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="title">Tutorials</span>
          <span class="exp" data-hex="&#x2702">In Details</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="title">Contact</span>
          <span class="exp" data-hex="&#x2764">Get in touch</span>
        </a>
      </li>
    </ul>
  </div>
</div>