Skip to content

Commit 36ad237

Browse files
treyhunnertreyhunner
committed
Add left menu bar nav with scrollspy support
1 parent 922bb92 commit 36ad237

4 files changed

Lines changed: 203 additions & 14 deletions

File tree

‎_layouts/default.html‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,15 +17,32 @@
1717
<meta name="viewport" content="width=device-width,initial-scale=1">
1818

1919
<link rel="stylesheet" href="css/style.css">
20+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
21+
<script src="/js/scrollspy.js"></script>
2022

2123
</head>
2224

2325
<body>
26+
<div class="container">
27+
28+
<div id="sidebar">
29+
<nav>
30+
<h4><a href="">Page Contents</a></h4>
31+
<ol data-scrollspy="scrollspy">
32+
<li><a href="#overview">What is EditorConfig?</a></li>
33+
<li><a href="#example-file">Example File</a></li>
34+
<li><a href="#file-location">File Location</a></li>
35+
<li><a href="#file-format-details">File Format Details</a></li>
36+
<li><a href="#supported-editors">Supported Text Editors</a></li>
37+
<li><a href="#contributing">Contributing</a></li>
38+
</ol>
39+
</nav>
40+
</div>
41+
42+
<div id="content">
2443

25-
<div id="container">
2644
<header>
2745
<h1>EditorConfig</h1>
28-
{% if page.title %}<h2>{{ page.title }}</h2>{% endif %}
2946
</header>
3047
<div id="main" role="main">
3148
{{ content }}
@@ -35,6 +52,7 @@ <h1>EditorConfig</h1>
3552
The EditorConfig website is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 Unported License</a>.
3653
</footer>
3754
</div>
55+
</div>
3856

3957
</body>
4058
</html>

‎css/style.css‎

Lines changed: 75 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -38,9 +38,50 @@ footer { margin: 1em; font-size: 0.75em; text-align: center; }
3838

3939
header { text-align: center; }
4040

41-
#container { margin: auto; width: 40em; }
41+
#content { margin-top: 0.9em; }
4242

43-
#main { background-color: #fefefe; padding: 0.25em 1em; margin: 1.25em 0; border: 0.05em solid #999; border-radius: 0.25em; }
43+
#main { padding: 0.25em 1em; }
44+
#main, #sidebar nav { background-color: #fefefe; border: 0.05em solid #999; border-radius: 0.25em; margin: 1em 0; }
45+
46+
/* Fluid container styles based on Twitter bootstrap */
47+
.container {
48+
position: relative;
49+
padding-left: 1.25em;
50+
padding-right: 1.25em;
51+
zoom: 1;
52+
}
53+
.container:before, .container:after {
54+
display: table;
55+
content: "";
56+
zoom: 1;
57+
}
58+
.container:after {
59+
clear: both;
60+
}
61+
.container > #sidebar {
62+
position: fixed;
63+
top: 3.85em;
64+
left: 1.25em;
65+
width: 11em;
66+
}
67+
.container > #content {
68+
margin-left: 12.5em;
69+
}
70+
71+
section { padding-top: 10px; margin-top: -10px; }
72+
73+
#sidebar nav { clear: both; }
74+
#sidebar nav > * { font-size: 0.8em; }
75+
#sidebar h4 { margin-bottom: 0; margin-left: 0.5em; }
76+
#sidebar a { text-decoration: none; display: block; color: #000; padding-left: 0.5em; }
77+
#sidebar h4 a { color: #000; }
78+
#sidebar ol { margin: 0.5em; }
79+
#sidebar li > ol { margin-top: 0; }
80+
#sidebar li { list-style: none; margin: 1em 0; }
81+
#sidebar li li { margin: 0.25em 0; }
82+
#sidebar li > a { color: #666; }
83+
#sidebar li.active { background-color: #eee; }
84+
#sidebar li.active > a { color: #000; }
4485

4586
/*
4687
* Remove text-shadow in selection highlight: h5bp.com/i
@@ -83,6 +124,12 @@ pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; border-rad
83124

84125
q { quotes: '\201C' '\201D'; }
85126

127+
h1, h2, h3, h4 { margin: 0; padding: 0; }
128+
h1 { font-size: 2em; margin: 0.6em 0; }
129+
h2 { font-size: 1.5em; margin: 0.8em 0; }
130+
h3 { font-size: 1.17em; margin: 1em 0; }
131+
h4 { font-size: 1em; margin: 1.3em 0; }
132+
86133
/* =============================================================================
87134
Lists
88135
========================================================================== */
@@ -91,8 +138,8 @@ ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
91138
dd { margin: 0 0 0 40px; }
92139
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
93140

94-
ol.nav li { padding: 0.25em; }
95-
ol.nav { margin-top: 0; }
141+
nav ol li { padding: 0.25em; }
142+
nav ol { margin-top: 0; }
96143

97144
ul.property-definitions { list-style: none; lyst-style-image: none; margin: 0; padding: 0; }
98145
ul.property-definitions li { margin: 1em 0 1em 1em; }
@@ -101,6 +148,30 @@ ul.property-definitions li { margin: 1em 0 1em 1em; }
101148
.property-definitions q:before { content: open-quote; font-family: sans-serif; }
102149
.property-definitions q:after { content: close-quote; font-family: sans-serif; }
103150

