starting to implement a docking nav?

This commit is contained in:
Dave Gamache 2014-12-01 20:05:29 -08:00
parent 4f8392275a
commit a4ab5f6f4e
3 changed files with 156 additions and 83 deletions

View File

@ -48,25 +48,63 @@
<div class="four columns offset-by-two value-prop">
<img class="value-img" src="images/feather.svg">
Light as a feather at less than a kb &amp; built with mobile in mind.
<!-- Attr: http://thenounproject.com/term/feather/22073/ -->
</div>
<div class="four columns value-prop">
<img class="value-img" src="images/pens.svg">
<!-- Attr: bottom pen - http://thenounproject.com/term/pen/32847/ -->
<!-- Attr: top pen - http://thenounproject.com/term/pen/21163/ -->
Styles designed to be a starting point, not a UI framework.
</div>
<div class="four columns value-prop">
<img class="value-img" src="images/watch.svg">
<!-- Attr: http://thenounproject.com/term/watch/48012/ -->
Quick to start with zero compiling or installing necessary.
</div>
</div>
</section>
<div class="social-bar">
</div>
<div class="navbar-spacer"></div>
<nav class="navbar">
<div class="container">
<ul class="navbar-list">
<li class="navbar-item"><a class="navbar-link" href="#">Intro</a></li>
<li class="navbar-item">
<a class="navbar-link" href="#" data-popover-id="codeNavPopover">Code</a>
<div id="codeNavPopover" class="popover">
<ul class="popover-list">
<li class="popover-item">
<a class="popover-link" href="#">Grid</a>
</li>
<li class="popover-item">
<a class="popover-link" href="#">Typography</a>
</li>
<li class="popover-item">
<a class="popover-link" href="#">Buttons</a>
</li>
<li class="popover-item">
<a class="popover-link" href="#">Forms</a>
</li>
<li class="popover-item">
<a class="popover-link" href="#">Lists</a>
</li>
<li class="popover-item">
<a class="popover-link" href="#">Code</a>
</li>
<li class="popover-item">
<a class="popover-link" href="#">Tables</a>
</li>
<li class="popover-item">
<a class="popover-link" href="#">Queries</a>
</li>
<li class="popover-item">
<a class="popover-link" href="#">Utilities</a>
</li>
</ul>
</div>
</li>
<li class="navbar-item"><a class="navbar-link" href="#">Examples</a></li>
<li class="navbar-item"><a class="navbar-link" href="#">License</a></li>
<li class="navbar-item"><a class="navbar-link" href="#">Colophon</a></li>
</ul>
</div>
</nav>
<!-- Why use Skeleton -->
<div class="docs-section">
@ -592,15 +630,6 @@
<p>Skeleton was built using <a href="http://www.sublimetext.com/3">Sublime Text 3</a> and designed with <a href="http://bohemiancoding.com/sketch/">Sketch</a>. The typeface <a href="http://www.google.com/fonts/specimen/Raleway">Raleway</a> was created by <a href="http://matt.cc/">Matt McInerney</a> and <a href="http://www.impallari.com/">Pablo Impallari</a>. Code highlighting by Google's Prettify library. Icons in the header are all derivative work of icon from <a href="thenounproject.com">The Noun Project</a>.<a href="http://thenounproject.com/term/feather/22073/"> Feather</a> by Zach VanDeHey, <a href="http://thenounproject.com/term/pen/21163/">Pen</a> (with cap) by Ed Harrison, <a href="http://thenounproject.com/term/pen/32847/">Pen</a> (with clicker) by Matthew Hall, and <a href="http://thenounproject.com/term/watch/48015/">Watch</a> by Julien Deveaux.</p>
</div>
<div class="code-toggler">
<span class="code-toggle"></span>
<span class="code-label">
Code
<span class="code-label-show">hidden</span>
<span class="code-label-hide">visible</span>
</span>
</div>
</div>
<!-- End Document

View File

