Skip to content

Commit

Permalink
First commit to repo
Browse files Browse the repository at this point in the history
  • Loading branch information
Neil Carpenter authored and Neil Carpenter committed Oct 31, 2012
0 parents commit 67e6345
Show file tree
Hide file tree
Showing 7 changed files with 745 additions and 0 deletions.
10 changes: 10 additions & 0 deletions 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/).
Binary file added grid.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
121 changes: 121 additions & 0 deletions 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>
Binary file added 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 changes: 48 additions & 0 deletions 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();
}
});

});

0 comments on commit 67e6345

Please sign in to comment.