Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

style cleanup and update to description in index

  • Loading branch information...
commit 8e4c1a8252adb2d88e25d6bd7c13dbfc780bd0fb 1 parent 4464805
Hakim El Hattab hakimel authored
Showing with 79 additions and 77 deletions.
  1. +60 −62 css/meny.css
  2. +19 −15 index.html
122 css/meny.css
View
@@ -22,10 +22,6 @@ body {
* {
margin: 0;
padding: 0;
-
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
}
a {
@@ -42,31 +38,11 @@ a {
color: #f76f76;
}
-h1, h2 {
+h1,
+h2 {
font-size: 24px;
}
-p {
- max-width: 400px;
- margin: 10px 0 10px 0;
- font-size: 16px;
- line-height: 1.32;
-}
-
-small {
- display: block;
- margin: 10px 0 20px 0;
- color: #333;
- font-size: 0.85em;
-
- -webkit-text-size-adjust: none;
-}
-
-.sharing {
- position: absolute;
- bottom: 20px;
-}
-
body {
-webkit-transition: -webkit-perspective .4s ease;
-moz-transition: -moz-perspective .4s ease;
@@ -87,6 +63,19 @@ body {
perspective-origin: 0% 50%;
}
+.meny,
+.meny-contents {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+
+ -webkit-transition: -webkit-transform .4s ease;
+ -moz-transition: -moz-transform .4s ease;
+ -ms-transition: -ms-transform .4s ease;
+ -o-transition: -o-transform .4s ease;
+ transition: transform .4s ease;
+}
+
.meny {
position: fixed;
height: 100%;
@@ -97,16 +86,6 @@ body {
background: #333;
color: #eee;
-
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
-
- -webkit-transition: -webkit-transform .4s ease;
- -moz-transition: -moz-transform .4s ease;
- -ms-transition: -ms-transform .4s ease;
- -o-transition: -o-transform .4s ease;
- transition: transform .4s ease;
-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
@@ -128,37 +107,11 @@ body {
transform: rotateY(0deg);
}
-.meny ul {
- margin-top: 10px;
-}
- .meny ul li {
- list-style: none;
- font-size: 20px;
- padding: 3px 10px;
- }
- .meny ul li:before {
- content: '-';
- margin-right: 5px;
- color: rgba( 255, 255, 255, 0.2 );
- }
-
.meny-contents {
background: #eee;
padding: 20px 40px;
width: 100%;
height: 100%;
-
- -webkit-transition: -webkit-transform .4s ease;
- -moz-transition: -moz-transform .4s ease;
- -ms-transition: -ms-transform .4s ease;
- -o-transition: -o-transform .4s ease;
- transition: transform .4s ease;
-
- -webkit-transform-style: preserve-3d;
- -moz-transform-style: preserve-3d;
- -ms-transform-style: preserve-3d;
- -o-transform-style: preserve-3d;
- transform-style: preserve-3d;
-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
@@ -223,3 +176,48 @@ body {
}
+
+/**
+ * Content-specific styles:;
+ */
+
+.meny ul {
+ margin-top: 10px;
+}
+ .meny ul li {
+ list-style: none;
+ font-size: 20px;
+ padding: 3px 10px;
+ }
+ .meny ul li:before {
+ content: '-';
+ margin-right: 5px;
+ color: rgba( 255, 255, 255, 0.2 );
+ }
+
+.meny-contents>article {
+ max-width: 400px;
+}
+.meny-contents p {
+ margin: 10px 0 10px 0;
+ font-size: 16px;
+ line-height: 1.32;
+}
+
+.meny-contents small {
+ display: block;
+ margin-top: 10px;
+ padding-top: 10px;
+ color: #333;
+ font-size: 0.85em;
+ border-top: 1px dashed #ccc;
+
+ -webkit-text-size-adjust: none;
+}
+
+.meny-contents .sharing {
+ position: absolute;
+ bottom: 20px;
+}
+
+
34 index.html
View
@@ -41,23 +41,27 @@
<div class="meny-contents">
<div class="cover"></div>
- <h1>Meny</h1>
- <p>
- A UI experiment with a 3D fold-in menu. Move your mouse to the left edge of this page &mdash; or swipe in from the left edge if you're on a touch device &mdash; to expand the menu.
- </p>
- <p>
- Pass in a URL to test it with any page, for example: <a href="http://lab.hakim.se/meny/?http://hakim.se">lab.hakim.se/meny/?http://hakim.se.</a>
- </p>
- <p>
- This was created using CSS 3D transforms. JavaScript is used to track mouse/touch movement. The source
- code is available at <a href="http://github.com/hakimel/meny">github.com/hakimel/meny</a>.
- </p>
- <small>
- Created by <a href="http://twitter.com/hakimel">@hakimel</a> / <a href="http://hakim.se/">http://hakim.se</a>
- </small>
+ <article>
+ <h1>Meny</h1>
+ <p>
+ A three dimensional and space effecient menu concept. </p>
+ <p>
+ Move your mouse to the left edge of this page &mdash; or swipe in from the left edge if you're on a touch device &mdash; to expand the menu.
+ Pass in a URL to test it with any page, like so: <a href="http://lab.hakim.se/meny/?http://hakim.se">lab.hakim.se/meny/?http://hakim.se.</a>
+ </p>
+ <p>
+ This was created using CSS 3D transforms. JavaScript is used to track mouse/touch movement.
+ </p>
+ <p>
+ It's called Meny with a <em>y</em> since that's how it's spelled in swedish.
+ </p>
+ <small>
+ Created by <a href="http://twitter.com/hakimel">@hakimel</a> / <a href="http://hakim.se/">http://hakim.se</a>
+ </small>
+ </article>
<div class="sharing">
- <a href="http://twitter.com/share" class="twitter-share-button" data-text="Meny - a CSS 3D fold-in menu concept by @hakimel" data-url="http://lab.hakim.se/meny" data-count="small" data-related="hakimel"></a>
+ <a href="http://twitter.com/share" class="twitter-share-button" data-text="Meny - a three dimensional fold-in menu concept by @hakimel" data-url="http://lab.hakim.se/meny" data-count="small" data-related="hakimel"></a>
<iframe id="facebook-button" src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Flab.hakim.se%2Fmeny%2F&layout=button_count&show_faces=false&width=83&action=like&font=arial&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:85px; height:24px; position: relative; top: 4px;" allowTransparency="true"></iframe>
</div>
Please sign in to comment.
Something went wrong with that request. Please try again.