Skip to content

Instantly share code, notes, and snippets.

@anisbet1

anisbet1/CSS3.Animation.Menus.html

Created February 24, 2012 14:42
Show Gist options
  • Save anisbet1/1901379 to your computer and use it in GitHub Desktop.
Save anisbet1/1901379 to your computer and use it in GitHub Desktop.
Download ZIP
Creative CSS3 Animation Menus
Raw
CSS3.Animation.Menus.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Creative CSS3 Animation Menus</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Creative CSS3 Animation Menus" />
<meta name="keywords" content="menu, navigation, animation, transition, transform, rotate, css3, web design, component, icon, slide" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style1.css" />
<link href='http://fonts.googleapis.com/css?family=Terminal+Dosis' rel='stylesheet' type='text/css' />
<script type="text/javascript">
// Don't use this code on your site
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-7243260-2']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div class="container">
<div class="header">
<a href="http://tympanus.net/Tutorials/BlurMenu/"><strong>&laquo; Previous Demo: </strong>Blur Menu</a>
<span class="right">
<a href="http://www.justbenicestudio.com/studio/websymbols/" target="_blank">Font/Icons by Just Be Nice</a>
<a href="http://tympanus.net/codrops/2011/10/24/creative-css3-animation-menus/"><strong>Back to the Codrops Article</strong></a>
</span>
<div class="clr"></div>
</div>
<h1>Creative CSS3 Animation Menus <span>Experimenting with CSS3 Transitions &amp; Animations</span></h1>
<div class="content">
<div class="more">
<ul>
<li class="selected"><a href="index.html">Example 1</a></li>
<li><a href="index2.html">Example 2</a></li>
<li><a href="index3.html">Example 3</a></li>
<li><a href="index4.html">Example 4</a></li>
<li><a href="index5.html">Example 5</a></li>
<li><a href="index6.html">Example 6</a></li>
<li><a href="index7.html">Example 7</a></li>
<li><a href="index8.html">Example 8</a></li>
<li><a href="index9.html">Example 9</a></li>
<li><a href="index10.html">Example 10</a></li>
</ul>
</div>
<ul class="ca-menu">
<li>
<a href="#">
<span class="ca-icon">A</span>
<div class="ca-content">
<h2 class="ca-main">Exceptional Service</h2>
<h3 class="ca-sub">Personalized to your needs</h3>
</div>
</a>
</li>
<li>
<a href="#">
<span class="ca-icon">I</span>
<div class="ca-content">
<h2 class="ca-main">Creative Storytelling</h2>
<h3 class="ca-sub">Advanced use of technology</h3>
</div>
</a>
</li>
<li>
<a href="#">
<span class="ca-icon">C</span>
<div class="ca-content">
<h2 class="ca-main">Infographical Education</h2>
<h3 class="ca-sub">Understanding visually</h3>
</div>
</a>
</li>
<li>
<a href="#">
<span class="ca-icon">S</span>
<div class="ca-content">
<h2 class="ca-main">Sophisticated Team</h2>
<h3 class="ca-sub">Professionals in action</h3>
</div>
</a>
</li>
<li>
<a href="#">
<span class="ca-icon">d</span>
<div class="ca-content">
<h2 class="ca-main">Unconditional Support</h2>
<h3 class="ca-sub">24/7 for you needs</h3>
</div>
</a>
</li>
</ul>
</div><!-- content -->
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
var ADPACKSSTYLE = "lightVertical";
</script>
<script src="http://tympanus.net/codrops/adpacks/adpacks.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment