sliding top menu
This commit is contained in:
Open-Steps.org
parent
057a63d15e
commit
7dcbe77c2d
24 changed files with 918 additions and 123 deletions
71
js/scrollIt.js-master/demo/index.haml
Executable file
71
js/scrollIt.js-master/demo/index.haml
Executable file
|
|
@ -0,0 +1,71 @@
|
|||
!!!
|
||||
%html(xmlns='http://www.w3.org/1999/xhtml' lang='en' xml:lang='en')
|
||||
%head
|
||||
%title ScrollIt.js - easy vertical scrolling
|
||||
%script(type='text/javascript' src='jquery-1.10.2.min.js')
|
||||
%script(type='text/javascript' src='../scrollIt.min.js')
|
||||
%link(href='http://fonts.googleapis.com/css?family=Headland+One|Open+Sans:400italic,400,700' rel='stylesheet' type='text/css')
|
||||
%link(rel='stylesheet' href='style.css')
|
||||
%script $(function() { $.scrollIt(); });
|
||||
%body
|
||||
.nav-container
|
||||
%nav
|
||||
%ul
|
||||
%li
|
||||
%a.active(data-scroll-nav='0') About
|
||||
%li
|
||||
%a(data-scroll-nav='1') Usage
|
||||
%li
|
||||
%a(data-scroll-nav='2') Options
|
||||
%li
|
||||
%a(data-scroll-nav='3') Credit
|
||||
|
||||
%section(data-scroll-index='0')
|
||||
.content
|
||||
%h1 ScrollIt.js
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-text="ScrollIt.js - easy vertical scrolling" data-via="ChrisPolis">Tweet</a>
|
||||
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
|
||||
<iframe src="http://ghbtns.com/github-btn.html?user=cmpolis&repo=scrollIt.js&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
|
||||
%h2 About
|
||||
%p ScrollIt.js<i>(scroll•it•dot•js)</i> makes it easy to make scrolling pages like this one or add scrolling functionality to existing pages. <a href='http://bytemuse.com/post/easy-scrolling-pages-with-scrollit-dot-js/'>Here's a brief blog plost explaining it.</a>
|
||||
%h4 This is why it rocks:
|
||||
%ul.why-list
|
||||
%li <b>Easy to implement:</b> One JS call, just put data- attributes on the DOM
|
||||
%li <b>Lightweight:</b> ~1kb minified
|
||||
%li <b>Active Class:</b> Your navigation is updated automatically
|
||||
%li <b>Configurable:</b> Set the animation easing, duration, callbacks and more
|
||||
%li <b>Keyboard Navigation:</b> Press the up and down keys to move...
|
||||
%section(data-scroll-index='1')
|
||||
.content
|
||||
%h2 Usage
|
||||
%p
|
||||
1) Include jQuery and scrollIt.js
|
||||
<script src="https://gist.github.com/cmpolis/5954658.js"></script>
|
||||
%p
|
||||
2) Put a <i>data-scroll-index</i> attribute on each section
|
||||
<script src="https://gist.github.com/cmpolis/5954675.js"></script>
|
||||
%p
|
||||
3) Put corresponding <i>data-scroll-nav</i> attributes on each nav element
|
||||
<script src="https://gist.github.com/cmpolis/5954686.js"></script>
|
||||
%p
|
||||
4) For links to sections, put on a <i>data-scroll-goto</i> attribute
|
||||
<script src="https://gist.github.com/cmpolis/5954690.js"></script>
|
||||
|
||||
%p
|
||||
5) Call <i>scrollIt()</i>
|
||||
<script src="https://gist.github.com/cmpolis/5954703.js"></script>
|
||||
%p <i>View the source of this page for an example</i>
|
||||
%section(data-scroll-index='2')
|
||||
.content
|
||||
%h2 Options
|
||||
%p To customize scrollIt.js, simply pass in an options object: <i>(defaults shown)</i>
|
||||
<script src="https://gist.github.com/cmpolis/5954639.js"></script>
|
||||
%section(data-scroll-index='3')
|
||||
.content
|
||||
%h2 Credit
|
||||
%p ScrollIt.js was created by <a href='http://twitter.com/chrispolis'>@ChrisPolis</a>.
|
||||
%p Feel free to use, share and fork it. <a href='https://github.com/cmpolis/scrollIt.js'>It's on Github.</a>
|
||||
|
||||
%p Enjoy!
|
||||
%p.bottom-link
|
||||
%a(data-scroll-goto='0') Back to top
|
||||
93
js/scrollIt.js-master/demo/index.html
Executable file
93
js/scrollIt.js-master/demo/index.html
Executable file
|
|
@ -0,0 +1,93 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
|
||||
<head>
|
||||
<title>ScrollIt.js by @ChrisPolis</title>
|
||||
<script src='jquery-1.10.2.min.js' type='text/javascript'></script>
|
||||
<script src='../scrollIt.min.js' type='text/javascript'></script>
|
||||
<link href='http://fonts.googleapis.com/css?family=Headland+One|Open+Sans:400italic,400,700' rel='stylesheet' type='text/css'>
|
||||
<link href='style.css' rel='stylesheet'>
|
||||
<script>$(function() { $.scrollIt(); });</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class='nav-container'>
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<a class='active' data-scroll-nav='0'>About</a>
|
||||
</li>
|
||||
<li>
|
||||
<a data-scroll-nav='1'>Usage</a>
|
||||
</li>
|
||||
<li>
|
||||
<a data-scroll-nav='2'>Options</a>
|
||||
</li>
|
||||
<li>
|
||||
<a data-scroll-nav='3'>Credit</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<section data-scroll-index='0'>
|
||||
<div class='content'>
|
||||
<h1>ScrollIt.js</h1>
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-text="Check out this jQuery plugin - ScrollIt.js" data-via="ChrisPolis">Tweet</a>
|
||||
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
|
||||
<iframe src="http://ghbtns.com/github-btn.html?user=cmpolis&repo=scrollIt.js&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
|
||||
<h2>About</h2>
|
||||
<p>ScrollIt.js<i>(scroll•it•dot•js)</i> makes it easy to make scrolling pages like this one or add scrolling functionality to existing pages. <a href='http://bytemuse.com/post/easy-scrolling-pages-with-scrollit-dot-js/'>Here's a brief blog plost explaining it.</a></p>
|
||||
<h4>This is why it rocks:</h4>
|
||||
<ul class='why-list'>
|
||||
<li><b>Easy to implement:</b> One JS call, just put data- attributes on the DOM</li>
|
||||
<li><b>Lightweight:</b> ~1kb minified</li>
|
||||
<li><b>Active Class:</b> Your navigation is updated automatically</li>
|
||||
<li><b>Configurable:</b> Set the animation easing, duration, callbacks and more</li>
|
||||
<li><b>Keyboard Navigation:</b> Press the up and down keys to move...</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<section data-scroll-index='1'>
|
||||
<div class='content'>
|
||||
<h2>Usage</h2>
|
||||
<p>
|
||||
1) Include jQuery and scrollIt.js
|
||||
<script src="https://gist.github.com/cmpolis/5954658.js"></script>
|
||||
</p>
|
||||
<p>
|
||||
2) Put a <i>data-scroll-index</i> attribute on each section
|
||||
<script src="https://gist.github.com/cmpolis/5954675.js"></script>
|
||||
</p>
|
||||
<p>
|
||||
3) Put corresponding <i>data-scroll-nav</i> attributes on each nav element
|
||||
<script src="https://gist.github.com/cmpolis/5954686.js"></script>
|
||||
</p>
|
||||
<p>
|
||||
4) For links to sections, put on a <i>data-scroll-goto</i> attribute
|
||||
<script src="https://gist.github.com/cmpolis/5954690.js"></script>
|
||||
</p>
|
||||
<p>
|
||||
5) Call <i>scrollIt()</i>
|
||||
<script src="https://gist.github.com/cmpolis/5954703.js"></script>
|
||||
</p>
|
||||
<p><i>View the source of this page for an example</i></p>
|
||||
</div>
|
||||
</section>
|
||||
<section data-scroll-index='2'>
|
||||
<div class='content'>
|
||||
<h2>Options</h2>
|
||||
<p>To customize scrollIt.js, simply pass in an options object: <i>(defaults shown)</i></p>
|
||||
<script src="https://gist.github.com/cmpolis/5954639.js"></script>
|
||||
</div>
|
||||
</section>
|
||||
<section data-scroll-index='3'>
|
||||
<div class='content'>
|
||||
<h2>Credit</h2>
|
||||
<p>ScrollIt.js was created by <a href='http://twitter.com/chrispolis'>@ChrisPolis</a>.</p>
|
||||
<p>Feel free to use, share and fork it. <a href='https://github.com/cmpolis/scrollIt.js'>It's on Github.</a></p>
|
||||
<p>Enjoy!</p>
|
||||
<p class='bottom-link'>
|
||||
<a data-scroll-goto='0'>Back to top</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
6
js/scrollIt.js-master/demo/jquery-1.10.2.min.js
vendored
Executable file
6
js/scrollIt.js-master/demo/jquery-1.10.2.min.js
vendored
Executable file
File diff suppressed because one or more lines are too long
87
js/scrollIt.js-master/demo/style.css
Executable file
87
js/scrollIt.js-master/demo/style.css
Executable file
|
|
@ -0,0 +1,87 @@
|
|||
body {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
font-family: "Open Sans", sans-serif; }
|
||||
|
||||
h1, h2, h4, nav li a {
|
||||
font-family: "Headland One", Georgia, serif; }
|
||||
|
||||
h1 {
|
||||
font-size: 48px;
|
||||
margin-top: 80px;
|
||||
margin-bottom: 10px;
|
||||
color: #002e40; }
|
||||
|
||||
h2 {
|
||||
margin-top: 80px;
|
||||
font-size: 28px; }
|
||||
|
||||
h4 {
|
||||
font-size: 20px;
|
||||
margin-bottom: 10px; }
|
||||
|
||||
.why-list {
|
||||
margin-top: 0px; }
|
||||
.why-list li {
|
||||
line-height: 28px; }
|
||||
|
||||
a {
|
||||
cursor: pointer; }
|
||||
|
||||
ul {
|
||||
list-style: none; }
|
||||
|
||||
.nav-container {
|
||||
background-color: #002e40;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
left: 0px; }
|
||||
|
||||
nav {
|
||||
text-align: center;
|
||||
width: 640px;
|
||||
margin: 0px auto; }
|
||||
nav ul {
|
||||
padding: 0px; }
|
||||
nav li {
|
||||
width: 24%;
|
||||
display: inline-block; }
|
||||
nav li a {
|
||||
font-size: 15px;
|
||||
color: white; }
|
||||
nav li a.active {
|
||||
color: #aaaaaa; }
|
||||
@media screen and (max-width: 640px) {
|
||||
nav {
|
||||
width: 90%; }
|
||||
nav li a {
|
||||
font-size: 18px; } }
|
||||
|
||||
section {
|
||||
padding-top: 40px;
|
||||
height: 1200px;
|
||||
width: 100%; }
|
||||
section .content {
|
||||
margin: 0px auto;
|
||||
max-width: 640px; }
|
||||
@media screen and (max-width: 640px) {
|
||||
section .content {
|
||||
width: 90%; } }
|
||||
section .content a {
|
||||
color: #002e40; }
|
||||
|
||||
section:nth-child(odd) {
|
||||
background-color: #002e40;
|
||||
color: white; }
|
||||
section:nth-child(odd) a {
|
||||
color: white; }
|
||||
|
||||
.bottom-link {
|
||||
margin-top: 80px;
|
||||
font-style: italic; }
|
||||
|
||||
.gist-meta {
|
||||
display: none; }
|
||||
|
||||
.file-data {
|
||||
font-size: 14px; }
|
||||
82
js/scrollIt.js-master/demo/style.sass
Executable file
82
js/scrollIt.js-master/demo/style.sass
Executable file
|
|
@ -0,0 +1,82 @@
|
|||
$pageWidth: 640px
|
||||
$responsiveWidth: 90%
|
||||
$primary: #fff
|
||||
$secondary: #002E40
|
||||
|
||||
body
|
||||
padding: 0px
|
||||
margin: 0px
|
||||
font-family: 'Open Sans', sans-serif
|
||||
|
||||
h1, h2, h4, nav li a
|
||||
font-family: 'Headland One', Georgia, serif
|
||||
h1
|
||||
font-size: 48px
|
||||
margin-top: 80px
|
||||
margin-bottom: 10px
|
||||
color: $secondary
|
||||
h2
|
||||
margin-top: 80px
|
||||
font-size: 28px
|
||||
h4
|
||||
font-size: 20px
|
||||
margin-bottom: 10px
|
||||
.why-list
|
||||
margin-top: 0px
|
||||
li
|
||||
line-height: 28px
|
||||
a
|
||||
cursor: pointer
|
||||
ul
|
||||
list-style: none
|
||||
|
||||
.nav-container
|
||||
background-color: $secondary
|
||||
width: 100%
|
||||
position: fixed
|
||||
left: 0px
|
||||
nav
|
||||
text-align: center
|
||||
width: $pageWidth
|
||||
margin: 0px auto
|
||||
ul
|
||||
padding: 0px
|
||||
li
|
||||
width: 24%
|
||||
display: inline-block
|
||||
a
|
||||
font-size: 15px
|
||||
color: $primary
|
||||
a.active
|
||||
color: #aaa
|
||||
@media screen and (max-width: $pageWidth)
|
||||
width: $responsiveWidth
|
||||
li
|
||||
a
|
||||
font-size: 18px
|
||||
|
||||
section
|
||||
padding-top: 40px
|
||||
height: 1200px
|
||||
width: 100%
|
||||
.content
|
||||
margin: 0px auto
|
||||
max-width: $pageWidth
|
||||
@media screen and (max-width: $pageWidth)
|
||||
width: $responsiveWidth
|
||||
a
|
||||
color: $secondary
|
||||
section:nth-child(odd)
|
||||
background-color: $secondary
|
||||
color: $primary
|
||||
a
|
||||
color: $primary
|
||||
|
||||
.bottom-link
|
||||
margin-top: 80px
|
||||
font-style: italic
|
||||
|
||||
.gist-meta
|
||||
display: none
|
||||
.file-data
|
||||
font-size: 14px
|
||||
Loading…
Add table
Add a link
Reference in a new issue