151+
/* =============================================================================
152+
Tables (inspired by Twitter bootstrap styles)
153+
========================================================================== */
154+
155+
table {
156+
width: 100%;
157+
border-collapse: collapse;
158+
}
159+
table th, table td {
160+
padding: 10px 10px 9px;
161+
text-align: left;
162+
}
163+
table th {
164+
font-weight: bold;
165+
vertical-align: middle;
166+
}
167+
table td {
168+
vertical-align: top;
169+
border-top: 1px solid #ddd;
170+
}
171+
table tbody th {
172+
border-top: 1px solid #ddd;
173+
vertical-align: top;
174+
}
104175

105176
/* ==|== print styles =======================================================
106177
Print styles.

‎index.html‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,10 @@
55

66
<section>
77

8-
<h2 id="what-is-editorconfig">What is EditorConfig?</h2>
8+
<h2 id="overview">What is EditorConfig?</h2>
99

1010
<p>EditorConfig is an initiative for solving the <q>my coding style is different than yours</q> problem common amongst multi-developer teams. An EditorConfig file is used to define recommended coding styles for groups of files. The goal of this project is to finalize the EditorConfig file format and create plugins to add EditorConfig support to popular text editors and <abbr title="integrated development environment">IDEs</abbr>.</p>
1111

12-
<h4 style="margin-bottom: 0;">Page Contents</h4>
13-
<ol class="nav">
14-
<li><a href="#file-format">What's an EditorConfig file look like?</a></li>
15-
<li><a href="#supported-editors">Supported text editors</a></li>
16-
<li><a href="#contributing">Contributing to EditorConfig</a></li>
17-
</ol>
18-
1912
</section>
2013

2114
<section id="file-format">

‎js/scrollspy.js‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
/* =============================================================
2+
* bootstrap-scrollspy.js v1.4.0
3+
* http://twitter.github.com/bootstrap/javascript.html#scrollspy
4+
* =============================================================
5+
* Copyright 2011 Twitter, Inc.
6+
*
7+
* Licensed under the Apache License, Version 2.0 (the "License");
8+
* you may not use this file except in compliance with the License.
9+
* You may obtain a copy of the License at
10+
*
11+
* http://www.apache.org/licenses/LICENSE-2.0
12+
*
13+
* Unless required by applicable law or agreed to in writing, software
14+
* distributed under the License is distributed on an "AS IS" BASIS,
15+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
16+
* See the License for the specific language governing permissions and
17+
* limitations under the License.
18+
* ============================================================== */
19+
20+
21+
!function ( $ ) {
22+
23+
"use strict"
24+
25+
var $window = $(window)
26+
27+
function ScrollSpy( topbar, selector ) {
28+
var processScroll = $.proxy(this.processScroll, this)
29+
this.$topbar = $(topbar)
30+
this.selector = selector || 'li > a'
31+
this.refresh()
32+
this.$topbar.delegate(this.selector, 'click', processScroll)
33+
$window.scroll(processScroll)
34+
this.processScroll()
35+
}
36+
37+
ScrollSpy.prototype = {
38+
39+
refresh: function () {
40+
this.targets = this.$topbar.find(this.selector).map(function () {
41+
var href = $(this).attr('href')
42+
return /^#\w/.test(href) && $(href).length ? href : null
43+
})
44+
45+
this.offsets = $.map(this.targets, function (id) {
46+
return $(id).offset().top
47+
})
48+
}
49+
50+
, processScroll: function () {
51+
var scrollTop = $window.scrollTop() + 200
52+
, offsets = this.offsets
53+
, targets = this.targets
54+
, activeTarget = this.activeTarget
55+
, i
56+
57+
for (i = offsets.length; i--;) {
58+
activeTarget != targets[i]
59+
&& scrollTop >= offsets[i]
60+
&& (!offsets[i + 1] || scrollTop <= offsets[i + 1])
61+
&& this.activateButton( targets[i] )
62+
}
63+
}
64+
65+
, activateButton: function (target) {
66+
this.activeTarget = target
67+
68+
this.$topbar
69+
.find(this.selector).parent('.active')
70+
.removeClass('active')
71+
72+
this.$topbar
73+
.find(this.selector + '[href="' + target + '"]')
74+
.parent('li')
75+
.addClass('active')
76+
}
77+
78+
}
79+
80+
/* SCROLLSPY PLUGIN DEFINITION
81+
* =========================== */
82+
83+
$.fn.scrollSpy = function( options ) {
84+
var scrollspy = this.data('scrollspy')
85+
86+
if (!scrollspy) {
87+
return this.each(function () {
88+
$(this).data('scrollspy', new ScrollSpy( this, options ))
89+
})
90+
}
91+
92+
if ( options === true ) {
93+
return scrollspy
94+
}
95+
96+
if ( typeof options == 'string' ) {
97+
scrollspy[options]()
98+
}
99+
100+
return this
101+
}
102+
103+
$(document).ready(function () {
104+
$('body').scrollSpy('[data-scrollspy] li > a')
105+
})
106+
107+
}( window.jQuery || window.ender );

0 commit comments

Comments
 (0)