@ -1,10 +1,11 @@
$(document).ready(function() {
// Variables
var codeIsActive = true,
$codeSnippets = $('.code-example-body'),
$sections = $('.docs-section'),
var $codeSnippets = $('.code-example-body'),
$nav = $('.navbar'),
$body = $('body'),
$window = $(window),
navOffsetTop = $nav.offset().top,
entityMap = {
"&": "&amp;",
"<": "&lt;",
@ -15,10 +16,24 @@ $(document).ready(function() {
}
function init() {
$('.code-toggler').on('click', toggleCode)
$window.on('scroll', onScroll)
$window.on('resize', resize)
buildSnippets();
}
function resize() {
navOffsetTop = $nav.offset().top
}
function onScroll() {
if(navOffsetTop < $window.scrollTop() && !$body.hasClass('has-docked-nav')) {
$body.addClass('has-docked-nav')
}
if(navOffsetTop > $window.scrollTop() && $body.hasClass('has-docked-nav')) {
$body.removeClass('has-docked-nav')
}
}
function escapeHtml(string) {
return String(string).replace(/[&<>"'\/]/g, function (s) {
return entityMap[s];
@ -32,26 +47,6 @@ $(document).ready(function() {
})
}
function toggleCode() {
var windowScrollTop = $window.scrollTop()
var offsetHeight = windowScrollTop
$sections.each(function (i) {
if($(this).children('.code-example').length > 0) {
var codeExampleHeight = $(this).children('.code-example').outerHeight(true),
sectionBottomPadding = parseInt($('.docs-section').css('padding-bottom'))
if(windowScrollTop > $(this).offset().top + $(this).outerHeight() - sectionBottomPadding) {
if(codeIsActive == false) {
offsetHeight += codeExampleHeight
} else {
offsetHeight -= codeExampleHeight
}
}
}
})
$('body').toggleClass('code-snippets-visible')
codeIsActive = !codeIsActive
$window.scrollTop(offsetHeight)
}
init();

View File

@ -52,54 +52,11 @@
.code-example {
margin-top: 1.5rem;
margin-bottom: 0;
display: none;
}
.code-example-body {
white-space: pre;
/*overflow: auto;*/
word-wrap: break-word
}
.code-snippets-visible .code-example {
display: block;
}
.code-toggler {
position: fixed;
bottom: 10px;
left: 10px;
width: 34px;
height: 20px;
background: #E5E5E5;
border: 1px solid #C6C6C6;
border-radius: 100px;
cursor: pointer; }
.code-toggle {
position: absolute;
width: 16px;
height: 16px;
top: 1px;
left: 1px;
background-color: #fff;
border: 1px solid #C6C6C6;
border-radius: 100px;
-webkit-transition: all .15s ease-out; }
.code-snippets-visible .code-toggler {
background: #67D55B;
border-color: #4CB340; }
.code-snippets-visible .code-toggle {
border-color: #4CB340;
left: 14px; }
.code-label {
width: 100px;
position: absolute;
left: 42px;
font-size: 11px;
color: #888; }
.code-toggler .code-label-hide {
display: none; }
.code-snippets-visible .code-label-hide {
display: inline; }
.code-snippets-visible .code-label-show {
display: none; }
@media (min-width: 550px) {
.header {
@ -118,4 +75,96 @@
float: right;
margin-top: 12px;
}
}
.navbar + .docs-section {
border-top-width: 0;
}
.navbar,
.navbar-spacer {
width: 100%;
height: 6.5rem;
background: #fff;
z-index: 99;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
}
.navbar-spacer {
display: none;
}
.navbar > .container {
width: 100%;
}
.navbar-list {
list-style: none;
margin-bottom: 0;
}
.navbar-item {
position: relative;
float: left;
margin-bottom: 0;
}
.navbar-link {
text-transform: uppercase;
font-size: 11px;
font-weight: 600;
letter-spacing: .1rem;
margin-right: 50px;
text-decoration: none;
line-height: 6.3rem;
color: #222;
}
.navbar-link.active {
color: #33C3F0;
}
.has-docked-nav .navbar {
position: fixed;
top: 0;
left: 0;
}
.has-docked-nav .navbar-spacer {
display: block;
}
.popover {
display: none;
position: absolute;
top: 0;
left: 0;
background: #fff;
border: 1px solid #eee;
border-radius: 4px;
top: 92%;
left: -50%;
}
.popover-list {
padding: 10px 0;
margin: 0;
list-style: none;
}
.popover-item {
padding: 0;
margin: 0;
}
.popover-link {
color: #999;
display: block;
padding: 5px 20px;
text-decoration: none;
text-transform: uppercase;
font-size: 1.0rem;
font-weight: 600;
text-align: center;
letter-spacing: .1rem;
}
.popover-link:hover {
color: #fff;
background: #33C3F0;
}