Permalink
Browse files

Update path menu demo page

  • Loading branch information...
1 parent dd59765 commit 11b11ae1b13decdb38e9576e13a670e37ed4cf38 @MoOx committed Mar 8, 2012
Showing with 240 additions and 150 deletions.
  1. +12 −0 README.md
  2. +0 −6 README.mkdn
  3. +2 −20 config.rb
  4. +18 −2 index.html
  5. +0 −61 sass/_ceaser.scss
  6. +7 −5 sass/{screen.scss → menu.scss}
  7. +25 −0 sass/s.scss
  8. +38 −56 stylesheets/{screen.css → menu.css}
  9. +138 −0 stylesheets/s.css
View
@@ -0,0 +1,12 @@
+# CSS Path Menu
+
+Quick recreation of the path flyout menu built with CSS/HTML (no javascript).
+This has not been thoroughly browser tested and was built just for fun.
+
+I use Sass & Compass to generate the CSS, so it's extensible.
+
+#### Checkout the [demo](http://moox.github.com/Path-Menu/)
+
+##### Notes
+
+_I remove the javascript form the project I fork, & review the code & the design to be exactly the same as the Path Menu (checkout original-source folder)_
View
@@ -1,6 +0,0 @@
-View the [demo](http://dl.dropbox.com/u/1274637/path_menu/index.html)
-
-Quick recreation of the path flyout menu built with compass/sass/html. This has not been thoroughly browser tested and was built just for fun.
-I plan on adding some bounce physics to the menu soon.
-
-This repo is the [compass](http://www.compass-style.org) project I used to create the menu.
View
@@ -1,24 +1,6 @@
-# Require any additional compass plugins here.
require "ceaser-easing"
-# Set this to the root of your project when deployed:
+require "compass-recipes"
+
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
-images_dir = "images"
-javascripts_dir = "javascripts"
-
-# You can select your preferred output style here (can be overridden via the command line):
-# output_style = :expanded or :nested or :compact or :compressed
-
-# To enable relative paths to assets via compass helper functions. Uncomment:
-# relative_assets = true
-
-# To disable debugging comments that display the original location of your selectors. Uncomment:
-line_comments = false
-
-
-# If you prefer the indented syntax, you might want to regenerate this
-# project again passing --syntax sass, or you can uncomment this:
-# preferred_syntax = :sass
-# and then run:
-# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
View
@@ -3,10 +3,26 @@
<head>
<meta charset="UTF-8">
<title>Path Nav</title>
- <link href="stylesheets/screen.css" rel="stylesheet"/>
-
+ <link href="stylesheets/s.css" rel="stylesheet" />
+ <link href="stylesheets/menu.css" rel="stylesheet" />
</head>
<body>
+
+<div class="v-align-container"><div class="v-align-content-container"><div class="v-align-content"><!-- css trick for the valign -->
+
+ <h1>Path Menu with just CSS</h1>
+ <p class="docs">
+ I remove completly the js from the project I fork & rewrote the all Sass code.
+ <br />The design look almost the same (<a href="https://github.com/MoOx/Path-Menu/tree/master/original-source">see original source</a>).
+ </p>
+ <p class="notes">
+ Made using <a href="http://sass-lang.com">Sass</a>.
+ <br />
+ <a href="https://github.com/MoOx/Path-Menu">Checkout source code </a>
+ </p>
+
+</div></div></div><!-- css trick for the valign -->
+
<nav id="menu" class="path-nav path-nav-bottom-left">
<a href="#menu" class="path-nav-expander">
<!-- This cross markup is mandatory since only firefox support animation on pseudo content -->
View
@@ -1,61 +0,0 @@
-@import "ceaser-easing";
-
-// The ceaser sass function to be used when declaring a timing function for a transition or an animation
-
-#transition {
- -webkit-transition-property: all;
- -webkit-transition-duration: 1.2s;
- -webkit-transition-timing-function: ceaser("ease-in"); }
-
-#animation {
- -webkit-animation-name: animateMe;
- -webkit-animation-iteration-count: infinite;
- -webkit-animation-timing-function: ceaser("easeInSine");
- -webkit-animation-duration: 10s; }
-
-// The ceaser transition easing mixin with its argument descriptions
-// @mixin ceaser-transition(ease type, transition property, duration, delay)
-
-// Example mixin call that will create a 500 millisecond transition on only the width property with a delay of 1 second
-// here is how to create that transition for an html element with id of box.
-
-#ceaser-transition {
- @include ceaser-transition("easeInOutExpo", width, 500ms, 1s); }
-
-/* ==========================
- *
- * List of all timing function
- *
- * linear
- * ease (default)
- * ease-in
- * ease-out
- * ease-in-out
- *
- * easeInQuad
- * easeInCubic
- * easeInQuart
- * easeInQuint
- * easeInSine
- * easeInExpo
- * easeInCirc
- * easeInBack
- *
- * easeOutQuad
- * easeOutCubic
- * easeOutQuart
- * easeOutQuint
- * easeOutSine
- * easeOutExpo
- * easeOutCirc
- * easeOutBack
- *
- * easeInOutQuad
- * easeInOutCubic
- * easeInOutQuart
- * easeInOutQuint
- * easeInOutSine
- * easeInOutExpo
- * easeInOutCirc
- * easeInOutBack
- * ======================== */
@@ -1,4 +1,3 @@
-@import "compass/reset";
@import "ceaser-easing";
@import "compass/css3";
@@ -81,9 +80,9 @@ $space: $button-distance + $button-width + ($main-button-width /4); // a value i
.path-nav
{
@include transform(translateZ(0)); // GPU accelerated
-
+
position: fixed;
-
+
&.path-nav-bottom-left
{
bottom: $button-width/2;
@@ -140,12 +139,15 @@ $space: $button-distance + $button-width + ($main-button-width /4); // a value i
z-index: 0;
top: $main-button-width/8;
left: $main-button-width/8;
+ margin: 0;
+ padding: 0;
}
li
{
position: absolute;
z-index: 0;
+ display: block;
@for $i from 1 through $nb-items
{
@@ -176,15 +178,15 @@ $space: $button-distance + $button-width + ($main-button-width /4); // a value i
// @todo add grey overlay effect during tap
}
}
-
+
&.path-nav-bottom-left:target
{
li
{
@include spread;
}
}
-
+
&.path-nav-top-right:target
{
li
View
@@ -0,0 +1,25 @@
+@import "recipes/base/normalize";
+
+// css trick for the valign
+@import "recipes/layout/vertical-align";
+@include vertical-align-requirement;
+.v-align-container { @include vertical-align-container; }
+.v-align-content-container { @include vertical-align-content-container; }
+.v-align-content { @include vertical-align-content; }
+
+
+@import "recipes/background/blueprint-grid";
+body
+{
+ font: 1.4em/2 Palatino, sans-serif;
+ color: #fff;
+ text-shadow: 0 .05em 0 rgba(#000, .6);
+
+ @include background-blueprint-grid();
+}
+
+@import "compass/utilities/links/link-colors";
+a
+{
+ @include link-colors(#ccc, #ff6, #ff3, #eee, #ff9);
+}
Oops, something went wrong.

0 comments on commit 11b11ae

Please sign in to comment.