Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
61 lines (57 sloc) 3.36 KB
<!DOCTYPE html>
<meta charset="utf-8" />
<title>Path menu in pure CSS3</title>
<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/app.css" />
<!-- The following stylesheet is written manually but ONLY for the demo. -->
<!-- I'm waiting for Sass closes this issue: -->
<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/firefox.css" />
<section id="main">
<h1>Path menu in pure CSS3</h1>
<p>I'm fall in love with the new UI of <a href="">Path</a>. I really love the user interaction design
like the "add menu". So, as I'm a front-end developer, I tried to recreate the same thing on my browser.</p>
<p>Firstly, I posted a video of the effect on <a href="">dribbble</A> and now, I share my code.</p>
<h2>An experiment in CSS</h2>
<p>I made the choice to do this with only html/css3 and no images whatsoever.<br>
There is <strong>0 line of javascript</strong>.<br>
I'm aware that you can do the same with a bit of javascript to be compliant with others browsers. But, It was not my goal :)</p>
<h2>How was this made?</h2>
<p>To calculate the coordinates of items and generate the animation, I used Sass+Compass.<br>
I used a math formula in order to add the items's position on the arc of circle. So, you can add or remove items without rewrite the code.<br>
Finally, I generate a keyframe animation for each item. <del>To be honnest, I had a lot of problems to use keyframes and Sass.
It's for this reason, that it's only compliant with Webkit.</del></p>
<p>You can fork <strong><a href="">the source</a></strong> on github !</p>
<p><a href="" class="twitter-share-button" data-count="horizontal" data-via="_victa">Tweet</a><script type="text/javascript" src="//"></script></p>
<hr />
<p>Follow <a href="">me</a> on Twitter! And ask any questions you want or send comments.</p>
<p><small><strong>Edit 07/27/12:</strong> I updated the generated code using Sass 3.2. Now, It works for every browser supporting css3 animations.</small></p>
<input type="checkbox" id="menu" class="menuControl" checked="checked"> <!-- Hidden -->
<label for="menu">
<div class="circle-container">
<button class="circle">&#10006;</button>
<ul class="items">
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-22043471-2']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);