Skip to content

Commit 82e306e

Browse files
mmistakesmmistakes
committed
Improve responsive nav experience
1 parent 73d9750 commit 82e306e

File tree

7 files changed

+186
-8
lines changed

7 files changed

+186
-8
lines changed

‎_includes/_head.html

+3
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,9 @@
4646
<script src="{{ site.url }}/assets/js/vendor/respond.min.js"></script>
4747
<![endif]-->
4848

49+
<!-- Modernizr -->
50+
<script src="{{ site.url }}/assets/js/vendor/modernizr-2.7.1.custom.min.js"></script>
51+
4952
<!-- Icons -->
5053
<!-- 16x16 -->
5154
<link rel="shortcut icon" href="{{ site.url }}/favicon.ico">

‎_includes/_navigation.html

+1-2
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,11 @@
33
<a href="{{ site.url }}">{{ site.title }}</a>
44
</div><!-- /.site-name -->
55
<div class="top-navigation">
6-
<nav role="navigation">
6+
<nav role="navigation" id="site-nav" class="nav">
77
<ul>
88
{% for link in site.links %}
99
<li><a href="{% if link.external %}{{ link.url }}{% else %}{{ site.url }}{{ link.url }}{% endif %}" {% if link.external %}target="_blank"{% endif %}>{{ link.title }}</a></li>
1010
{% endfor %}
11-
<li><i class="icon-feed"></i> <a href="{{ site.url }}/feed.xml" title="Atom/RSS feed">Feed</a>
1211
</ul>
1312
</nav>
1413
</div><!-- /.top-navigation -->

‎assets/css/main.min.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/js/_main.js

+31
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,34 @@
1+
/*! Responsive Menu */
2+
// http://tympanus.net/codrops/2013/05/08/responsive-retina-ready-menu/
3+
// The function to change the class
4+
var changeClass = function (r,className1,className2) {
5+
var regex = new RegExp("(?:^|\\s+)" + className1 + "(?:\\s+|$)");
6+
if( regex.test(r.className) ) {
7+
r.className = r.className.replace(regex,' '+className2+' ');
8+
}
9+
else{
10+
r.className = r.className.replace(new RegExp("(?:^|\\s+)" + className2 + "(?:\\s+|$)"),' '+className1+' ');
11+
}
12+
return r.className;
13+
};
14+
// Creating our button in JS for smaller screens
15+
var menuElements = document.getElementById('site-nav');
16+
menuElements.insertAdjacentHTML('afterBegin','<button type="button" role="button" id="menutoggle" class="navtoogle lines-button x" aria-hidden="true"><span class="lines"></span>menu</button>');
17+
18+
// Toggle the class on click to show / hide the menu
19+
document.getElementById('menutoggle').onclick = function() {
20+
changeClass(this, 'navtoogle active', 'navtoogle');
21+
};
22+
// http://tympanus.net/codrops/2013/05/08/responsive-retina-ready-menu/comment-page-2/#comment-438918
23+
document.onclick = function(e) {
24+
var mobileButton = document.getElementById('menutoggle'),
25+
buttonStyle = mobileButton.currentStyle ? mobileButton.currentStyle.display : getComputedStyle(mobileButton, null).display;
26+
27+
if(buttonStyle === 'block' && e.target !== mobileButton && new RegExp(' ' + 'active' + ' ').test(' ' + mobileButton.className + ' ')) {
28+
changeClass(mobileButton, 'navtoogle active', 'navtoogle');
29+
}
30+
};
31+
132
/*! Plugin options and other jQuery stuff */
233

334
// FitVids options

‎assets/js/scripts.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/js/vendor/modernizr-2.7.1.custom.min.js

+4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/less/page.less

