From 285305af675ef9a0fbc964e81d2c38e4da19e51d Mon Sep 17 00:00:00 2001 From: Dan Head Date: Mon, 12 Feb 2018 19:48:25 +0000 Subject: [PATCH] Add Menu and Navigation --- .gitignore | 1 + css/grid.css | 1 + css/icon.css | 5 ++ css/index.css | 8 ++- css/menu.css | 75 +++++++++++++++++++++ css/nav.css | 144 ++++++++++++++++++++++++++++++++++++++++ css/search.css | 28 ++++++++ js/index.js | 12 ++++ js/menu.js | 47 +++++++++++++ js/nav.js | 31 +++++++++ theme/footer.php | 2 + theme/functions.php | 19 ++++++ theme/index.php | 64 +++++++++--------- theme/partials/menu.php | 6 ++ theme/partials/nav.php | 44 +++++++++--- theme/searchform.php | 9 +++ 16 files changed, 453 insertions(+), 43 deletions(-) create mode 100644 css/menu.css create mode 100644 css/nav.css create mode 100644 css/search.css create mode 100644 js/index.js create mode 100644 js/menu.js create mode 100644 js/nav.js create mode 100644 theme/footer.php create mode 100644 theme/partials/menu.php create mode 100644 theme/searchform.php diff --git a/.gitignore b/.gitignore index 744513e..df202e6 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ node_modules/ theme/style.css +theme/bundle.js diff --git a/css/grid.css b/css/grid.css index b6d9c6d..f895852 100644 --- a/css/grid.css +++ b/css/grid.css @@ -5,6 +5,7 @@ grid-auto-flow: dense; grid-gap: var(--spaceSm); grid-template-columns: 1fr; + max-width: 1200px; margin: 0 var(--spaceSm); } diff --git a/css/icon.css b/css/icon.css index 2088547..2a9948e 100644 --- a/css/icon.css +++ b/css/icon.css @@ -11,6 +11,11 @@ width: 24px; } +.Icon--large { + height: 48px; + width: 48px; +} + .Icon--facebook { color: var(--colorFacebook); } diff --git a/css/index.css b/css/index.css index f25fddc..e9465a1 100644 --- a/css/index.css +++ b/css/index.css @@ -16,20 +16,24 @@ License URI: http://www.gnu.org/licenses/gpl-2.0.html @import "article"; @import "metadata"; @import "footer"; +@import "menu"; +@import "nav"; +@import "search"; @import "icon"; :root { - --colorPrimaryBlue: #201f42; --colorNearBlack: #333; + --colorDarkBlue: #201f42; + --colorLightBlue: #1b8eff; --colorGrey: #828282; --colorLightGrey: #e0e0e0; --colorFacebook: #3e5a98; --colorTwitter: #1da1f2; - --colorLightBlue: #1b8eff; --spaceSm: 10px; --spaceMd: 30px; --spaceLg: 60px; --transitionMd: 300ms; + --transitionSl: 600ms; --headingFontFamily: 'Raleway', sans-serif; --bodyFontFamily: 'Open Sans', sans-serif; } diff --git a/css/menu.css b/css/menu.css new file mode 100644 index 0000000..ea70196 --- /dev/null +++ b/css/menu.css @@ -0,0 +1,75 @@ +/** @define Menu */ + +.Menu { + background-color: var(--colorDarkBlue); + border-radius: 999px; + box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25); + cursor: pointer; + display: block; + height: 64px; + left: 5px; + position: fixed; + top: 5px; + transform: translateX(-100px); + transition: + filter var(--transitionMd) ease-out, + opacity var(--transitionMd) ease-out, + transform var(--transitionMd) ease-out; + width: 64px; + will-change: opacity, transition; + z-index: 5; +} + +.Menu-line { + background-color: #fff; + border-radius: 2px; + height: 4px; + left: 15px; + position: absolute; + right: 15px; + transform: translateY(-50%); +} + +.Menu-line:nth-of-type(1) { + top: 33%; +} + +.Menu-line:nth-of-type(2) { + top: 50%; +} + +.Menu-line:nth-of-type(3) { + top: 66%; +} + +.Menu-text { + left: -10000px; + position: absolute; + top: -10000px; +} + +.Menu--visible { + transform: translateX(0); +} + +.Menu--minimized { + opacity: 0.5; + transform: translateX(-20px) translateY(-20px); +} + +/** + * Focus state + */ + +.Menu:focus { + outline: none; +} + +/** + * Hover state + */ + +.Menu:hover { + opacity: 1; + filter: brightness(125%); +} diff --git a/css/nav.css b/css/nav.css new file mode 100644 index 0000000..a5e6fa0 --- /dev/null +++ b/css/nav.css @@ -0,0 +1,144 @@ +/** @define Nav */ + +:root { + --Nav-transitionDuration: var(--transitionMd); +} + +.Nav::after { + background-color: rgba(0, 0, 0, 0.5); + bottom: 0; + content: ''; + left: 0; + opacity: 0; + position: fixed; + right: 0; + transition: + opacity var(--Nav-transitionDuration) ease-out, + visibility var(--Nav-transitionDuration) ease-out; + top: 0; + visibility: hidden; + z-index: 5; +} + +.Nav-content { + background-color: var(--colorDarkBlue); + bottom: 0; + box-shadow: 6px 0 4px rgba(0, 0, 0, 0.25); + color: #fff; + display: flex; + flex-direction: column; + left: 0; + padding: var(--spaceSm); + position: fixed; + top: 0; + transform: translateX(-100%); + transition: transform var(--Nav-transitionDuration) ease-out; + z-index: 10; +} + +.Nav-title { + font-family: var(--headingFontFamily); + font-size: 2.5rem; + margin-right: 62px; +} + +.Nav-close { + background-color: transparent; + border: none; + cursor: pointer; + display: block; + height: 32px; + padding: 0; + position: absolute; + right: 15px; + top: 15px; + width: 32px; +} + +.Nav-closeBar { + background-color: #fff; + border-radius: 2px; + height: 4px; + left: 4px; + position: absolute; + transition: transform var(--Nav-transitionDuration) ease-out var(--Nav-transitionDuration); + top: 14px; + width: 24px; +} + +.Nav-closeText { + left: -10000px; + position: absolute; + top: -10000px; +} + +/** + * Nav List + */ + +.Nav-list { + flex-grow: 1; + font-family: var(--headingFontFamily); + font-size: 1.5rem; + margin: var(--spaceMd) 0 0 var(--spaceMd); +} + +.Nav--subList { + margin-top: 0; +} + +.Nav--open::after { + visibility: visible; + opacity: 1; +} + +.Nav-link, +.Nav-link:active, +.Nav-link:focus, +.Nav-link:hover, +.Nav-link:visited { + color: #fff; + display: inline-block; + margin-bottom: var(--spaceSm); + transition: text-shadow var(--Nav-transitionDuration) ease-out; +} + +.Nav-link:focus, +.Nav-link:hover { + text-shadow: 0 0 2px #fff; +} + +/** + * Nav Social + */ + +.Nav-social { + margin-bottom: var(--spaceSm); +} + +.Nav-socialLink, +.Nav-socialLink:active, +.Nav-socialLink:focus, +.Nav-socialLink:hover, +.Nav-socialLink:visited { + color: #fff; + transition: filter var(--Nav-transitionDuration) ease-out; +} + +.Nav-socialLink:focus, +.Nav-socialLink:hover { + filter: drop-shadow(0 0 2px #fff); +} + +.Nav--open .Nav-content { + transform: translateX(0); +} + +.Nav--open .Nav-closeBar:nth-of-type(1) { + transform: rotate(45deg); +} + +.Nav--open .Nav-closeBar:nth-of-type(2) { + transform: rotate(-45deg); +} + diff --git a/css/search.css b/css/search.css new file mode 100644 index 0000000..2a4635d --- /dev/null +++ b/css/search.css @@ -0,0 +1,28 @@ +/** @define Search */ + +.Search { + display: flex; +} + +.Search-label { + left: -10000px; + position: absolute; + top: -10000px; +} + +.Search-input { + border: none; + border-radius: 0; + color: var(--colorNearBlack); + font-family: var(--headingFontFamily); + max-width: 200px; + padding: 10px; +} + +.Search-submit { + background-color: var(--colorLightBlue); + border: none; + color: #fff; + font-family: var(--headingFontFamily); + min-width: 100px; +} diff --git a/js/index.js b/js/index.js new file mode 100644 index 0000000..c83f981 --- /dev/null +++ b/js/index.js @@ -0,0 +1,12 @@ +import Menu from './menu'; +import Nav from './nav'; + +document.addEventListener('DOMContentLoaded', () => { + const menu = new Menu({ + el: document.querySelector('.Menu'), + }); + new Nav({ + el: document.querySelector('.Nav'), + menu, + }); +}); diff --git a/js/menu.js b/js/menu.js new file mode 100644 index 0000000..0899cb5 --- /dev/null +++ b/js/menu.js @@ -0,0 +1,47 @@ +const CLS = { + visible: 'Menu--visible', + minimized: 'Menu--minimized', +}; + +export default class Menu { + constructor(cfg) { + this.el = cfg.el; + this.state = 'visible'; + + this.attachEvents(); + setTimeout(() => { + this.showMenu(); + }, 1000); + } + + attachEvents() { + let lastKnownPosition = 0; + window.addEventListener('scroll', () => { + if (this.state !== 'hidden') { + if (this.state !== 'visible' && window.scrollY < lastKnownPosition) { + this.showMenu(); + } else if (this.state !== 'minimized' && window.scrollY > + lastKnownPosition) { + this.minimizeMenu(); + } + lastKnownPosition = window.scrollY; + } + }); + } + + showMenu() { + this.state = 'visible'; + this.el.classList.add(CLS.visible); + this.el.classList.remove(CLS.minimized); + } + + minimizeMenu() { + this.state = 'minimized'; + this.el.classList.add(CLS.minimized); + } + + hideMenu() { + this.state = 'hidden'; + this.el.classList.remove(CLS.visible); + } +} diff --git a/js/nav.js b/js/nav.js new file mode 100644 index 0000000..ec30ede --- /dev/null +++ b/js/nav.js @@ -0,0 +1,31 @@ +const CLS = { + open: 'Nav--open', +}; + +export default class Nav { + constructor(cfg) { + this.el = cfg.el; + this.menu = cfg.menu; + + this.attachEvents(); + } + + attachEvents() { + this.menu.el.addEventListener('click', () => { + this.menu.hideMenu(); + this.openNav(); + }); + this.el.querySelector('.Nav-close').addEventListener('click', () => { + this.menu.showMenu(); + this.closeNav(); + }); + } + + openNav() { + this.el.classList.add(CLS.open); + } + + closeNav() { + this.el.classList.remove(CLS.open); + } +} diff --git a/theme/footer.php b/theme/footer.php new file mode 100644 index 0000000..a1cdc53 --- /dev/null +++ b/theme/footer.php @@ -0,0 +1,2 @@ + diff --git a/theme/functions.php b/theme/functions.php index 4c2680b..59a81f0 100644 --- a/theme/functions.php +++ b/theme/functions.php @@ -1,5 +1,24 @@ post_title; + $uri = get_site_url() . '/' . $item->post_name; + + $output .= '
  • '; + $output .= ''; + $output .= $title . '
    • '; + } +} + +function windycoys_nav() { + wp_nav_menu(array( + 'container' => 'ul', + 'menu_class' => 'Nav-list Nav--subList', + 'walker' => new Windycoys_Walker() + )); +} + function windycoys_the_tags() { $tags = get_the_tags(); if ($tags) { diff --git a/theme/index.php b/theme/index.php index 17c0079..c74c968 100644 --- a/theme/index.php +++ b/theme/index.php @@ -1,31 +1,35 @@ -
    - - -
    -
    -
    - - - - - - -
    -

    - - - -

    -
    - »', 'windycoys' ) ); ?> -
    -
    -
    -
    - -
    - -
    - -
    +
    + + +
    +
    +
    + + + + + + +
    +

    + + + +

    +
    + »', 'windycoys' ) ); ?> +
    +
    +
    +
    + +
    + +
    + +
    +
    + + + diff --git a/theme/partials/menu.php b/theme/partials/menu.php new file mode 100644 index 0000000..a9f9dcf --- /dev/null +++ b/theme/partials/menu.php @@ -0,0 +1,6 @@ + diff --git a/theme/partials/nav.php b/theme/partials/nav.php index e43ac35..19fc3b3 100644 --- a/theme/partials/nav.php +++ b/theme/partials/nav.php @@ -1,14 +1,36 @@ -
    - -
    + +
    + + + + + + + + + + +
    +
    + +
    + + + diff --git a/theme/searchform.php b/theme/searchform.php new file mode 100644 index 0000000..322fa67 --- /dev/null +++ b/theme/searchform.php @@ -0,0 +1,9 @@ +