forked from Victa/path-menu
/
index.html
59 lines (57 loc) · 3.34 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html>
<head>
<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: https://github.com/nex3/sass/issues/46 -->
<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/firefox.css" />
</head>
<body>
<section id="main">
<h1>Path menu in pure CSS3</h1>
<p>I'm fall in love with the new UI of <a href="http://path.com">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="http://dribbble.com/shots/339001-Path-menu-recreated-in-css3">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. 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.</p>
<p>You can fork <strong><a href="http://github.com/victa/path-menu">the source</a></strong> on github !</p>
<p><a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="_victa">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script></p>
<hr />
<p>Follow <a href="http://twitter.com/_victa">me</a> on Twitter! And ask any questions you want or send comments.</p>
<p><small><strong>Edit:</strong> I updated the generated code manually (without Sass) but only for the demonstration. Now, It's works in Firefox.</small></p>
</section>
<input type="checkbox" id="menu" class="menuControl" checked="checked"> <!-- Hidden -->
<label for="menu">
<div class="circle-container">
<button class="circle">✖</button>
</div>
</label>
<ul class="items">
<li>★</li>
<li>★</li>
<li>★</li>
<li>★</li>
<li>★</li>
<li>★</li>
</ul>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-22043471-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>
</body>
</html>