Skip to content

Instantly share code, notes, and snippets.

@Maux

Maux/index.html

Created November 12, 2012 21:51
Show Gist options
  • Save Maux/4062174 to your computer and use it in GitHub Desktop.
Save Maux/4062174 to your computer and use it in GitHub Desktop.
Download ZIP
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
Raw
index.html
<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>
Raw
style.less
/*********** 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;
}
}
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment