Skip to content
This repository was archived by the owner on Mar 21, 2023. It is now read-only.

Commit 21e7222

Browse files
author
Cam
committed
Footer nav bar
Added footer navigation and cleaned up a bit
1 parent 76fbf54 commit 21e7222

File tree

9 files changed

+548
-250
lines changed

9 files changed

+548
-250
lines changed

‎assets/custom.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ ul {
77
/* Cam's Custom Tiny Tags */
88
.tag {
99
padding: 0 9px 0 8px;
10-
background: #58a9e2;
10+
background: #2ba6cb;
1111
text-decoration: none;
1212
-moz-border-radius-bottomright: 2px;
1313
-webkit-border-bottom-right-radius: 2px;
@@ -34,7 +34,7 @@ ul {
3434
left: -10px;
3535
width: 0;
3636
height: 1px;
37-
border-color: transparent #58a9e2 transparent transparent;
37+
border-color: transparent #2ba6cb transparent transparent;
3838
border-style: solid;
3939
border-width: 10px 10px 10px 0;
4040
-moz-border-radius-topleft: 2px;

‎assets/foundation.topbar.js‎

Lines changed: 300 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,300 @@
1+
/*jslint unparam: true, browser: true, indent: 2 */
2+
3+
;(function ($, window, document, undefined) {
4+
'use strict';
5+
6+
Foundation.libs.topbar = {
7+
name : 'topbar',
8+
9+
version : '4.3.0',
10+
11+
settings : {
12+
index : 0,
13+
stickyClass : 'sticky',
14+
custom_back_text: true,
15+
back_text: 'Back',
16+
is_hover: true,
17+
mobile_show_parent_link: true,
18+
scrolltop : true, // jump to top when sticky nav menu toggle is clicked
19+
init : false
20+
},
21+
22+
init : function (section, method, options) {
23+
Foundation.inherit(this, 'data_options');
24+
var self = this;
25+
26+
if (typeof method === 'object') {
27+
$.extend(true, this.settings, method);
28+
} else if (typeof options !== 'undefined') {
29+
$.extend(true, this.settings, options);
30+
}
31+
32+
if (typeof method !== 'string') {
33+
34+
$('.top-bar, [data-topbar]').each(function () {
35+
$.extend(true, self.settings, self.data_options($(this)));
36+
self.settings.$w = $(window);
37+
self.settings.$topbar = $(this);
38+
self.settings.$section = self.settings.$topbar.find('section');
39+
self.settings.$titlebar = self.settings.$topbar.children('ul').first();
40+
self.settings.$topbar.data('index', 0);
41+
42+
var breakpoint = $("<div class='top-bar-js-breakpoint'/>").insertAfter(self.settings.$topbar);
43+
self.settings.breakPoint = breakpoint.width();
44+
breakpoint.remove();
45+
46+
self.assemble();
47+
48+
if (self.settings.is_hover) {
49+
self.settings.$topbar.find('.has-dropdown').addClass('not-click');
50+
}
51+
52+
if (self.settings.$topbar.parent().hasClass('fixed')) {
53+
$('body').css('padding-top', self.outerHeight(self.settings.$topbar));
54+
}
55+
});
56+
57+
if (!self.settings.init) {
58+
this.events();
59+
}
60+
61+
return this.settings.init;
62+
} else {
63+
// fire method
64+
return this[method].call(this, options);
65+
}
66+
},
67+
68+
timer : null,
69+
70+
events : function () {
71+
var self = this;
72+
var offst = this.outerHeight($('.top-bar, [data-topbar]'));
73+
$(this.scope)
74+
.off('.fndtn.topbar')
75+
.on('click.fndtn.topbar', '.top-bar .toggle-topbar, [data-topbar] .toggle-topbar', function (e) {
76+
var topbar = $(this).closest('.top-bar, [data-topbar]'),
77+
section = topbar.find('section, .section'),
78+
titlebar = topbar.children('ul').first();
79+
80+
e.preventDefault();
81+
82+
if (self.breakpoint()) {
83+
if (!self.rtl) {
84+
section.css({left: '0%'});
85+
section.find('>.name').css({left: '100%'});
86+
} else {
87+
section.css({right: '0%'});
88+
section.find('>.name').css({right: '100%'});
89+
}
90+
91+
section.find('li.moved').removeClass('moved');
92+
topbar.data('index', 0);
93+
94+
topbar
95+
.toggleClass('expanded')
96+
.css('height', '');
97+
}
98+
99+
if (!topbar.hasClass('expanded')) {
100+
if (topbar.hasClass('fixed')) {
101+
topbar.parent().addClass('fixed');
102+
topbar.removeClass('fixed');
103+
$('body').css('padding-top',offst);
104+
}
105+
} else if (topbar.parent().hasClass('fixed')) {
106+
topbar.parent().removeClass('fixed');
107+
topbar.addClass('fixed');
108+
$('body').css('padding-top','0');
109+
110+
if (self.settings.scrolltop) {
111+
window.scrollTo(0,0);
112+
}
113+
}
114+
})
115+
116+
.on('click.fndtn.topbar', '.top-bar li.has-dropdown', function (e) {
117+
if (self.breakpoint()) return;
118+
119+
var li = $(this),
120+
target = $(e.target),
121+
topbar = li.closest('[data-topbar], .top-bar'),
122+
is_hover = topbar.data('topbar');
123+
124+
if (self.settings.is_hover && !Modernizr.touch) return;
125+
126+
e.stopImmediatePropagation();
127+
128+
if (target[0].nodeName === 'A' && target.parent().hasClass('has-dropdown')) {
129+
e.preventDefault();
130+
}
131+
132+
if (li.hasClass('hover')) {
133+
li
134+
.removeClass('hover')
135+
.find('li')
136+
.removeClass('hover');
137+
} else {
138+
li.addClass('hover');
139+
}
140+
})
141+
142+
.on('click.fndtn.topbar', '.top-bar .has-dropdown>a, [data-topbar] .has-dropdown>a', function (e) {
143+
if (self.breakpoint()) {
144+
e.preventDefault();
145+
146+
var $this = $(this),
147+
topbar = $this.closest('.top-bar, [data-topbar]'),
148+
section = topbar.find('section, .section'),
149+
titlebar = topbar.children('ul').first(),
150+
dropdownHeight = $this.next('.dropdown').outerHeight(),
151+
$selectedLi = $this.closest('li');
152+
153+
topbar.data('index', topbar.data('index') + 1);
154+
$selectedLi.addClass('moved');
155+
156+
if (!self.rtl) {
157+
section.css({left: -(100 * topbar.data('index')) + '%'});
158+
section.find('>.name').css({left: 100 * topbar.data('index') + '%'});
159+
} else {
160+
section.css({right: -(100 * topbar.data('index')) + '%'});
161+
section.find('>.name').css({right: 100 * topbar.data('index') + '%'});
162+
}
163+
164+
topbar.css('height', self.outerHeight($this.siblings('ul'), true) + self.height(titlebar));
165+
}
166+
});
167+
168+
$(window).on('resize.fndtn.topbar', function () {
169+
if (!self.breakpoint()) {
170+
$('.top-bar, [data-topbar]')
171+
.css('height', '')
172+
.removeClass('expanded')
173+
.find('li')
174+
.removeClass('hover');
175+
}
176+
}.bind(this));
177+
178+
$('body').on('click.fndtn.topbar', function (e) {
179+
var parent = $(e.target).closest('[data-topbar], .top-bar');
180+
181+
if (parent.length > 0) {
182+
return;
183+
}
184+
185+
$('.top-bar li, [data-topbar] li').removeClass('hover');
186+
});
187+
188+
// Go up a level on Click
189+
$(this.scope).on('click.fndtn', '.top-bar .has-dropdown .back, [data-topbar] .has-dropdown .back', function (e) {
190+
e.preventDefault();
191+
192+
var $this = $(this),
193+
topbar = $this.closest('.top-bar, [data-topbar]'),
194+
titlebar = topbar.children('ul').first(),
195+
section = topbar.find('section, .section'),
196+
$movedLi = $this.closest('li.moved'),
197+
$previousLevelUl = $movedLi.parent();
198+
199+
topbar.data('index', topbar.data('index') - 1);
200+
201+
if (!self.rtl) {
202+
section.css({left: -(100 * topbar.data('index')) + '%'});
203+
section.find('>.name').css({left: 100 * topbar.data('index') + '%'});
204+
} else {
205+
section.css({right: -(100 * topbar.data('index')) + '%'});
206+
section.find('>.name').css({right: 100 * topbar.data('index') + '%'});
207+
}
208+
209+
if (topbar.data('index') === 0) {
210+
topbar.css('height', '');
211+
} else {
212+
topbar.css('height', self.outerHeight($previousLevelUl, true) + self.height(titlebar));
213+
}
214+
215+
setTimeout(function () {
216+
$movedLi.removeClass('moved');
217+
}, 300);
218+
});
219+
},
220+
221+
breakpoint : function () {
222+
return $(document).width() <= this.settings.breakPoint || $('html').hasClass('lt-ie9');
223+
},
224+
225+
assemble : function () {
226+
var self = this;
227+
// Pull element out of the DOM for manipulation
228+
this.settings.$section.detach();
229+
230+
this.settings.$section.find('.has-dropdown>a').each(function () {
231+
var $link = $(this),
232+
$dropdown = $link.siblings('.dropdown'),
233+
url = $link.attr('href');
234+
235+
if (self.settings.mobile_show_parent_link && url && url.length > 1) {
236+
var $titleLi = $('<li class="title back js-generated"><h5><a href="#"></a></h5></li><li><a class="parent-link js-generated" href="' + url + '">' + $link.text() +'</a></li>');
237+
} else {
238+
var $titleLi = $('<li class="title back js-generated"><h5><a href="#"></a></h5></li>');
239+
}
240+
241+
// Copy link to subnav
242+
if (self.settings.custom_back_text == true) {
243+
$titleLi.find('h5>a').html('&laquo; ' + self.settings.back_text);
244+
} else {
245+
$titleLi.find('h5>a').html('&laquo; ' + $link.html());
246+
}
247+
$dropdown.prepend($titleLi);
248+
});
249+
250+
// Put element back in the DOM
251+
this.settings.$section.appendTo(this.settings.$topbar);
252+
253+
// check for sticky
254+
this.sticky();
255+
},
256+
257+
height : function (ul) {
258+
var total = 0,
259+
self = this;
260+
261+
ul.find('> li').each(function () { total += self.outerHeight($(this), true); });
262+
263+
return total;
264+
},
265+
266+
sticky : function () {
267+
var klass = '.' + this.settings.stickyClass;
268+
if ($(klass).length > 0) {
269+
var distance = $(klass).length ? $(klass).offset().top: 0,
270+
$window = $(window),
271+
offst = this.outerHeight($('.top-bar')),
272+
t_top;
273+
274+
//Whe resize elements of the page on windows resize. Must recalculate distance
275+
$(window).resize(function() {
276+
clearTimeout(t_top);
277+
t_top = setTimeout (function() {
278+
distance = $(klass).offset().top;
279+
},105);
280+
});
281+
$window.scroll(function() {
282+
if ($window.scrollTop() > (distance)) {
283+
$(klass).addClass("fixed");
284+
$('body').css('padding-top',offst);
285+
} else if ($window.scrollTop() <= distance) {
286+
$(klass).removeClass("fixed");
287+
$('body').css('padding-top','0');
288+
}
289+
});
290+
}
291+
},
292+
293+
off : function () {
294+
$(this.scope).off('.fndtn.topbar');
295+
$(window).off('.fndtn.topbar');
296+
},
297+
298+
reflow : function () {}
299+
};
300+
}(Foundation.zj, this, this.document));

0 commit comments

Comments
 (0)