TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-01 23:37:43 +03:00
Code Issues Projects Releases Wiki Activity

Re-jigged nav JS and add parallax

Browse Source 
- Clicking the content closes the nav
- Content overlays the nav to create a parallax effect
- Clicking the burger works now
This commit is contained in:
Paul Adam Davis 2014-07-30 18:26:28 +01:00
parent 6aa6be071c
commit 535c4633d8
3 changed files with 47 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
ghost/admin/assets/sass/components/navigation.scss
View File

@ -152,8 +152,9 @@
background: darken($darkgrey, 7%);
overflow: auto;
-webkit-overflow-scrolling: touch;
@include transform(translate3d(-260px, 0px, 0px));
@include transition(transform 0.15s ease-in-out);
@include transform(translate3d(-60px, 0px, 0px)); // Not off the screen, to give a parallax effect
@include transition(transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1));
.thing, .thing2 {
display: block;

3
ghost/admin/assets/sass/layouts/default.scss
View File

@ -18,7 +18,7 @@
z-index: 500; // Above the .global-nav when collapsed
@media (max-width: 1025px) {
@include transition(transform 0.15s ease-in-out);
@include transition(transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1));
}
&.global-nav-expanded {
@ -90,6 +90,7 @@
@include position(absolute, 60px 0px 0px 0px);
background: #fff;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
@media (max-width: 1025px) {
top: 44px;

58
ghost/admin/docs/js/nav.js
View File

@ -1,23 +1,49 @@
(function(){
if (matchMedia) {
var mq_max_1025 = window.matchMedia("(max-width: 1025px)");
mq_max_1025.addListener(show_hide_nav);
show_hide_nav(mq_max_1025);
}
// TODO: unbind click events when nav is desktop sized
// Element vars
var menu_button = document.querySelector(".menu-button"),
viewport = document.querySelector(".viewport"),
global_nav = document.querySelector(".global-nav"),
page_content = document.querySelector(".viewport .page-content");
// mediaQuery listener
var mq_max_1025 = window.matchMedia("(max-width: 1025px)");
mq_max_1025.addListener(show_hide_nav);
show_hide_nav(mq_max_1025);
menu_button.addEventListener("click", function(e) {
e.preventDefault();
if (menu_button.getAttribute('data-nav-open')) {
close_nav();
} else {
open_nav();
}
});
page_content.addEventListener("click", function(e) {
e.preventDefault();
console.log("click viewport");
if (viewport.classList.contains("global-nav-expanded")) {
console.log("close nav from viewport");
close_nav();
}
});
var open_nav = function(){
menu_button.setAttribute("data-nav-open", "true");
viewport.classList.add("global-nav-expanded");
global_nav.classList.add("global-nav-expanded");
};
var close_nav = function(){
menu_button.removeAttribute('data-nav-open');
viewport.classList.remove("global-nav-expanded");
global_nav.classList.remove("global-nav-expanded");
};
function show_hide_nav(mq) {
var viewport = document.querySelector(".viewport"),
global_nav = document.querySelector(".global-nav"),
menu_button = document.querySelector(".menu-button");
menu_button.addEventListener("click", function(e) {
e.preventDefault();
viewport.classList.toggle("global-nav-expanded");
global_nav.classList.toggle("global-nav-expanded");
});
if (mq.matches) {
// Window is 1025px or less
} else {