+145-4
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,12 @@ body {
1818
margin-bottom: 1em;
1919
float: none;
2020
display: block;
21+
.font-rem(24);
2122
@media @600px {
2223
.grid(12,2);
2324
.prefix(12,0.5);
2425
.suffix(12,0.5);
26+
.font-rem(16);
2527
}
2628
@media @1382px {
2729
.grid(12,1.5);
@@ -44,22 +46,161 @@ body {
4446
.grid(12,8);
4547
}
4648
ul {
47-
list-style: none;
4849
margin: 0;
4950
padding: 0;
51+
clear: both;
52+
list-style-type: none;
5053
}
5154
li {
55+
display: block;
5256
list-style-type: none;
53-
display: inline;
54-
margin-right: 25px;
55-
white-space: nowrap;
57+
border-bottom: 1px solid lighten(@black,80);
58+
border-bottom: 1px solid fade(@black,10);
59+
.font-rem(16);
60+
&:last-child {
61+
border-bottom: 0 solid transparent;
62+
}
63+
@media @600px {
64+
display: inline;
65+
margin-right: 25px;
66+
white-space: nowrap;
67+
border-bottom: 0 solid transparent;
68+
}
5669
a {
70+
display: block;
71+
padding: 10px 0;
5772
decoration: none;
5873
border-bottom: 0 solid transparent;
5974
.transition(all .2s);
75+
@media @600px {
76+
display: inline;
77+
padding: 0;
78+
}
6079
}
6180
}
6281
}
82+
// Navicon lines
83+
@button-size: 1.5rem;
84+
.line() {
85+
display: inline-block;
86+
width: @button-size;
87+
height: @button-size/7;
88+
// line color
89+
background: @white;
90+
border-radius: @button-size/14;
91+
transition: .3s;
92+
}
93+
.lines-button {
94+
padding: @button-size/4 @button-size/2;
95+
transition: .3s;
96+
cursor: pointer;
97+
user-select: none;
98+
border-radius: @button-size/7;
99+
}
100+
.lines-button:hover {
101+
opacity: 1;
102+
}
103+
.lines-button:active {
104+
transition: 0;
105+
}
106+
.lines {
107+
margin-right: 10px;
108+
margin-bottom: @button-size/5;
109+
// create middle line
110+
.line();
111+
position: relative;
112+
// create the upper and lower lines as pseudo-elements of the middle line
113+
&:before,
114+
&:after {
115+
.line();
116+
position: absolute;
117+
left: 0;
118+
content: '';
119+
-webkit-transform-origin: @button-size/14 center;
120+
transform-origin: @button-size/14 center;
121+
}
122+
&:before { top: @button-size/4; }
123+
&:after { top: -@button-size/4; }
124+
}
125+
.lines-button:hover {
126+
opacity: 1;
127+
.lines {
128+
&:before { top: @button-size/3.5; }
129+
&:after { top: -@button-size/3.5; }
130+
}
131+
}
132+
.lines-button.x.active .lines {
133+
// hide the middle line
134+
background: transparent;
135+
// overlap the lines by setting both their top values to 0
136+
&:before,
137+
&:after {
138+
-webkit-transform-origin: 50% 50%;
139+
transform-origin: 50% 50%;
140+
top: 0;
141+
width: @button-size;
142+
}
143+
// rotate the lines to form the x shape
144+
&:before {
145+
-webkit-transform: rotate3d(0,0,1,45deg);
146+
transform: rotate3d(0,0,1,45deg);
147+
}
148+
&:after {
149+
-webkit-transform: rotate3d(0,0,1,-45deg);
150+
transform: rotate3d(0,0,1,-45deg);
151+
}
152+
}
153+
// Style the toggle menu link and hide it
154+
.nav .navtoogle {
155+
.font-rem(18);
156+
font-weight: normal;
157+
background-color: @black;
158+
color: @white;
159+
border: none;
160+
cursor: pointer;
161+
@media @600px {
162+
display: none;
163+
}
164+
}
165+
.nav button {
166+
border: none;
167+
background: none;
168+
}
169+
.navtoogle i {
170+
z-index:-1;
171+
}
172+
.icon-menu {
173+
position: relative;
174+
top: 3px;
175+
line-height: 0;
176+
}
177+
// When JavaScript is disabled, we hide the toggle button
178+
.no-js .nav .navtoggle {
179+
display: none;
180+
}
181+
// When JavaScript is disabled, we show the menu
182+
.no-js .nav ul {
183+
max-height: 30em;
184+
overflow: hidden;
185+
}
186+
// When JavaScript is enabled, we hide the menu
187+
.js .nav ul {
188+
max-height: 0;
189+
overflow: hidden;
190+
@media @600px {
191+
max-height: 30em;
192+
}
193+
}
194+
// Displaying the menu when the user has clicked on the button
195+
.js .nav .active + ul {
196+
max-height: 30em;
197+
overflow: hidden;
198+
-webkit-transition: max-height .4s;
199+
-moz-transition: max-height .4s;
200+
-o-transition: max-height .4s;
201+
-ms-transition: max-height .4s;
202+
transition: max-height .4s;
203+
}
63204
#main {
64205
counter-reset: captions;
65206
.container();

0 commit comments

Comments
 (0)