Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

First commit to repo

  • Loading branch information...
commit 67e63452fffdf35256214962d180b6a022b4e8a5 0 parents
Neil Carpenter authored
10 README.md
@@ -0,0 +1,10 @@
+Proof of concept 'stacking' responsive menu
+===========================================
+
+Concept for alternative navigation/design pattern for repsonsive sites, trying to replicate the 'browser tab' menu in the current Chrome for iOS app - providing a more interesting and innovative approach to displaying content at smaller screen sizes, see blog post [here](http://neilcarpenter.com/2012/09/proof-of-concept-stacking-responsive-menu).
+
+**See the demo [here](http://neilcarpenter.com/demos/stack-menu)**
+
+Example uses jQuery but not a necessity, the actual work is mostly handled by CSS transitions and 2D transforms. In theory should be supported by most mobile browsers as isn't dependent on anything too fancy, but as is just a proof of concept, it hasn't been thoroughly tested.
+
+Demo fonts from [Google web fonts](http://www.google.com/webfonts), background images from [Subtle Patterns](http://subtlepatterns.com/) and Star Wars lipsum from [Fillerama](http://chrisvalleskey.com/fillerama/).
BIN  grid.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
121 index.html
@@ -0,0 +1,121 @@
+<!doctype html>
+<html>
+ <head>
+ <meta charset="utf-8">
+
+ <title>stack menu</title>
+
+ <meta name="viewport" content="width=device-width,initial-scale=1">
+
+ <link rel="stylesheet" href="style.css">
+ </head>
+
+ <body>
+
+ <nav>
+ <h1><a href="#">Logo</a></h1>
+ <ul>
+ <li><a href="#one">Intro</a></li>
+ <li><a href="#two">Section two</a></li>
+ <li><a href="#three">Section three</a></li>
+ <li><a href="#four">Section four</a></li>
+ <li><a href="#five">Section five</a></li>
+ </ul>
+ <a id="open-menu" href="#">Menu</a>
+ </nav>
+
+ <div id="content">
+
+ <section id="one" class="section-1 active" data-heading="Intro">
+ <h1>Proof of concept 'stacking' responsive menu</h1>
+ <p>I read a lengthy <a href="https://plus.google.com/113127438179392830442/posts/fR3iiuN4kEF" target="_blank">thread/discussion on Google+</a> the other day about the state of the web applications, specifically in relation to native apps on mobile devices. I had always taken it as a given that the open web would prevail over proprietary and device-specific technologies, and that it was just a matter of time before the web catches up, but this article kind of worried me, with plenty of well-respected members of the web community voicing concern of the lack of urgency in implementing features to bring the web on a par with native applications, and that in fact it may never catch up.</p>
+ <p>That made me sad. So, basically, I wanted to see how easy it would be to <em>recreate</em> a native app interaction - specifically the 'browser tab' menu from Chrome for iOS. I like the Chrome app, it has a slick interface with nice transitions and makes the most of a gesture-based OS. Anyway, it was much easier to recreate the stacking windows effect than I thought it would be, proof that we need to start seeing this kind of thing in web-based apps/sites, because INTERNET.</p>
+ <p>Resize your window, or even better load this page in a responsive tester like <a href="http://responsive.is/neilcarpenter.com/demos/stack-menu" title="responsive.is" target="_blank">this one</a>, or <em>even</em> better try it on a real phone, and see the 'stacking effect' of page sections. Only had a chance to test on iPhone 4S & 3GS but seems to be holding up okay.</p>
+ <p><strong>Read the full blog post <a href="http://neilcarpenter.com/2012/09/proof-of-concept-stacking-responsive-menu">here</a>.</strong></p>
+ </section>
+
+ <section id="two" class="section-2" data-heading="Rebel Mission to Ord Mantell">
+ <h1>Rebel Mission to Ord Mantell</h1>
+ <p>Ye-ha! <em>I'm trying not to, kid</em>. I'm trying not to, kid. I want to come with you to Alderaan. There's nothing for me here now. I want to learn the ways of the Force and be a Jedi, like my father before me. Don't act so surprised, Your Highness. You weren't on any mercy mission this time. <a href="#">Several transmissions</a> were beamed to this ship by Rebel spies. I want to know what happened to the plans they sent you.</p>
+ <h2>The Empire Strikes Back</h2>
+ <p>In my experience, there is no such thing as luck. Hey, Luke! May the Force be with you. Kid, I've flown from one side of this galaxy to the other. <strong>I've seen a lot of strange stuff</strong>, but I've never seen anything to make me believe there's one all-powerful Force controlling everything. There's no mystical energy field that controls my destiny. It's all a lot of simple tricks and nonsense. Oh God, my uncle. How am I ever gonna explain this?</p>
+ <ul>
+ <li>I call it luck.</li>
+ <li>I'm trying not to, kid.</li>
+ <li>I'm trying not to, kid.</li>
+ </ul>
+ <h3>The Republic</h3>
+ <p>All right. Well, take care of yourself, Han. I guess that's what you're best at, ain't it? Don't be too proud of this technological terror you've constructed. The ability to destroy a planet is insignificant next to the power of the Force. He is here. You don't believe in the Force, do you? As you wish. You don't believe in the Force, do you?</p>
+ <h4>The Rebel Force</h4>
+ <p>You're all clear, kid. Let's blow this thing and go home! Remember, a Jedi can feel the Force flowing through him. Your eyes can deceive you. Don't trust them. <em>I don't know what you're talking about</em>. I am a member of the Imperial Senate on a diplomatic mission to Alderaan--</p>
+ </section>
+
+ <section id="three" class="section-3" data-heading="Knights of the Old Republic">
+ <h1>Knights of the Old Republic</h1>
+ <p>As you wish. Look, I ain't in this for your revolution, and I'm not in it for you, Princess. I expect to be well paid. <strong>I'm in it for the money</strong>. What!? What!? Kid, I've flown from one side of this galaxy to the other. I've seen a lot of strange stuff, but <a href="#">I've never seen anything to make me believe</a> there's one all-powerful Force controlling everything. There's no mystical energy field that controls my destiny. It's all a lot of simple tricks and nonsense. You mean it controls your actions?</p>
+ <h2>The Battle for Endor</h2>
+ <p>Don't underestimate the Force. In my experience, <em>there is no such thing as luck</em>. You don't believe in the Force, do you? Your eyes can deceive you. Don't trust them. What?!</p>
+ <ul>
+ <li>Obi-Wan is here. The Force is with him.</li>
+ <li>You don't believe in the Force, do you?</li>
+ <li>Escape is not his plan. I must face him, alone.</li>
+ <li>No! Alderaan is peaceful. We have no weapons. You can't possibly&hellip;</li>
+ </ul>
+ <h3>The Sith Lords</h3>
+ <p>Your eyes can deceive you. <strong>Don't trust them</strong>. Hey, Luke! May the Force be with you. All right. Well, take care of yourself, Han. I guess that's what you're best at, ain't it?</p>
+ <h4>The Sith Lords</h4>
+ <p>The Force is strong with this one. I have you now. I call it luck. Don't underestimate the Force.</p>
+ </section>
+
+ <section id="four" class="section-4" data-heading="Jedi Academy">
+ <h1>Jedi Academy</h1>
+ <p>Don't act so surprised, Your Highness. You weren't on any mercy mission this time. Several transmissions were beamed to this ship by Rebel spies. <a href="#">I want to know what happened to the plans they sent you</a>. Ye-ha! In my experience, there is no such thing as luck. The Force is strong with this one. I have you now. <em>Oh God, my uncle</em>. How am I ever gonna explain this? The plans you refer to will soon be back in our hands.</p>
+ <h2>The Rebel Force</h2>
+ <p>I'm trying not to, kid. All right. Well, take care of yourself, Han. I guess that's what you're best at, ain't it? In my experience, there is no such thing as luck. In my experience, there is no such thing as luck. <strong>Don't act so surprised</strong>, Your Highness. You weren't on any mercy mission this time. Several transmissions were beamed to this ship by Rebel spies. I want to know what happened to the plans they sent you.</p>
+ <ul>
+ <li>I don't know what you're talking about. I am a member of the Imperial Senate on a diplomatic mission to Alderaan--</li>
+ <li>Look, I ain't in this for your revolution, and I'm not in it for you, Princess. I expect to be well paid. I'm in it for the money.</li>
+ </ul>
+ <h3>A New Hope</h3>
+ <p>I call it luck. All right. Well, take care of yourself, Han. I guess that's what you're best at, ain't it? Hey, Luke! May the Force be with you. <a href="#">Obi-Wan is here</a>. The Force is with him. Don't be too proud of this technological terror you've constructed. The ability to destroy a planet is insignificant next to the power of the Force.</p>
+ <h4>Rebel Mission to Ord Mantell</h4>
+ <p>Don't underestimate the Force. He is here. The Force is strong with this one. I have you now. What?! What?!</p>
+ </section>
+
+ <section id="five" class="section-5" data-heading="The Battle for Endor">
+ <h1>The Battle for Endor</h1>
+ <p>Partially, but it also obeys your commands. All right. Well, take care of yourself, Han. I guess that's what you're best at, ain't it? I want to come with you to Alderaan. <em>There's nothing for me here now</em>. I want to learn the ways of the Force and be a Jedi, like my father before me. I can't get involved! I've got work to do! It's not that I like the Empire, I hate it, but there's nothing I can do about it right now. It's such a long way from here. He is here.</p>
+ <h2>The Force Unleashed</h2>
+ <p>I suggest you try it again, Luke. This time, let go your conscious self and act on instinct. I call it luck. Don't underestimate the Force.</p>
+ <ul>
+ <li>Leave that to me. Send a distress signal, and inform the Senate that all on board were killed.</li>
+ <li>You don't believe in the Force, do you?</li>
+ <li>You mean it controls your actions?</li>
+ </ul>
+ <h3>The Rebel Force</h3>
+ <p>All right. Well, take care of yourself, Han. I guess that's what you're best at, ain't it? A tremor in the Force. The last time I felt it was in the presence of my old master. What good is a reward if you ain't around to use it? Besides, attacking that battle station ain't my idea of courage. It's more like&hellip;suicide. I want to come with you to Alderaan. There's nothing for me here now. I want to learn the ways of the Force and be a Jedi, like my father before me. I don't know what you're talking about. <a href="#">I am a member of the Imperial Senate</a> on a diplomatic mission to Alderaan--</p>
+ <h4>Revenge of the Sith</h4>
+ <p>She must have hidden the plans in the escape pod. Send a detachment down to retrieve them, and see to it personally, Commander. There'll be no one to stop us this time! Don't be too proud of this technological terror you've constructed. The ability to destroy a planet is insignificant next to the power of the Force. What?! Don't act so surprised, Your Highness. You weren't on any mercy mission this time. <strong>Several transmissions were beamed</strong> to this ship by Rebel spies. I want to know what happened to the plans they sent you. Don't be too proud of this technological terror you've constructed. The ability to destroy a planet is insignificant next to the power of the Force. Your eyes can deceive you. Don't trust them.</p>
+ </section>
+
+ </div><!-- end #content -->
+
+ <a href="https://github.com/neilcarpenter/Stacking-responsive-menu" id="ribbon"><img style="position: absolute; top: 50px; right: 0; border: 0; z-index: 100;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
+
+ <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
+ <script src="script.js"></script>
+
+ <script type="text/javascript">
+ var _gaq = _gaq || [];
+ _gaq.push(['_setAccount', 'UA-16253496-4']);
+ _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>
BIN  low_contrast_linen.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
48 script.js
@@ -0,0 +1,48 @@
+$(function () {
+
+ var $html = $('html').filter(':first'),
+ $menuButton = $('#open-menu'),
+ $viewport = $('html, body'),
+ body = document.getElementsByTagName('body')[0];
+
+ function adjustHeight() {
+ var newBodyHeight = $('.active').outerHeight() + 50;
+ body.style.cssText = 'height: ' + newBodyHeight + 'px;';
+ }
+ adjustHeight();
+
+ $menuButton.click(function (e) {
+ e.preventDefault();
+
+ if ($(window).scrollTop() !== 0) {
+ $(window).scrollTop(0);
+ }
+
+ $html.toggleClass('menu-open');
+ body.style.cssText = '';
+ });
+
+ $('section').click(function () {
+ var $this = $(this);
+
+ if (!$html.hasClass('menu-open')) {
+ return;
+ }
+
+ if ($(window).scrollTop() !== 0) {
+ $(window).scrollTop(0);
+ }
+
+ if ($this.hasClass('active')) {
+ $html.removeClass('menu-open');
+ adjustHeight();
+ }
+ else {
+ $('.active').removeClass('active');
+ $this.addClass('active');
+ $html.removeClass('menu-open');
+ adjustHeight();
+ }
+ });
+
+});
280 style.css
@@ -0,0 +1,280 @@
+@import url(http:\/\/fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700);
+/*
+ *
+ * development code at style.scss
+ *
+ */
+html, body {
+ -webkit-font-smoothing: antialiased;
+ font-family: 'Open Sans Condensed', Arial, Helvetica, sans-serif;
+ line-height: 1.4;
+ margin: 0;
+ height: 100%;
+ width: 100%; }
+
+html {
+ overflow-y: scroll; }
+
+body {
+ width: 320px;
+ width: 100%;
+ min-height: 300px;
+ overflow: hidden;
+ margin: 0 auto;
+ /* subtlepatterns.com all the way */
+ background: url(low_contrast_linen.png); }
+
+a {
+ text-decoration: none;
+ color: #0000c8; }
+ a:hover {
+ border-bottom: 1px solid rgba(0, 0, 200, 0.5); }
+
+nav {
+ background: #565656;
+ /* Old browsers */
+ background: -moz-linear-gradient(top, #565656 0%, #2d2d2d 100%);
+ /* FF3.6+ */
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #565656), color-stop(100%, #2d2d2d));
+ /* Chrome,Safari4+ */
+ background: -webkit-linear-gradient(top, #565656 0%, #2d2d2d 100%);
+ /* Chrome10+,Safari5.1+ */
+ background: -o-linear-gradient(top, #565656 0%, #2d2d2d 100%);
+ /* Opera 11.10+ */
+ background: -ms-linear-gradient(top, #565656 0%, #2d2d2d 100%);
+ /* IE10+ */
+ background: linear-gradient(to bottom, #565656 0%, #2d2d2d 100%);
+ /* W3C */
+ height: 50px;
+ width: 320px;
+ width: 100%;
+ position: fixed;
+ top: 0;
+ z-index: 100;
+ box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
+ -webkit-transition: all .3s ease-in-out;
+ -moz-transition: all .3s ease-in-out;
+ -o-transition: all .3s ease-in-out;
+ transition: all .3s ease-in-out; }
+ nav h1 {
+ float: left;
+ padding: 6px 10px 11px;
+ margin: 0; }
+ nav h1 a {
+ color: rgba(0, 0, 0, 0.8);
+ text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3); }
+ nav h1 a:hover {
+ border: none; }
+ nav ul {
+ display: none; }
+ nav ul a:hover {
+ border: none;
+ opacity: 0.7; }
+
+#open-menu {
+ float: right;
+ position: relative;
+ margin: 9px 10px 0 0;
+ font-size: 32px;
+ line-height: 32px;
+ padding: 0;
+ width: 30px;
+ text-align: center;
+ text-indent: -9999px;
+ color: #fff;
+ background: rgba(0, 0, 0, 0.1);
+ border-radius: 5px;
+ box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); }
+ #open-menu:hover {
+ border: none; }
+ #open-menu:before {
+ content: '';
+ position: absolute;
+ text-indent: 0;
+ left: 0;
+ width: 30px; }
+
+.section-1 {
+ z-index: 1;
+ -webkit-transform: translate3d(0, 60px, 0);
+ -moz-transform: translate3d(0, 60px, 0);
+ -o-transform: translate3d(0, 60px, 0);
+ transform: translate3d(0, 60px, 0); }
+ .menu-open .section-1 {
+ -webkit-transform: translate3d(0, 60px, 0);
+ -moz-transform: translate3d(0, 60px, 0);
+ -o-transform: translate3d(0, 60px, 0);
+ transform: translate3d(0, 60px, 0); }
+
+.section-2 {
+ z-index: 2;
+ -webkit-transform: translate3d(0, 120px, 0);
+ -moz-transform: translate3d(0, 120px, 0);
+ -o-transform: translate3d(0, 120px, 0);
+ transform: translate3d(0, 120px, 0); }
+ .menu-open .section-2 {
+ -webkit-transform: translate3d(0, 120px, 0);
+ -moz-transform: translate3d(0, 120px, 0);
+ -o-transform: translate3d(0, 120px, 0);
+ transform: translate3d(0, 120px, 0); }
+
+.section-3 {
+ z-index: 3;
+ -webkit-transform: translate3d(0, 180px, 0);
+ -moz-transform: translate3d(0, 180px, 0);
+ -o-transform: translate3d(0, 180px, 0);
+ transform: translate3d(0, 180px, 0); }
+ .menu-open .section-3 {
+ -webkit-transform: translate3d(0, 180px, 0);
+ -moz-transform: translate3d(0, 180px, 0);
+ -o-transform: translate3d(0, 180px, 0);
+ transform: translate3d(0, 180px, 0); }
+
+.section-4 {
+ z-index: 4;
+ -webkit-transform: translate3d(0, 240px, 0);
+ -moz-transform: translate3d(0, 240px, 0);
+ -o-transform: translate3d(0, 240px, 0);
+ transform: translate3d(0, 240px, 0); }
+ .menu-open .section-4 {
+ -webkit-transform: translate3d(0, 240px, 0);
+ -moz-transform: translate3d(0, 240px, 0);
+ -o-transform: translate3d(0, 240px, 0);
+ transform: translate3d(0, 240px, 0); }
+
+.section-5 {
+ z-index: 5;
+ -webkit-transform: translate3d(0, 300px, 0);
+ -moz-transform: translate3d(0, 300px, 0);
+ -o-transform: translate3d(0, 300px, 0);
+ transform: translate3d(0, 300px, 0); }
+ .menu-open .section-5 {
+ -webkit-transform: translate3d(0, 300px, 0);
+ -moz-transform: translate3d(0, 300px, 0);
+ -o-transform: translate3d(0, 300px, 0);
+ transform: translate3d(0, 300px, 0); }
+
+.menu-open nav {
+ -webkit-transform: translate3d(0, -53px, 0);
+ -moz-transform: translate3d(0, -53px, 0);
+ -o-transform: translate3d(0, -53px, 0);
+ transform: translate3d(0, -53px, 0); }
+.menu-open #content {
+ margin: 20px 0 0;
+ -webkit-transform: scale(0.9);
+ -moz-transform: scale(0.9);
+ -o-transform: scale(0.9);
+ transform: scale(0.9); }
+.menu-open section {
+ visibility: visible;
+ opacity: 1;
+ box-shadow: 0 5px 0 5px #9b9b9b, inset 0 0 5px 0px rgba(0, 0, 0, 0.5); }
+ .menu-open section:before {
+ content: attr(data-heading);
+ display: block;
+ width: 100%;
+ position: absolute;
+ top: -24px;
+ left: -5px;
+ z-index: 10;
+ font: normal 14px/14px Arial, Helvetica, sans-serif;
+ color: #2E2E2E;
+ text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.2);
+ background: -moz-linear-gradient(top, #c6c6c6 0%, #9b9b9b 100%);
+ /* FF3.6+ */
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c6c6c6), color-stop(100%, #9b9b9b));
+ /* Chrome,Safari4+ */
+ background: -webkit-linear-gradient(top, #c6c6c6 0%, #9b9b9b 100%);
+ /* Chrome10+,Safari5.1+ */
+ background: -o-linear-gradient(top, #c6c6c6 0%, #9b9b9b 100%);
+ /* Opera 11.10+ */
+ background: -ms-linear-gradient(top, #c6c6c6 0%, #9b9b9b 100%);
+ /* IE10+ */
+ background: linear-gradient(to bottom, #c6c6c6 0%, #9b9b9b 100%);
+ /* W3C */
+ border-radius: 3px 3px 0 0;
+ padding: 5px;
+ box-shadow: 0 -3px 5px 0 rgba(0, 0, 0, 0.5); }
+ .menu-open section.active:after {
+ content: '';
+ display: block;
+ font: normal 25px/25px Arial, Helvetica, sans-serif;
+ color: #535353;
+ text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.2);
+ text-align: right;
+ width: 30px;
+ z-index: 1000;
+ position: absolute;
+ right: 5px;
+ top: -26px; }
+
+#content {
+ margin: 50px 0 0;
+ position: relative;
+ -webkit-transition: all .3s ease-in-out;
+ -moz-transition: all .3s ease-in-out;
+ -o-transition: all .3s ease-in-out;
+ transition: all .3s ease-in-out; }
+
+section {
+ padding: 10px;
+ position: absolute;
+ visibility: hidden;
+ opacity: 0;
+ background: #fff;
+ -webkit-transition: -webkit-transform 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
+ -moz-transition: -moz-transform 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
+ -o-transition: -o-transform 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
+ transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; }
+ section h1 {
+ margin: 0; }
+ section.active {
+ visibility: visible;
+ opacity: 1;
+ -webkit-transform: translate3d(0, 0, 0);
+ -moz-transform: translate3d(0, 0, 0);
+ -o-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0); }
+
+@media (min-width: 600px) {
+ html, body {
+ height: auto !important; }
+
+ body {
+ /* subtlepatterns.com all the way */
+ background-image: url(grid.png); }
+
+ section {
+ position: relative;
+ opacity: 1;
+ visibility: visible;
+ -webkit-transform: none !important;
+ -moz-transform: none !important;
+ -o-transform: none !important;
+ transform: none !important;
+ max-width: 1080px;
+ margin: 0 auto 10px;
+ padding: 20px;
+ box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); }
+ section:target {
+ padding-top: 50px; }
+ section h1 {
+ font-size: 1.8em; }
+
+ #open-menu {
+ display: none; }
+
+ nav ul {
+ display: block;
+ margin: 0 10px 0;
+ padding: 12px 0;
+ list-style-type: none;
+ float: right; }
+ nav ul li {
+ display: inline-block;
+ margin: 0 0 0 10px; }
+ nav ul li a {
+ color: #fff; } }
+@media (max-width: 1200px) {
+ #ribbon img {
+ display: none; } }
286 style.scss
@@ -0,0 +1,286 @@
+/*
+ *
+ * development code at style.scss
+ *
+ */
+
+$grey: #9B9B9B;
+
+@import url(http:\/\/fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700);
+
+html, body {
+ -webkit-font-smoothing: antialiased;
+ font-family: 'Open Sans Condensed', Arial, Helvetica, sans-serif;
+ line-height: 1.4;
+ margin: 0;
+ height: 100%;
+ width: 100%;
+}
+html {
+ overflow-y: scroll;
+}
+body {
+ width: 320px;
+ width: 100%;
+ min-height: 300px;
+ overflow: hidden;
+ margin: 0 auto;
+ /* subtlepatterns.com all the way */
+ background: url(low_contrast_linen.png);
+}
+a {
+ text-decoration: none;
+ color: rgb(0, 0, 200);
+
+ &:hover {
+ border-bottom: 1px solid rgba(0, 0, 200, 0.5);
+ }
+}
+
+nav {
+ background: rgb(86,86,86); /* Old browsers */
+ background: -moz-linear-gradient(top, rgba(86,86,86,1) 0%, rgba(45,45,45,1) 100%); /* FF3.6+ */
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(86,86,86,1)), color-stop(100%,rgba(45,45,45,1))); /* Chrome,Safari4+ */
+ background: -webkit-linear-gradient(top, rgba(86,86,86,1) 0%,rgba(45,45,45,1) 100%); /* Chrome10+,Safari5.1+ */
+ background: -o-linear-gradient(top, rgba(86,86,86,1) 0%,rgba(45,45,45,1) 100%); /* Opera 11.10+ */
+ background: -ms-linear-gradient(top, rgba(86,86,86,1) 0%,rgba(45,45,45,1) 100%); /* IE10+ */
+ background: linear-gradient(to bottom, rgba(86,86,86,1) 0%,rgba(45,45,45,1) 100%); /* W3C */
+ height: 50px;
+ width: 320px;
+ width: 100%;
+ position: fixed;
+ top: 0;
+ z-index: 100;
+ box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
+ -webkit-transition: all .3s ease-in-out;
+ -moz-transition: all .3s ease-in-out;
+ -o-transition: all .3s ease-in-out;
+ transition: all .3s ease-in-out;
+
+ h1 {
+ float: left;
+ padding: 6px 10px 11px;
+ margin: 0;
+
+ a {
+ color: rgba(0, 0, 0, 0.8);
+ text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
+
+ &:hover {
+ border: none;
+ }
+ }
+ }
+
+ ul {
+ display: none;
+
+ a:hover {
+ border: none;
+ opacity: 0.7;
+ }
+ }
+}
+
+#open-menu {
+ float: right;
+ position: relative;
+ margin: 9px 10px 0 0;
+ font-size: 32px;
+ line-height: 32px;
+ padding: 0;
+ width: 30px;
+ text-align: center;
+ text-indent: -9999px;
+ color: #fff;
+ background: rgba(0, 0, 0, 0.1);
+ border-radius: 5px;
+ box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
+
+ &:hover {
+ border: none;
+ }
+
+ &:before {
+ content: '';
+ position: absolute;
+ text-indent: 0;
+ left: 0;
+ width: 30px;
+ }
+}
+
+@for $i from 1 through 5 {
+ .section-#{$i} {
+ z-index: $i;
+ -webkit-transform: translate3d(0, $i*60px, 0);
+ -moz-transform: translate3d(0, $i*60px, 0);
+ -o-transform: translate3d(0, $i*60px, 0);
+ transform: translate3d(0, $i*60px, 0);
+ .menu-open & {
+ -webkit-transform: translate3d(0, $i*60px, 0);
+ -moz-transform: translate3d(0, $i*60px, 0);
+ -o-transform: translate3d(0, $i*60px, 0);
+ transform: translate3d(0, $i*60px, 0);
+ }
+ }
+}
+
+.menu-open {
+ nav {
+ -webkit-transform: translate3d(0, -53px, 0);
+ -moz-transform: translate3d(0, -53px, 0);
+ -o-transform: translate3d(0, -53px, 0);
+ transform: translate3d(0, -53px, 0);
+ }
+ #content {
+ margin: 20px 0 0;
+ -webkit-transform: scale(0.9);
+ -moz-transform: scale(0.9);
+ -o-transform: scale(0.9);
+ transform: scale(0.9);
+ }
+ section {
+ visibility: visible;
+ opacity: 1;
+ box-shadow: 0 5px 0 5px $grey,
+ inset 0 0 5px 0px rgba(0, 0, 0, 0.5);
+
+ &:before {
+ content: attr(data-heading);
+ display: block;
+ width: 100%;
+ position: absolute;
+ top: -24px;
+ left: -5px;
+ z-index: 10;
+ font: normal 14px/14px Arial, Helvetica, sans-serif;
+ color: #2E2E2E;
+ text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.2);
+ background: -moz-linear-gradient(top, rgba(198,198,198,1) 0%, rgba(155,155,155,1) 100%); /* FF3.6+ */
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(198,198,198,1)), color-stop(100%,rgba(155,155,155,1))); /* Chrome,Safari4+ */
+ background: -webkit-linear-gradient(top, rgba(198,198,198,1) 0%,rgba(155,155,155,1) 100%); /* Chrome10+,Safari5.1+ */
+ background: -o-linear-gradient(top, rgba(198,198,198,1) 0%,rgba(155,155,155,1) 100%); /* Opera 11.10+ */
+ background: -ms-linear-gradient(top, rgba(198,198,198,1) 0%,rgba(155,155,155,1) 100%); /* IE10+ */
+ background: linear-gradient(to bottom, rgba(198,198,198,1) 0%,rgba(155,155,155,1) 100%); /* W3C */
+ border-radius: 3px 3px 0 0;
+ padding: 5px;
+ box-shadow: 0 -3px 5px 0 rgba(0, 0, 0, 0.5);
+ }
+
+ &.active:after {
+ content: '';
+ display: block;
+ font: normal 25px/25px Arial, Helvetica, sans-serif;
+ color: #535353;
+ text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.2);
+ text-align: right;
+ width: 30px;
+ z-index: 1000;
+ position: absolute;
+ right: 5px;
+ top: -26px;
+ }
+ }
+}
+
+#content {
+ margin: 50px 0 0;
+ position: relative;
+ -webkit-transition: all .3s ease-in-out;
+ -moz-transition: all .3s ease-in-out;
+ -o-transition: all .3s ease-in-out;
+ transition: all .3s ease-in-out;
+}
+
+section {
+ padding: 10px;
+ position: absolute;
+ visibility: hidden;
+ opacity: 0;
+ background: #fff;
+ -webkit-transition: -webkit-transform .3s ease-in-out,
+ opacity .3s ease-in-out,
+ visibility .3s ease-in-out;
+ -moz-transition: -moz-transform .3s ease-in-out,
+ opacity .3s ease-in-out,
+ visibility .3s ease-in-out;
+ -o-transition: -o-transform .3s ease-in-out,
+ opacity .3s ease-in-out,
+ visibility .3s ease-in-out;
+ transition: transform .3s ease-in-out,
+ opacity .3s ease-in-out,
+ visibility .3s ease-in-out;
+
+ h1 {
+ margin: 0;
+ }
+ &.active {
+ visibility: visible;
+ opacity: 1;
+ -webkit-transform: translate3d(0, 0, 0);
+ -moz-transform: translate3d(0, 0, 0);
+ -o-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+@media (min-width: 600px) {
+ html, body {
+ height: auto !important;
+ }
+ body {
+ /* subtlepatterns.com all the way */
+ background-image: url(grid.png);
+ }
+ section {
+ position: relative;
+ opacity: 1;
+ visibility: visible;
+ -webkit-transform: none !important;
+ -moz-transform: none !important;
+ -o-transform: none !important;
+ transform: none !important;
+ max-width: 1080px;
+ margin: 0 auto 10px;
+ padding: 20px;
+ box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
+
+ &:target {
+ padding-top: 50px;
+ }
+
+ h1 {
+ font-size: 1.8em;
+ }
+ }
+ #open-menu {
+ display: none;
+ }
+ nav {
+
+ ul {
+ display: block;
+ margin: 0 10px 0;
+ padding: 12px 0;
+ list-style-type: none;
+ float: right;
+
+ li {
+ display: inline-block;
+ margin: 0 0 0 10px;
+
+ a {
+ color: #fff;
+ }
+ }
+ }
+ }
+}
+
+// ribbon stuff
+@media (max-width: 1200px) {
+ #ribbon img {
+ display: none;
+ }
+}
Please sign in to comment.
Something went wrong with that request. Please try again.