Skip to content

Instantly share code, notes, and snippets.

@thurloat

thurloat/css3demo.html

Created July 6, 2010 14:48
Show Gist options
  • Save thurloat/465478 to your computer and use it in GitHub Desktop.
Save thurloat/465478 to your computer and use it in GitHub Desktop.
Download ZIP
A pure CSS3 implementation of the JS + CSS demo: http://tympanus.net/Tutorials/CufonizedFlyOutMenu/
Raw
css3demo.html
<!-- This is a pure CSS3 implementation of the CSS3 + jQuery Demo for flyout menus I saw today featured on Smashing Mag.
My Demo: http://commondatastorage.googleapis.com/thurloat/css3demo.html
Codes on Gist.Github: http://gist.github.com/465478
Original Link: http://tympanus.net/Tutorials/CufonizedFlyOutMenu/
Original Author: Mary Lou http://tympanus.net/codrops/author/crnacura/
-->
<html>
<head>
<style type="text/css">
body, ul, li, h1, h2, span{
margin:0;
padding:0;
}
ul{
list-style:none;
}
body{
background:#292929;
}
.slidingMenu {
position: absolute;
height:410px;
width: 100%;
top:40px;
overflow:hidden;
right:1px;
font-family: Arial, Helvetica, sans-serif;
}
.slidingMenu li {
display:block;
float:right;
clear:both;
position:relative;
}
.slidingMenu li a:hover {
background: #2183c4;
background:
-webkit-gradient(
linear,
left top,
left bottom,
from(#0771b8),
to(#2183c4)
);
background:
-moz-linear-gradient(
top,
#0771b8,
#2183c4
);
-moz-border-radius: 8px 0px 0px 8px;
-webkit-border-top-left-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
-moz-box-shadow:1px 1px 5px #000;
-webkit-box-shadow:1px 1px 5px #000;
box-shadow:1px 1px 5px #000;
}
.slidingMenu li a {
font-size:66px;
text-transform:uppercase;
text-decoration: none;
color: #ddd;
outline: none;
text-indent:5px;
z-index: 10;
display: block;
float: right;
height: 66px;
line-height: 66px;
position: relative;
overflow: hidden;
padding-right:10px;
margin-left: 2000px;
transition: margin-left ease-in-out 500ms;
-webkit-transition: margin-left ease-in-out 500ms;
-moz-transition: margin-left ease-in-out 500ms;
}
.slidingMenu span{
background: #2183c4;
background:
-webkit-gradient(
linear,
left top,
left bottom,
from(#0771b8),
to(#2183c4)
);
background:
-moz-linear-gradient(
top,
#0771b8,
#2183c4
);
height: 68px;
padding-right:5px;
margin-top:2px;
position:absolute;
padding-left: 2000px;
text-align:right;
left:-2800px;
-moz-box-shadow:1px 1px 5px #000;
-webkit-box-shadow:1px 1px 5px #000;
box-shadow:1px 1px 5px #000;
-moz-border-radius: 0px 8px 8px 0px;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
.slidingMenu a:hover{
margin-left:50px;
}
.slidingMenu li span {
font-size:36px;
color: #f0f0f0;
text-indent:5px;
z-index: 10;
display: block;
height: 66px;
line-height: 66px;
margin-left:5px;
top:-3px;
}
</style>
</head>
<body>
<ul id="slidingMenu" class="slidingMenu">
<li><span>Maybe that's what life is... a wink of the eye.</span><a href="#">Home</a></li>
<li><span>Every man dies. Not every man really lives.</span><a href="#">About</a></li>
<li><span>It is your work in life that is the ultimate seduction.</span><a href="#">Portfolio</a></li>
<li><span>It's the friends you can call up at 4 a.m. that matter. </span><a href="#">Work</a></li>
<li><span>We are time's subjects, and time bids be gone. </span><a href="#">Contact</a></li>
</ul>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment