Created
June 4, 2013 13:19
-
-
Save valerysntx/5705836 to your computer and use it in GitHub Desktop.
css3 menu effect -
see in action - http://jsfiddle.net/EwFHY/15/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* New navigation */ | |
/* Some stylesheet reset */ | |
#cssmenu > ul { | |
list-style: none; | |
/* margin: -95px 0 0 0;*/ | |
padding: 0; | |
line-height: 1; | |
float: left; | |
display:inline; | |
} | |
/* The container */ | |
#cssmenu > ul { | |
display: block; | |
position: relative; | |
width: 90px; | |
-webkit-transform-style: preserve-3d; | |
-webkit-transform: rotateZ(2deg); | |
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); | |
-webkit-transition: all 0.5s ease-in-out; | |
transition: all 0.5s ease-in-out; | |
-webkit-backface-visibility: hidden; | |
/* this will add an antiallias */ | |
} | |
#cssmenu > ul:hover { | |
display: block; | |
position: relative; | |
width: 90px; | |
-webkit-transform: rotate(-15deg); | |
-moz-transform: rotate(-15deg); | |
-o-transform:rotate(-15deg); | |
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); | |
} | |
/* The list elements which contain the links */ | |
#cssmenu > ul li { | |
display: block; | |
position: relative; | |
margin: 0; | |
padding: 0; | |
width: 90px; | |
} | |
#cssmenu > ul li ul li, #cssmenu > ul li ul li a, #cssmenu > ul >li:hover, #cssmenu > ul >li:hover > a, #cssmenu > ul >li > a:hover { | |
width:610px; | |
} | |
/* General link styling */ | |
#cssmenu > ul li a { | |
/* Layout */ | |
display: block; | |
position: relative; | |
margin: 0; | |
padding: 8px 20px; | |
width: 90px; | |
/* Typography */ | |
font-family:"Myriad Pro", "Trebuchet MS", sans-serif; | |
/* letter-spacing: .05em;*/ | |
color: #939598; | |
text-decoration: none; | |
text-transform: lowercase; | |
font-size: 13px; | |
font-weight: 300; | |
border-top-left-radius: 20px; | |
border-bottom-left-radius: 20px; | |
/* Background & effects */ | |
} | |
/* The hover state of the menu/submenu links */ | |
#cssmenu > ul li.home>a:hover, #cssmenu > ul li.home:hover>a { | |
color: #fff; | |
background: #a2d062; | |
background: -webkit-linear-gradient(bottom, #6e9b31, #a2d062); | |
background: -ms-linear-gradient(bottom, #6e9b31, #a2d062); | |
background: -moz-linear-gradient(bottom, #6e9b31, #a2d062); | |
background: -o-linear-gradient(bottom, #6e9b31, #a2d062); | |
border-color: transparent; | |
-webkit-transition: all 0.2s linear; | |
-moz-transition: all 0.2s linear; | |
-o-transition: all 0.2s linear; | |
transition: all 0.2s linear; | |
} | |
#cssmenu > ul li.productsrev>a:hover, #cssmenu > ul li.productsrev:hover>a { | |
color: #fff; | |
background: #61c46e; | |
background: -webkit-linear-gradient(bottom, #2b8a39, #61c46e); | |
background: -ms-linear-gradient(bottom, #2b8a39, #61c46e); | |
background: -moz-linear-gradient(bottom, #2b8a39, #61c46e); | |
background: -o-linear-gradient(bottom, #2b8a39, #61c46e); | |
border-color: transparent; | |
-webkit-transition: all 0.2s linear; | |
-moz-transition: all 0.2s linear; | |
-o-transition: all 0.2s linear; | |
transition: all 0.2s linear; | |
} | |
#cssmenu > ul li.about>a:hover, #cssmenu > ul li.about:hover>a { | |
color: #fff; | |
background: #459cc7; | |
background: -webkit-linear-gradient(bottom, #025e8e, #459cc7); | |
background: -ms-linear-gradient(bottom, #025e8e, #459cc7); | |
background: -moz-linear-gradient(bottom, #025e8e, #459cc7); | |
background: -o-linear-gradient(bottom, #025e8e, #459cc7); | |
border-color: transparent; | |
-webkit-transition: all 0.2s linear; | |
-moz-transition: all 0.2s linear; | |
-o-transition: all 0.2s linear; | |
transition: all 0.2s linear; | |
} | |
#cssmenu > ul li.customers>a:hover, #cssmenu > ul li.customers:hover>a { | |
color: #fff; | |
background: #2e6dab; | |
background: -webkit-linear-gradient(bottom, #09427a, #2e6dab); | |
background: -ms-linear-gradient(bottom, #09427a, #2e6dab); | |
background: -moz-linear-gradient(bottom, #09427a, #2e6dab); | |
background: -o-linear-gradient(bottom, #09427a, #2e6dab); | |
border-color: transparent; | |
-webkit-transition: all 0.2s linear; | |
-moz-transition: all 0.2s linear; | |
-o-transition: all 0.2s linear; | |
transition: all 0.2s linear; | |
} | |
#cssmenu > ul li.contacts>a:hover, #cssmenu > ul li.contacts:hover>a { | |
color: #fff; | |
background: #6852a4; | |
background: -webkit-linear-gradient(bottom, #3d2975, #6852a4); | |
background: -ms-linear-gradient(bottom, #3d2975, #6852a4); | |
background: -moz-linear-gradient(bottom, #3d2975, #6852a4); | |
background: -o-linear-gradient(bottom, #3d2975, #6852a4); | |
border-color: transparent; | |
-webkit-transition: all 0.2s linear; | |
-moz-transition: all 0.2s linear; | |
-o-transition: all 0.2s linear; | |
transition: all 0.2s linear; | |
} | |
/* THE SUBMENUS */ | |
#cssmenu > ul ul { | |
position: absolute; | |
left: 120px; | |
top: -9999px; | |
padding-left: 0px; | |
padding-top: 40px; | |
opacity: 0; | |
z-index: 1; | |
} | |
#cssmenu > ul ul.bgsubproducts { | |
background-image: url(http://dev.unnaturallygeisha.com/fellowrobots/wp-content/uploads/2013/02/square-gradient.png); | |
background-repeat:no-repeat; | |
overflow: visible; | |
height: 200px; | |
margin-top:-40px; | |
margin-left: 0px; | |
z-index:-100; | |
-webkit-transition: opacity 1s; | |
-moz-transition: opacity 1s; | |
-o-transition: opacity 1s; | |
} | |
#cssmenu > ul ul.bgsubabout { | |
background-image: url(http://dev.unnaturallygeisha.com/fellowrobots/wp-content/uploads/2013/02/square-gradient.png); | |
background-repeat:no-repeat; | |
overflow: visible; | |
height: 200px; | |
margin-top:-40px; | |
margin-left: 0px; | |
z-index:-100; | |
-webkit-transition: opacity 1s; | |
-moz-transition: opacity 1s; | |
-o-transition: opacity 1s; | |
} | |
#cssmenu > ul ul.bgsubcustomers { | |
background-image: url(http://dev.unnaturallygeisha.com/fellowrobots/wp-content/uploads/2013/02/square-gradient.png); | |
background-repeat:no-repeat; | |
overflow: visible; | |
height: 200px; | |
margin-top:-40px; | |
margin-left: 0px; | |
z-index:-100; | |
-webkit-transition: opacity 1s; | |
-moz-transition: opacity 1s; | |
-o-transition: opacity 1s; | |
} | |
#cssmenu > ul ul li a { | |
color: #5d6064; | |
background: transparent; | |
z-index:1000; | |
} | |
#cssmenu > ul ul li.subproducts:hover>a { | |
color: #2b8a39; | |
background: transparent; | |
} | |
.subproducts { | |
z-index:1000; | |
} | |
#cssmenu > ul ul li.subabout:hover>a { | |
color: #025e8e; | |
background: transparent; | |
} | |
#cssmenu > ul ul li.subcustomers:hover>a { | |
color: #09427a; | |
background: transparent; | |
} | |
/* Showing the submenu when the user is hovering the parent link */ | |
#cssmenu > ul li:hover>ul { | |
top: 30px; | |
opacity: 1; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div id='cssmenu'> | |
<ul> | |
<li class='home'><a href="#" title="Link 1">home</a> | |
</li> | |
<li class='productsrev'> <a href="#" title="Link 3">products</a> | |
<ul class="bgsubproducts"> | |
<li class='subproducts'><a href="#" title="Link 1">helo</a> | |
</li> | |
</ul> | |
</li> | |
<li class='about'><a href="#" title="Link 3">about</a> | |
<ul class="bgsubproducts"> | |
<li class='subabout'><a href="#1" title="Link 1">what's a telepresence robot?</a> | |
</li> | |
<li class='subabout'><a href="#1" title="Link 1">our team</a> | |
</li> | |
<li class='subabout'><a href="#1" title="Link 1">our robots</a> | |
</li> | |
<li class='subabout'><a href="#1" title="Link 1">our partners</a> | |
</li> | |
</ul> | |
</li> | |
<li class='customers'><a href="#4" title="Link 4">customers</a> | |
<ul class="bgsubproducts"> | |
<li class='subcustomers'><a href="#1" title="Link 1">driving control panel</a> | |
</li> | |
<li class='subcustomers'><a href="#1" title="Link 1">instructions</a> | |
</li> | |
<li class='subcustomers'><a href="#1" title="Link 1"> setting up your robot</a> | |
</li> | |
<li class='subcustomers'><a href="#1" title="Link 1"> driving instructions</a> | |
</li> | |
</ul> | |
</li> | |
<li class='contacts'><a href="#" title="Link 5">contacts</a> | |
</li> | |
</ul> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
name: css3 menu effect | |
description: pure css3 animated menu effect |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment