From 22c1e26c6dfd5d6a8b93de02e139e83e89ef1afd Mon Sep 17 00:00:00 2001 From: Anthony Talarico Date: Fri, 30 Aug 2019 16:07:29 -0400 Subject: [PATCH] adding discoverkalamzoo like off canvas menu --- css/app.css | 2 +- header.php | 33 +-- js/app.js | 75 +++++++ js/custom/pageSetup.js | 75 +++++++ lib/navigation.php | 32 ++- parts/off-canvas-menu.php | 89 +++++---- scss/_map.scss | 1 - scss/_off-canvas.scss | 408 ++++++++++++++++++++++++++++++++++++++ scss/app.scss | 5 +- 9 files changed, 665 insertions(+), 55 deletions(-) create mode 100644 scss/_off-canvas.scss diff --git a/css/app.css b/css/app.css index a9bd078..6e6262e 100644 --- a/css/app.css +++ b/css/app.css @@ -6,4 +6,4 @@ "c d";}}@media only screen and (min-width:0em) and (max-width:64em){.glm-photo-grid .checkin.glm-blocks-container{grid-template-areas:"a a a a" "b b b b" "c c c c" - "d d d d";}}.glm-photo-grid .checkin.glm-blocks-container .landing-page-block-image{padding:25%}@media only screen and (max-width: 40em){.glm-photo-grid .checkin.glm-blocks-container .landing-page-block-image{padding:40%;}}@media only screen and (min-width:40.063em) and (max-width:64em){.glm-photo-grid .checkin.glm-blocks-container .landing-page-block-image{padding:35%;}}.glm-photo-grid .glm-blocks-container{display:-ms-grid;display:grid;max-width:1500px;margin:0 auto;-ms-grid-rows:auto auto auto}.glm-photo-grid .glm-blocks-container .block-hover:hover .plus-icon{transform:rotate(0deg)}.glm-photo-grid .glm-blocks-container .block-hover:hover .plus-icon::before{content:'';display:block;width:0px;height:0px;border-bottom:solid 2px white;position:absolute;bottom:11px;transform:rotate(90deg)}.glm-photo-grid .glm-blocks-container .landing-page-block-image{height:100%;width:100%;background-size:cover !important;position:relative;-webkit-transition:-webkit-transform 300ms ease-in-out;transition:-webkit-transform 300ms ease-in-out;transition:transform 300ms ease-in-out;transition:transform 300ms ease-in-out,-webkit-transform 300ms ease-in-out}.glm-photo-grid .glm-blocks-container .landing-page-block-image::after{content:'';width:100%;height:100%;background:rgba(0,0,0,0.25);position:absolute;left:0;top:0}.glm-photo-grid .glm-blocks-container .landing-page-block-image:hover{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}.glm-photo-grid .glm-blocks-container .block-0{-ms-grid-row:1;-ms-grid-row-span:2;-ms-grid-column:1;-ms-grid-column-span:2;grid-area:a}.glm-photo-grid .glm-blocks-container .block-1{-ms-grid-row:1;-ms-grid-column:3;grid-area:b}.glm-photo-grid .glm-blocks-container .block-2{-ms-grid-row:1;-ms-grid-column:4;grid-area:c}.glm-photo-grid .glm-blocks-container .block-3{-ms-grid-row:2;-ms-grid-column:3;-ms-grid-column-span:2;grid-area:d}.glm-photo-grid .glm-blocks-container .glm-block{margin:10px;overflow:hidden;position:relative}.glm-photo-grid .glm-blocks-container .glm-block:hover .glm-block-content-overlay{opacity:1}.glm-photo-grid .glm-blocks-container .glm-block .glm-block-title{margin:0;color:white;position:absolute;background:rgba(0,0,0,0.65);bottom:0;line-height:1;width:100%;text-align:right;font-size:24px;font-family:"PT Sans", sans-serif;z-index:8;text-transform:uppercase;padding:20px;text-shadow:1px 1px 4px black}.glm-photo-grid .glm-blocks-container .glm-block .glm-block-plus{position:absolute;top:0px;right:0px;color:white;z-index:99;font-size:35px;background:rgba(0,0,0,0.6);padding:10px 13px}.glm-photo-grid .glm-blocks-container .glm-block .glm-block-plus .glm-block-plus-border{border:2px solid white;padding:4px}.glm-photo-grid .glm-blocks-container .glm-block .glm-block-content-overlay{position:absolute;top:0;left:0;z-index:9;background:rgba(0,0,0,0.6);color:white;width:100%;height:100%}.glm-photo-grid .glm-blocks-container .glm-block .glm-block-content-overlay .glm-block-content-wrapper{height:100%;display:flex;justify-content:center;flex-direction:column}.glm-photo-grid .glm-blocks-container .glm-block .glm-block-content-overlay .glm-block-content-wrapper .glm-block-learn-more{border:2px solid #F79548;display:inline-block;max-width:145px;padding:10px 15px;background:transparent;transition:all 400ms ease-in-out;text-transform:uppercase;margin-left:25px}.glm-photo-grid .glm-blocks-container .glm-block .glm-block-content-overlay .glm-block-content-wrapper .glm-block-learn-more a{transition:color 400ms ease-in-out}.glm-photo-grid .glm-blocks-container .glm-block .glm-block-content-overlay .glm-block-content-wrapper .glm-block-learn-more:hover{background:#F79548;cursor:pointer}.glm-photo-grid .glm-blocks-container .glm-block .glm-block-content-overlay .glm-block-content-wrapper .glm-block-learn-more:hover a{color:white !important}.glm-photo-grid .glm-blocks-container .glm-block .glm-block-content-overlay .glm-block-content-wrapper .glm-block-learn-more .arrow{display:inline-block;position:relative;top:0px;width:12px;height:12px;background:transparent;text-indent:-9999px;border-top:2px solid white;border-left:2px solid white;transition:all 250ms ease-in-out;text-decoration:none;color:transparent;transform:rotate(135deg);right:0}.glm-photo-grid .glm-blocks-container .glm-block .glm-block-content-overlay .glm-block-content-wrapper .glm-block-content{padding:25px;display:flex;justify-content:center;align-items:center;font-size:20px}@media screen and (-ms-high-contrast: none){.glm-photo-grid .glm-blocks-container .landing-page-block-image{padding:9.5vw !important}}.glm-photo-grid .ui-widget-header{background:transparent;border:none}.glm-photo-grid .ui-widget.ui-widget-content{border:none}.glm-photo-grid .content{padding:0}.glm-photo-grid .ui-tabs .ui-tabs-panel{padding:0}.glm-photo-grid .grid-button-container{display:flex;justify-content:space-between}@media only screen and (max-width: 40em){.glm-photo-grid .grid-button-container{flex-direction:column;}}.glm-photo-grid .grid-button-container div:not(:last-child){margin-right:3px}.glm-photo-grid .grid-button-container li{margin-bottom:0;flex:1;background:#131c5f}.glm-photo-grid .grid-button-container li a{display:block;height:100%;width:100%}.glm-photo-grid .grid-button-container li a:hover{cursor:pointer;background:#4b725b}.glm-photo-grid .grid-button-container li span{font-size:20px;position:relative;bottom:7px;color:white}.glm-photo-grid .grid-button-container li i.fas{display:inline-block;font-size:40px;color:white}.plus-icon{box-sizing:border-box;transition:transform 0.3s;width:24px;height:24px;transform:rotate(180deg);position:relative}.plus-icon:hover{transform:rotate(0deg)}.plus-icon::before{content:'';display:block;width:24px;height:0px;border-bottom:solid 2px white;position:absolute;bottom:11px;transform:rotate(90deg);transition:width 0.3s}.plus-icon:hover::before{content:'';display:block;width:0px;height:0px;border-bottom:solid 2px white;position:absolute;bottom:11px;transform:rotate(90deg)}.plus-icon::after{content:'';display:block;width:24px;height:0px;border-bottom:solid 2px white;position:absolute;bottom:11px}#sidebar{padding-top:25px;background:#f2f9fc}#sidebar .row.collapse{margin-left:14px}#sidebar li{list-style:none}#sidebar li #calendar_wrap table#wp-calendar{margin:0 auto}#sidebar a{font-size:12px}#sidebar form{margin:0 12px 0 14px}#sidebar form select{padding:0 0.5rem;border-radius:5px;height:25px;margin:0}#sidebar form select option{font-size:10px}#sidebar .small-block-grid-2{margin-top:10px}#sidebar .small-block-grid-2 li{padding:0 0.625rem 0.625rem}#sidebar .small-block-grid-2 li img{border:2px solid lightblue}#sidebar .small-block-grid-2>li:nth-of-type(2),#sidebar .small-block-grid-2>li:nth-of-type(4){padding-left:0}#sidebar .small-block-grid-2>li:nth-of-type(3),#sidebar .small-block-grid-2>li:nth-of-type(4){padding-bottom:20px}#sidebar h3{margin:20px 0 0}#sidebar h1{margin:0;font-size:1.5625rem;text-transform:none}#sidebar input{padding:5px 0 5px 8px;height:auto;margin:10px 0}#sidebar button{border-radius:2px;padding:0 10px}#side-nav{width:90%;padding-top:10px;background:#0264A1}#side-nav h1{font-size:1.375rem}#side-nav h2{margin-left:10px}#side-nav h2 a{color:#FFFFFF}#side-nav h4{font-weight:bold;margin-left:10px}#side-nav li{list-style:none}#side-nav ul{list-style:none;margin:0 0 20px}#side-nav ul li{margin:0 -15px;padding:5px 10px 5px 25px}#side-nav ul li:hover{color:#73BF45}#side-nav ul li a{color:#FFFFFF}#side-nav ul li a:hover{color:#73BF45}#side-nav h3{text-transform:none;margin:0}#side-nav input{padding:5px 0 5px 8px;height:auto;margin-bottom:10px}#side-nav button{border-radius:2px;padding:0 10px}#extra{margin-top:15px}#extra p{line-height:1.3}#extra p.title{margin:0}#extra p.title#last{padding-top:10px}#extra p#message{text-transform:uppercase;color:lightblue;font-size:0.9375rem;margin:40px 0}.county-news{font-weight:bold}.current_page_item a{font-weight:bold}#side-nav ul.sidebar .current{color:#73BF45}#side-bar-nav{margin-top:85px}.searchform{display:none;position:absolute;top:100px;width:90vw;z-index:999;height:50px}.searchform input.button{background:#f79548;color:#FFFFFF}.searchform .search-button{padding:0px 5px 0px 5px;position:absolute;left:25vw;height:50px;width:70px}.searchform .search-input{width:100%;margin:0 auto;position:absolute;height:50px;padding:0 10px;left:-65vw}.off-canvas-searchform{width:100%;background:#0264A1;z-index:999;margin-top:20px}.off-canvas-searchform input.button{background:#73bf45;color:#FFFFFF}.off-canvas-searchform .off-canvas-search-input{margin:0 auto;padding:0;margin-bottom:20px}.search-top #searchform{text-align:left;display:inline-block;position:relative}.search-top #searchform #search-button{width:22px;right:0px;position:absolute;padding:0;border:1px solid lightgray}.search-top input{height:20px;width:167px;padding:0 8px;margin:13px 0px 0px 18px;border-radius:3px;font-size:10px;color:#000000;display:inline-block}.search-top a.magnifying-glass{font-size:10em;width:0.75rem;height:0.75rem;border:0.125rem solid darkblue;position:absolute;top:15px;border-radius:0.35em;margin:0 0 0 -20px}.search-top a.magnifying-glass:before{content:"";display:inline-block;position:absolute;right:-0.4375rem;bottom:-0.25rem;border-width:0;background:darkblue;width:0.5rem;height:0.125rem;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}#foot-bottom{background:#0088b2;border-top:12px solid #0a7397;padding:40px 0}@media only screen and (max-width: 40em){#foot-bottom{padding:10px 0 10px;}}#foot-bottom span{font-size:12px}#foot-bottom ul{margin-left:0;list-style:none;column-count:2}@media only screen and (max-width: 40em){#foot-bottom ul{display:none;}}#foot-bottom ul li{display:inline-block}#foot-bottom ul li a{color:#FFFFFF}#foot-bottom #social-media ul{list-style:none;display:inline-block;column-count:1}#foot-bottom #social-media ul li{display:inline-block;background:url(../assets/social-header-sprite.png) no-repeat}#foot-bottom #social-media ul li.facebook{background-position:0, 0}#foot-bottom #social-media ul li.twitter{background-position:-33px,0}#foot-bottom #social-media ul li.instagram{background-position:-64px,0}#foot-bottom #social-media ul li.youtube{background-position:-96px,0}#foot-bottom #social-media ul li.pintrest{background-position:-129px,0}#foot-bottom #social-media ul li a{display:block;width:22px;height:24px}#foot-bottom #social-media span{color:#fff;text-transform:uppercase;font-size:16px;display:block;margin-bottom:20px}#copyright{background:#0a7397}#copyright span{color:#fff;font-size:12px}#locations-copyright-container{padding:0}#locations span.bullet,#copyright span.bullet{margin:0 2.5px}@media only screen and (max-width: 40em){#locations span.bullet,#copyright span.bullet{display:none !important;}}#locations{padding:20px 0 0;float:left}#locations span{color:#FFFFFF;white-space:nowrap;font-size:12px}@media only screen and (max-width: 40em){#locations{margin-bottom:20px;}}#footer_address span{white-space:nowrap;color:#FFFFFF}#connect{padding-top:20px;background:#4c4d4f}#connect ul{margin:0;list-style:none}#connect ul li{background:none;padding:0 5px;display:inline-block}#connect ul li>a{display:block;font-family:Open Sans, sans-serif;font-size:12px;color:#fff;padding:20px 18px;line-height:1.2}#connect ul li a#current{background:#0093d1}div#ui-datepicker-div{display:none}#copyright{margin:0 auto;float:none}@media only screen and (max-width: 40em){#copyright{padding-top:25px;}}#copyright span{font-size:0.6875rem;color:#FFFFFF;white-space:nowrap}#copyright a{color:#FFFFFF}@media only screen and (max-width: 40em){#copyright{padding-top:20px;}}.off-canvas-wrap{min-height:100%}.off-canvas-wrap .inner-wrap{min-height:100vh;height:100%}h1{color:#0264a1}.page-front h1{color:#0093d1;font-family:'Dancing Script',cursive}h2{color:#0264a1;font-weight:bold}h3{color:#0264a1;font-weight:800}h4{color:#0264a1;font-weight:600}h5{color:#0264a1}h6{color:#0264a1;font-weight:600}#example.element{background-color:transparent}aside.left-off-canvas-menu li.page_item{display:block;overflow:hidden;position:relative;padding:4px 0px}aside.left-off-canvas-menu .off-canvas-list ul li a{line-height:20px;color:white;border-bottom:1px solid #b1b3b6;background-repeat:no-repeat;background-position:3px 50%}aside.left-off-canvas-menu li.page_item_has_children a.toggle{position:absolute;right:10px;top:5px;text-decoration:none}aside.left-off-canvas-menu li.page_item_has_children a.toggle:before{content:'>';transform:rotate(0deg);color:#FFFFFF;height:17px;width:17px;font-size:17px;font-weight:bold;display:block}aside.left-off-canvas-menu li.page_item_has_children a.toggle:hover{background:transparent}aside.left-off-canvas-menu li.page_item_has_children a.toggle.open{content:'>';transform:rotate(90deg);color:#FFFFFF;height:1rem;width:1rem;font-size:1rem;font-weight:bold;display:block}aside.left-off-canvas-menu ul.children{display:none}aside.left-off-canvas-menu .off-canvas-list ul li>ul li>a{padding-left:10px;margin-left:25px;line-height:18px}aside.left-off-canvas-menu ul.open{display:block}.left-off-canvas-menu{list-style:none}.left-off-canvas-menu li{color:#FFFFFF}.left-off-canvas-menu li a{color:#FFFFFF;font-size:1rem;line-height:150%;border-color:white}.left-off-canvas-menu li a:hover{color:#73bf45}.left-off-canvas-menu li .dropdown{list-style:none}.left-off-canvas-menu ul{list-style:none;padding:0px 0}.left-off-canvas-menu ul li a{color:#FFFFFF}.left-off-canvas-menu ul li ul{list-style:none}.left-off-canvas-menu ul li ul li a{display:block;white-space:pre-wrap}.offcavas-social-list{list-style:none;margin-top:0;margin-bottom:1.0625rem;margin-left:-1.375rem;margin-right:0;overflow:hidden;padding:0;margin-left:auto}.offcavas-social-list>li{display:block;float:left;list-style:none;margin-left:1.375rem}.offcavas-social-list>li>*{display:block}.left-off-canvas-list,.left-off-canvas-list ul{margin-bottom:0px}ul.offcanvas-social{list-style:none;display:inline;margin-left:0;float:right;padding:0px 10px}ul.offcanvas-social li{display:inline-block}ul.offcanvas-social li.facebook,ul.offcanvas-social li.twit,ul.offcanvas-social li.blog,ul.offcanvas-social li.pin,ul.offcanvas-social li.tube,ul.offcanvas-social li.insta{background:url(../assets/social-icons.png)}ul.offcanvas-social li.facebook{background-position:0 -79px;margin-right:7.5px}ul.offcanvas-social li.facebook a{width:35px;height:35px;display:block}@media screen and (min-width: 1200px){ul.offcanvas-social li.facebook{margin-right:15px;}}@media screen and (max-width: 640px){ul.offcanvas-social li.facebook{background-position:0 -79px;}ul.offcanvas-social li.facebook a{width:35px;height:35px}}@media screen and (max-width: 340px){ul.offcanvas-social li.facebook{margin-right:5px;}}ul.offcanvas-social li.twit{background-position:-51px -79px;margin:0 7.5px}ul.offcanvas-social li.twit a{width:35px;height:35px;display:block}@media screen and (min-width: 1200px){ul.offcanvas-social li.twit{margin:0 15px;}}@media screen and (max-width: 640px){ul.offcanvas-social li.twit{background-position:-51px -79px;}ul.offcanvas-social li.twit a{width:35px;height:35px}}@media screen and (max-width: 340px){ul.offcanvas-social li.twit{margin:0 5px;}}ul.offcanvas-social li.blog{background-position:-104px -79px;margin:0 7.5px}ul.offcanvas-social li.blog a{width:35px;height:35px;display:block}@media screen and (min-width: 1200px){ul.offcanvas-social li.blog{margin:0 15px;}}@media screen and (max-width: 640px){ul.offcanvas-social li.blog{background-position:-104px -79px;}ul.offcanvas-social li.blog a{width:35px;height:35px}}@media screen and (max-width: 340px){ul.offcanvas-social li.blog{margin:0 5px;}}ul.offcanvas-social li.pin{background-position:-158px -79px;margin:0 7.5px}ul.offcanvas-social li.pin a{width:35px;height:35px;display:block}@media screen and (min-width: 1200px){ul.offcanvas-social li.pin{margin:0 15px;}}@media screen and (max-width: 640px){ul.offcanvas-social li.pin{background-position:-158px -79px;}ul.offcanvas-social li.pin a{width:35px;height:35px}}@media screen and (max-width: 340px){ul.offcanvas-social li.pin{margin:0 5px;}}ul.offcanvas-social li.tube{background-position:-211px -79px;margin:0 7.5px 0 0px}ul.offcanvas-social li.tube a{width:35px;height:35px;display:block}@media screen and (min-width: 1200px){ul.offcanvas-social li.tube{margin:0 15px;}}@media screen and (max-width: 640px){ul.offcanvas-social li.tube{background-position:-211px -79px;}ul.offcanvas-social li.tube a{width:35px;height:35px}}@media screen and (max-width: 340px){ul.offcanvas-social li.tube{margin:0 5px;}}ul.offcanvas-social li.insta{background-position:-264px -79px;margin-left:7.5px}ul.offcanvas-social li.insta a{width:35px;height:35px;display:block}@media screen and (min-width: 1200px){ul.offcanvas-social li.insta{margin-left:15px;}}@media screen and (max-width: 640px){ul.offcanvas-social li.insta{background-position:-264px -79px;}ul.offcanvas-social li.insta a{width:35px;height:35px}}@media screen and (max-width: 340px){ul.offcanvas-social li.insta{margin-left:5px;}}.client-info-list{margin-top:20px}.communities-offcanvas{margin-left:0px !important}aside.right-off-canvas-menu{background-color:#0264a1;color:white}aside.right-off-canvas-menu li.page_item{display:block;overflow:hidden;position:relative;padding:4px 8px}aside.right-off-canvas-menu .off-canvas-list ul li a{line-height:20px;color:white;border-bottom:1px solid #b1b3b6;background-repeat:no-repeat;background-position:3px 50%}aside.right-off-canvas-menu li.page_item_has_children a.toggle{position:absolute;right:10px;top:5px;text-decoration:none}aside.right-off-canvas-menu li.page_item_has_children a.toggle:before{content:'>';transform:rotate(0deg);color:#FFFFFF;height:17px;width:17px;font-size:17px;font-weight:bold;display:block}aside.right-off-canvas-menu li.page_item_has_children a.toggle:hover{background:transparent}aside.right-off-canvas-menu li.page_item_has_children a.toggle.open{content:'>';transform:rotate(90deg);color:#FFFFFF;height:1rem;width:1rem;font-size:1rem;font-weight:bold;display:block}aside.right-off-canvas-menu ul.children{display:none}aside.right--menu .off-canvas-list ul li>ul li>a{padding-left:10px;margin-left:25px;line-height:18px}aside.right-off-canvas-menu ul.open{display:block}.right-off-canvas-menu{list-style:none}.right-off-canvas-menu h2{color:#FFFFFF}.right-off-canvas-menu li a{color:#FFFFFF;font-size:1.25rem;line-height:150%;border-color:white}.right-off-canvas-menu li a:hover{color:black}.right-off-canvas-menu li .dropdown{list-style:none}.right-off-canvas-menu ul{list-style:none;padding:10px 0}.right-off-canvas-menu ul li{color:#FFFFFF}.right-off-canvas-menu ul li a{color:#FFFFFF}.right-off-canvas-menu ul li ul{list-style:none}.offcavas-social-list{list-style:none;margin-top:0;margin-bottom:1.0625rem;margin-left:-1.375rem;margin-right:0;overflow:hidden;padding:0;margin-right:auto}.offcavas-social-list>li{display:block;float:left;list-style:none;margin-left:1.375rem}.offcavas-social-list>li>*{display:block}#arrive,#depart,#adults,#kids{margin-bottom:0px;margin-top:16px}#kids,#adults{background-color:white !important}#rateOffCanvas{margin-bottom:20px}#departOff{margin-bottom:20px}p.dateLabel{margin-bottom:1px}#kidsOff,#adultsOff{margin-top:0px}.off-canvas-wrap div#ui-datepicker-div.ui-datepicker{position:fixed;top:50% !important;left:50% !important}aside.right-off-canvas-menu .oc-booknow-logo{text-align:center;background:#579433;padding:10px 0;-webkit-box-shadow:0px 3px 7px 0px #01253c;-moz-box-shadow:0px 3px 7px 0px #01253c;box-shadow:0px 3px 7px 0px #01253c;margin-bottom:20px}aside.right-off-canvas-menu .off-canvas-header{font-size:20px;margin:0}aside.right-off-canvas-menu #resform-wrapper #jrs_calendar_form{background:transparent}aside.right-off-canvas-menu #resform-wrapper #jrs_calendar_form #widget_booking_form img.ui-datepicker-trigger{border:none !important;position:relative;right:-90%;top:-48px !important}aside.right-off-canvas-menu #resform-wrapper #jrs_calendar_form #widget_booking_form #jrs_lodging_select_div{display:none;margin:0 10px;width:100% !important}aside.right-off-canvas-menu #resform-wrapper #jrs_calendar_form #widget_booking_form #jrs_lodging_select_div #lodgingID{width:175px !important}aside.right-off-canvas-menu #resform-wrapper #jrs_calendar_form #widget_booking_form #jrs_arrival_input{margin:0 auto;width:100%}aside.right-off-canvas-menu #resform-wrapper #jrs_calendar_form #widget_booking_form #jrs_arrival_input input{-webkit-box-shadow:3px 3px 6px #001623;-moz-box-shadow:3px 3px 6px #001623;box-shadow:3px 3px 6px #001623}aside.right-off-canvas-menu #resform-wrapper #jrs_calendar_form #widget_booking_form #jrs_departure_input{margin:0 auto;width:100%}aside.right-off-canvas-menu #resform-wrapper #jrs_calendar_form #widget_booking_form #jrs_departure_input input{-webkit-box-shadow:3px 3px 6px #001623;-moz-box-shadow:3px 3px 6px #001623;box-shadow:3px 3px 6px #001623}aside.right-off-canvas-menu #resform-wrapper #jrs_calendar_form #widget_booking_form #jrs_search_submit{float:right;margin:0 23%;border:3px solid #73BF45}aside.right-off-canvas-menu #resform-wrapper #jrs_calendar_form #widget_booking_form #jrs_search_submit input{margin-top:5px}@media screen and (max-width: 400px){#jrs_calendar_form #widget_booking_form #jrs_search_submit{height:50px;margin:0 55% !important}} \ No newline at end of file + "d d d d";}}.glm-photo-grid .checkin.glm-blocks-container .landing-page-block-image{padding:25%}@media only screen and (max-width: 40em){.glm-photo-grid .checkin.glm-blocks-container .landing-page-block-image{padding:40%;}}@media only screen and (min-width:40.063em) and (max-width:64em){.glm-photo-grid .checkin.glm-blocks-container .landing-page-block-image{padding:35%;}}.glm-photo-grid .glm-blocks-container{display:-ms-grid;display:grid;max-width:1500px;margin:0 auto;-ms-grid-rows:auto auto auto}.glm-photo-grid .glm-blocks-container .block-hover:hover .plus-icon{transform:rotate(0deg)}.glm-photo-grid .glm-blocks-container .block-hover:hover .plus-icon::before{content:'';display:block;width:0px;height:0px;border-bottom:solid 2px white;position:absolute;bottom:11px;transform:rotate(90deg)}.glm-photo-grid .glm-blocks-container .landing-page-block-image{height:100%;width:100%;background-size:cover !important;position:relative;-webkit-transition:-webkit-transform 300ms ease-in-out;transition:-webkit-transform 300ms ease-in-out;transition:transform 300ms ease-in-out;transition:transform 300ms ease-in-out,-webkit-transform 300ms ease-in-out}.glm-photo-grid .glm-blocks-container .landing-page-block-image::after{content:'';width:100%;height:100%;background:rgba(0,0,0,0.25);position:absolute;left:0;top:0}.glm-photo-grid .glm-blocks-container .landing-page-block-image:hover{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}.glm-photo-grid .glm-blocks-container .block-0{-ms-grid-row:1;-ms-grid-row-span:2;-ms-grid-column:1;-ms-grid-column-span:2;grid-area:a}.glm-photo-grid .glm-blocks-container .block-1{-ms-grid-row:1;-ms-grid-column:3;grid-area:b}.glm-photo-grid .glm-blocks-container .block-2{-ms-grid-row:1;-ms-grid-column:4;grid-area:c}.glm-photo-grid .glm-blocks-container .block-3{-ms-grid-row:2;-ms-grid-column:3;-ms-grid-column-span:2;grid-area:d}.glm-photo-grid .glm-blocks-container .glm-block{margin:10px;overflow:hidden;position:relative}.glm-photo-grid .glm-blocks-container .glm-block:hover .glm-block-content-overlay{opacity:1}.glm-photo-grid .glm-blocks-container .glm-block .glm-block-title{margin:0;color:white;position:absolute;background:rgba(0,0,0,0.65);bottom:0;line-height:1;width:100%;text-align:right;font-size:24px;font-family:"PT Sans", sans-serif;z-index:8;text-transform:uppercase;padding:20px;text-shadow:1px 1px 4px black}.glm-photo-grid .glm-blocks-container .glm-block .glm-block-plus{position:absolute;top:0px;right:0px;color:white;z-index:99;font-size:35px;background:rgba(0,0,0,0.6);padding:10px 13px}.glm-photo-grid .glm-blocks-container .glm-block .glm-block-plus .glm-block-plus-border{border:2px solid white;padding:4px}.glm-photo-grid .glm-blocks-container .glm-block .glm-block-content-overlay{position:absolute;top:0;left:0;z-index:9;background:rgba(0,0,0,0.6);color:white;width:100%;height:100%}.glm-photo-grid .glm-blocks-container .glm-block .glm-block-content-overlay .glm-block-content-wrapper{height:100%;display:flex;justify-content:center;flex-direction:column}.glm-photo-grid .glm-blocks-container .glm-block .glm-block-content-overlay .glm-block-content-wrapper .glm-block-learn-more{border:2px solid #F79548;display:inline-block;max-width:145px;padding:10px 15px;background:transparent;transition:all 400ms ease-in-out;text-transform:uppercase;margin-left:25px}.glm-photo-grid .glm-blocks-container .glm-block .glm-block-content-overlay .glm-block-content-wrapper .glm-block-learn-more a{transition:color 400ms ease-in-out}.glm-photo-grid .glm-blocks-container .glm-block .glm-block-content-overlay .glm-block-content-wrapper .glm-block-learn-more:hover{background:#F79548;cursor:pointer}.glm-photo-grid .glm-blocks-container .glm-block .glm-block-content-overlay .glm-block-content-wrapper .glm-block-learn-more:hover a{color:white !important}.glm-photo-grid .glm-blocks-container .glm-block .glm-block-content-overlay .glm-block-content-wrapper .glm-block-learn-more .arrow{display:inline-block;position:relative;top:0px;width:12px;height:12px;background:transparent;text-indent:-9999px;border-top:2px solid white;border-left:2px solid white;transition:all 250ms ease-in-out;text-decoration:none;color:transparent;transform:rotate(135deg);right:0}.glm-photo-grid .glm-blocks-container .glm-block .glm-block-content-overlay .glm-block-content-wrapper .glm-block-content{padding:25px;display:flex;justify-content:center;align-items:center;font-size:20px}@media screen and (-ms-high-contrast: none){.glm-photo-grid .glm-blocks-container .landing-page-block-image{padding:9.5vw !important}}.glm-photo-grid .ui-widget-header{background:transparent;border:none}.glm-photo-grid .ui-widget.ui-widget-content{border:none}.glm-photo-grid .content{padding:0}.glm-photo-grid .ui-tabs .ui-tabs-panel{padding:0}.glm-photo-grid .grid-button-container{display:flex;justify-content:space-between}@media only screen and (max-width: 40em){.glm-photo-grid .grid-button-container{flex-direction:column;}}.glm-photo-grid .grid-button-container div:not(:last-child){margin-right:3px}.glm-photo-grid .grid-button-container li{margin-bottom:0;flex:1;background:#131c5f}.glm-photo-grid .grid-button-container li a{display:block;height:100%;width:100%}.glm-photo-grid .grid-button-container li a:hover{cursor:pointer;background:#4b725b}.glm-photo-grid .grid-button-container li span{font-size:20px;position:relative;bottom:7px;color:white}.glm-photo-grid .grid-button-container li i.fas{display:inline-block;font-size:40px;color:white}.plus-icon{box-sizing:border-box;transition:transform 0.3s;width:24px;height:24px;transform:rotate(180deg);position:relative}.plus-icon:hover{transform:rotate(0deg)}.plus-icon::before{content:'';display:block;width:24px;height:0px;border-bottom:solid 2px white;position:absolute;bottom:11px;transform:rotate(90deg);transition:width 0.3s}.plus-icon:hover::before{content:'';display:block;width:0px;height:0px;border-bottom:solid 2px white;position:absolute;bottom:11px;transform:rotate(90deg)}.plus-icon::after{content:'';display:block;width:24px;height:0px;border-bottom:solid 2px white;position:absolute;bottom:11px}#sidebar{padding-top:25px;background:#f2f9fc}#sidebar .row.collapse{margin-left:14px}#sidebar li{list-style:none}#sidebar li #calendar_wrap table#wp-calendar{margin:0 auto}#sidebar a{font-size:12px}#sidebar form{margin:0 12px 0 14px}#sidebar form select{padding:0 0.5rem;border-radius:5px;height:25px;margin:0}#sidebar form select option{font-size:10px}#sidebar .small-block-grid-2{margin-top:10px}#sidebar .small-block-grid-2 li{padding:0 0.625rem 0.625rem}#sidebar .small-block-grid-2 li img{border:2px solid lightblue}#sidebar .small-block-grid-2>li:nth-of-type(2),#sidebar .small-block-grid-2>li:nth-of-type(4){padding-left:0}#sidebar .small-block-grid-2>li:nth-of-type(3),#sidebar .small-block-grid-2>li:nth-of-type(4){padding-bottom:20px}#sidebar h3{margin:20px 0 0}#sidebar h1{margin:0;font-size:1.5625rem;text-transform:none}#sidebar input{padding:5px 0 5px 8px;height:auto;margin:10px 0}#sidebar button{border-radius:2px;padding:0 10px}#side-nav{width:90%;padding-top:10px;background:#0264A1}#side-nav h1{font-size:1.375rem}#side-nav h2{margin-left:10px}#side-nav h2 a{color:#FFFFFF}#side-nav h4{font-weight:bold;margin-left:10px}#side-nav li{list-style:none}#side-nav ul{list-style:none;margin:0 0 20px}#side-nav ul li{margin:0 -15px;padding:5px 10px 5px 25px}#side-nav ul li:hover{color:#73BF45}#side-nav ul li a{color:#FFFFFF}#side-nav ul li a:hover{color:#73BF45}#side-nav h3{text-transform:none;margin:0}#side-nav input{padding:5px 0 5px 8px;height:auto;margin-bottom:10px}#side-nav button{border-radius:2px;padding:0 10px}#extra{margin-top:15px}#extra p{line-height:1.3}#extra p.title{margin:0}#extra p.title#last{padding-top:10px}#extra p#message{text-transform:uppercase;color:lightblue;font-size:0.9375rem;margin:40px 0}.county-news{font-weight:bold}.current_page_item a{font-weight:bold}#side-nav ul.sidebar .current{color:#73BF45}#side-bar-nav{margin-top:85px}.searchform{display:none;position:absolute;top:100px;width:90vw;z-index:999;height:50px}.searchform input.button{background:#f79548;color:#FFFFFF}.searchform .search-button{padding:0px 5px 0px 5px;position:absolute;left:25vw;height:50px;width:70px}.searchform .search-input{width:100%;margin:0 auto;position:absolute;height:50px;padding:0 10px;left:-65vw}.off-canvas-searchform{width:100%;background:#0264A1;z-index:999;margin-top:20px}.off-canvas-searchform input.button{background:#73bf45;color:#FFFFFF}.off-canvas-searchform .off-canvas-search-input{margin:0 auto;padding:0;margin-bottom:20px}.search-top #searchform{text-align:left;display:inline-block;position:relative}.search-top #searchform #search-button{width:22px;right:0px;position:absolute;padding:0;border:1px solid lightgray}.search-top input{height:20px;width:167px;padding:0 8px;margin:13px 0px 0px 18px;border-radius:3px;font-size:10px;color:#000000;display:inline-block}.search-top a.magnifying-glass{font-size:10em;width:0.75rem;height:0.75rem;border:0.125rem solid darkblue;position:absolute;top:15px;border-radius:0.35em;margin:0 0 0 -20px}.search-top a.magnifying-glass:before{content:"";display:inline-block;position:absolute;right:-0.4375rem;bottom:-0.25rem;border-width:0;background:darkblue;width:0.5rem;height:0.125rem;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}#foot-bottom{background:#0088b2;border-top:12px solid #0a7397;padding:40px 0}@media only screen and (max-width: 40em){#foot-bottom{padding:10px 0 10px;}}#foot-bottom span{font-size:12px}#foot-bottom ul{margin-left:0;list-style:none;column-count:2}@media only screen and (max-width: 40em){#foot-bottom ul{display:none;}}#foot-bottom ul li{display:inline-block}#foot-bottom ul li a{color:#FFFFFF}#foot-bottom #social-media ul{list-style:none;display:inline-block;column-count:1}#foot-bottom #social-media ul li{display:inline-block;background:url(../assets/social-header-sprite.png) no-repeat}#foot-bottom #social-media ul li.facebook{background-position:0, 0}#foot-bottom #social-media ul li.twitter{background-position:-33px,0}#foot-bottom #social-media ul li.instagram{background-position:-64px,0}#foot-bottom #social-media ul li.youtube{background-position:-96px,0}#foot-bottom #social-media ul li.pintrest{background-position:-129px,0}#foot-bottom #social-media ul li a{display:block;width:22px;height:24px}#foot-bottom #social-media span{color:#fff;text-transform:uppercase;font-size:16px;display:block;margin-bottom:20px}#copyright{background:#0a7397}#copyright span{color:#fff;font-size:12px}#locations-copyright-container{padding:0}#locations span.bullet,#copyright span.bullet{margin:0 2.5px}@media only screen and (max-width: 40em){#locations span.bullet,#copyright span.bullet{display:none !important;}}#locations{padding:20px 0 0;float:left}#locations span{color:#FFFFFF;white-space:nowrap;font-size:12px}@media only screen and (max-width: 40em){#locations{margin-bottom:20px;}}#footer_address span{white-space:nowrap;color:#FFFFFF}#connect{padding-top:20px;background:#4c4d4f}#connect ul{margin:0;list-style:none}#connect ul li{background:none;padding:0 5px;display:inline-block}#connect ul li>a{display:block;font-family:Open Sans, sans-serif;font-size:12px;color:#fff;padding:20px 18px;line-height:1.2}#connect ul li a#current{background:#0093d1}div#ui-datepicker-div{display:none}#copyright{margin:0 auto;float:none}@media only screen and (max-width: 40em){#copyright{padding-top:25px;}}#copyright span{font-size:0.6875rem;color:#FFFFFF;white-space:nowrap}#copyright a{color:#FFFFFF}@media only screen and (max-width: 40em){#copyright{padding-top:20px;}}.off-canvas-wrap{min-height:100%}.off-canvas-wrap .inner-wrap{min-height:100vh;height:100%}h1{color:#0264a1}.page-front h1{color:#0093d1;font-family:'Dancing Script',cursive}h2{color:#0264a1;font-weight:bold}h3{color:#0264a1;font-weight:800}h4{color:#0264a1;font-weight:600}h5{color:#0264a1}h6{color:#0264a1;font-weight:600}#example.element{background-color:transparent}aside.oc-overlay{position:fixed;display:none;width:100%;height:100%;top:0;left:0;right:0;overflow-y:scroll;bottom:0;background-color:#0264a1;z-index:999999;cursor:pointer}aside.oc-overlay li.page_item{display:block;position:relative;padding:11px 8px 11px 22px}aside.oc-overlay .left-off-canvas-list{clear:both;margin-top:50px}aside.oc-overlay .off-canvas-listaside.oc-overlay .off-canvas-list ul li a{line-height:20px;color:#F79548;border-bottom:1px solid #b1b3b6;background-repeat:no-repeat;background-position:3px 50%}aside.oc-overlay ul.oc-destinations-nav>li>a,aside.oc-overlay ul.oc-primary-nav>li>a,aside.oc-overlay ul.oc-home-link>li>a{color:white}aside.oc-overlay li.page_item_has_children a.toggle{position:absolute;right:10px;top:8px;width:auto;text-decoration:none}aside.oc-overlay li.page_item_has_children a.toggle:before{content:url(../assets/arrow-down.png);width:20px;height:20px}aside.oc-overlay li.page_item_has_children a.toggle:hover{background:transparent}aside.oc-overlay li.page_item_has_children a.toggle.open:before{content:url(../assets/arrow-up.png)}aside.oc-overlay .off-canvas-list ul li>ul li>a{padding-left:10px;margin-left:25px;line-height:18px}#oc-client-info-container{background:#FFFFFF}#oc-client-info-container h2{font-size:20px;color:#333333}#oc-client-info-container .oc-client-info{color:#333333;padding:25px 0 15px 15px;max-width:300px;margin:0 auto 0 auto}.oc-overlay{list-style:none}@media only screen and (min-width:0em) and (max-width:64em){.oc-overlay .glm-top-header-left{float:left;margin-left:5px;margin-top:10px}.oc-overlay .glm-top-header-left img{max-width:230px}}.oc-overlay .oc-open{top:45px !important;opacity:1 !important;z-index:99 !important;padding-top:20px !important;padding-left:20px !important}.oc-overlay ul.children{border-top:1px solid white;position:absolute;top:100vh;opacity:0;z-index:-1;width:100%;margin:0;left:0;height:100vh;background-color:#73bf45;transition:top 500ms ease,opacity 500ms ease;-webkit-transition:top 500ms ease,opacity 500ms ease;-moz-transition:top 500ms ease,opacity 500ms ease}.oc-overlay ul.children li a{color:dark-teal}@media only screen and (min-width:64.063em){.oc-overlay{display:none !important;}}.oc-overlay #oc-socials-container{background:white;width:100%}.oc-overlay #oc-socials{padding:0 15px;background:white;max-width:300px;margin:0 auto 0 auto}.oc-overlay #oc-socials .social-link{background-image:url(../assets/social-icons-medium-teal.png);margin-right:15px;display:inline-block;width:44px;height:44px}.oc-overlay #oc-socials .social-link.facebook{background-position:0px 0px}.oc-overlay #oc-socials .social-link.blog{background-position:0px -105px}.oc-overlay .footer-social li a{margin:0}.oc-overlay .button{display:block;margin:0 auto}.oc-overlay li a{color:#FFFFFF;font-size:17px;line-height:1.2;border-color:white;margin-bottom:5px}.oc-overlay li a:hover{color:#555555}.oc-overlay li .dropdown{list-style:none}.oc-overlay ul{list-style:none;padding:10px 0 0 0}.oc-overlay ul li a{color:#555555}.oc-overlay ul li ul{list-style:none}.oc-overlay ul li ul li a{display:inline;white-space:pre-wrap}.offcavas-social-list{list-style:none;margin-top:0;margin-bottom:1.0625rem;margin-left:-1.375rem;margin-right:0;overflow:hidden;padding:0;margin-left:auto}.offcavas-social-list>li{display:block;float:left;list-style:none;margin-left:1.375rem}.offcavas-social-list>li>*{display:block}.offcavas-social-list{list-style:none;margin-top:0;margin-bottom:1.0625rem;margin-left:-1.375rem;margin-right:0;overflow:hidden;padding:0;margin-right:auto}.offcavas-social-list>li{display:block;float:left;list-style:none;margin-left:1.375rem}.offcavas-social-list>li>*{display:block}body #ocSearchForm{width:80%;margin:10px auto 0 auto;float:right;position:relative;left:-15px}body #ocSearchForm input{margin-bottom:15px}body #off-canvas-connect{background-color:#333333;padding:30px 0 20px 0}body #off-canvas-connect .footer-enews{max-width:150px;background-color:orange;color:white;margin:15px auto 0 auto;text-align:center;padding:10px 0}body #off-canvas-connect .footer-social-container{max-width:270px;margin:0 auto}body #off-canvas-connect .footer-social-container .footer-social{padding-top:0}body #off-canvas-connect h2{color:#FFFFFF;font-size:20px;margin-bottom:0;text-align:center}body .oc-secondary-nav{background-color:#73bf45;margin:0;padding:25px 0 0 0}body .oc-secondary-nav li a{color:#555555}body .oc-primary-separator{max-width:300px;color:#555555;padding:0 20px;display:block;margin:0 0 20px 30px;width:80%}body #oc-overlay #oc-members-only-nav{margin:0 0 0 15px;padding:5px}body #oc-overlay #oc-members-only-nav h2{color:#555555;font-size:30px}body .oc-home-link{margin:0;padding:0}body .oc-destinations-nav{background:#0264a1;margin:0;padding:0;position:relative}body .oc-primary-nav{background:#0264a1;margin:0;padding:0 0 15px 0;position:relative}.mobile-menu-toggle{float:left}#menu-icon-close{background-color:#F79548;color:white;padding:5px;border-radius:50%;width:35px;text-align:center;font-weight:bold;float:right;margin:9px 10px 0 0}.wave-container{width:100%;height:60px;overflow:hidden}.wave{display:block;position:relative;height:40px;background:white}.wave:before{content:"";display:block;position:absolute;border-radius:100%;width:100%;height:150px;right:-25%;top:30px}.wave:after{content:"";display:block;position:absolute;border-radius:100%;width:100%;height:150px;left:-25%;top:-100px}#first-wave-container{background:#73bf45}#first-wave{background:#0264a1}#first-wave:before{background-color:#73bf45}#first-wave:after{background-color:#0264a1}#first-wave-alt-container{background:#73bf45}#first-wave-alt{background:#0264a1}#first-wave-alt:before{background-color:#73bf45}#first-wave-alt:after{background-color:#0264a1}#second-wave-container{background:#F79548}#second-wave{background:#73bf45}#second-wave:before{background-color:#F79548}#second-wave:after{background-color:#73bf45}#third-wave-container{background:#0264a1}#third-wave{background:#FFFFFF}#third-wave:before{background-color:#0264a1}#third-wave:after{background-color:#FFFFFF}.sub-menu-section>li.menu-item.oc-collapsed{max-height:0;opacity:0;padding:0}.oc-hidden{height:0;padding:0 !important;overflow:hidden}.sub-menu-section>li.menu-item{opacity:1;transition:padding 400ms ease,max-height 400ms ease;-webkit-transition:padding 400ms ease,max-height 400ms ease;-moz-transition:padding 400ms ease,max-height 400ms ease;background:rgba(255,255,255,0);padding-left:45px !important;position:relative} \ No newline at end of file diff --git a/header.php b/header.php index 9fe8a83..4b8dc6e 100644 --- a/header.php +++ b/header.php @@ -40,6 +40,7 @@ window._fbq.push(['track', 'PixelInitialized', {}]);
+
@@ -71,6 +72,20 @@ window._fbq.push(['track', 'PixelInitialized', {}]); +
- + --> +
-
- + diff --git a/js/app.js b/js/app.js index 1c85b12..00242b8 100644 --- a/js/app.js +++ b/js/app.js @@ -343,4 +343,79 @@ $(document).ready(function () { window.location = $(this).data('area'); }); + + // OFF CANVAS + + $(".menu-icon").on("click", function(){ + $('#oc-overlay').fadeIn(); + }) + $("#menu-icon-close").on("click", function(){ + $('#oc-overlay').fadeOut(); + }) + + const oc_menu = $('#oc-overlay').find(".left-off-canvas-list"); + const menu_items = oc_menu.find('ul').find('li'); + const children_menus = $('ul.children'); + let other_menu; + + // console.log(menu_items) + oc_menu.children('ul').on("click", '> li', function(event){ + // console.log(event.target); + // console.log($(this)); + }) + let collapseMenu; + menu_items.each(function(){ + let menuThis = $(this); + + menuThis.on("click", function(){ + other_menu = $(this).closest('ul.sub-menu-section').siblings('ul.sub-menu-section').not(".oc-home-link"); + }) + if( $(this).children('ul').length > 0 ){ + let menuParent = $(this).parent(); + $(this).on("click", function(e){ + //console.log($(this).parent()) + if( $(this).parent().hasClass('sub-menu-section') ){ + collapseMenu = true; + } + else{ + collapseMenu = false; + } + e.stopImmediatePropagation(); + + // collapse the nav menu that isn't in focus (primary or secondary) + if( $('.oc-open').length > 0 ){ + childMenuVisible = true; + } else { + childMenuVisible = false; + } + + // alter the orientation of the nav arrow, it's the only el that uses a plain open class instead of oc-open + $(this).children('a').toggleClass('open'); + $(this).children('a').siblings('ul').toggleClass('oc-open'); + //console.log(childMenuVisible); + if( collapseMenu && childMenuVisible){ + other_menu.toggleClass("oc-hidden"); + // $(this).children('a').siblings('ul').toggleClass('oc-open'); + } else if( collapseMenu){ + other_menu.toggleClass("oc-hidden"); + } + + // For animation purposes + $(this).toggleClass('oc-expanded'); + $(this).siblings().toggleClass("oc-collapsed"); + $('.oc-overlay').animate({ scrollTop: 0 }, "slow"); + }) + + $(this).children('a').on('click', function(e){ + e.preventDefault(); + }) + + } else { + let url = $(this).children('a').attr('href'); + $(this).on("click", function(){ + window.location = url; + }) + } + }); + }); diff --git a/js/custom/pageSetup.js b/js/custom/pageSetup.js index 4622f2b..5b36a85 100644 --- a/js/custom/pageSetup.js +++ b/js/custom/pageSetup.js @@ -334,4 +334,79 @@ $(document).ready(function () { window.location = $(this).data('area'); }); + + // OFF CANVAS + + $(".menu-icon").on("click", function(){ + $('#oc-overlay').fadeIn(); + }) + $("#menu-icon-close").on("click", function(){ + $('#oc-overlay').fadeOut(); + }) + + const oc_menu = $('#oc-overlay').find(".left-off-canvas-list"); + const menu_items = oc_menu.find('ul').find('li'); + const children_menus = $('ul.children'); + let other_menu; + + // console.log(menu_items) + oc_menu.children('ul').on("click", '> li', function(event){ + // console.log(event.target); + // console.log($(this)); + }) + let collapseMenu; + menu_items.each(function(){ + let menuThis = $(this); + + menuThis.on("click", function(){ + other_menu = $(this).closest('ul.sub-menu-section').siblings('ul.sub-menu-section').not(".oc-home-link"); + }) + if( $(this).children('ul').length > 0 ){ + let menuParent = $(this).parent(); + $(this).on("click", function(e){ + //console.log($(this).parent()) + if( $(this).parent().hasClass('sub-menu-section') ){ + collapseMenu = true; + } + else{ + collapseMenu = false; + } + e.stopImmediatePropagation(); + + // collapse the nav menu that isn't in focus (primary or secondary) + if( $('.oc-open').length > 0 ){ + childMenuVisible = true; + } else { + childMenuVisible = false; + } + + // alter the orientation of the nav arrow, it's the only el that uses a plain open class instead of oc-open + $(this).children('a').toggleClass('open'); + $(this).children('a').siblings('ul').toggleClass('oc-open'); + //console.log(childMenuVisible); + if( collapseMenu && childMenuVisible){ + other_menu.toggleClass("oc-hidden"); + // $(this).children('a').siblings('ul').toggleClass('oc-open'); + } else if( collapseMenu){ + other_menu.toggleClass("oc-hidden"); + } + + // For animation purposes + $(this).toggleClass('oc-expanded'); + $(this).siblings().toggleClass("oc-collapsed"); + $('.oc-overlay').animate({ scrollTop: 0 }, "slow"); + }) + + $(this).children('a').on('click', function(e){ + e.preventDefault(); + }) + + } else { + let url = $(this).children('a').attr('href'); + $(this).on("click", function(){ + window.location = url; + }) + } + }); + }); diff --git a/lib/navigation.php b/lib/navigation.php index cb49515..ad42786 100644 --- a/lib/navigation.php +++ b/lib/navigation.php @@ -52,9 +52,37 @@ if ( ! function_exists( 'glm_groups_top_bar' ) ) { if ( ! function_exists( 'glm_theme_mobile_off_canvas' ) ) { function glm_theme_mobile_off_canvas() { echo '
'; - echo '
  • Home
    • '; + echo ''; + + echo '
      '; + + echo '
    '; + + echo '
      '; echo glm_get_mobile_nav_menu( 'top-bar' ); - echo '
'; + echo ''; + echo '
'; + echo ''; + echo '
+
+
+
'; + echo '
+
+
+
'; + } else { + echo '
  • Members Only
    • '; + echo ''; + echo '
    +
    +
    +
    '; + } + echo '
    '; } } diff --git a/parts/off-canvas-menu.php b/parts/off-canvas-menu.php index 37485b2..928030d 100644 --- a/parts/off-canvas-menu.php +++ b/parts/off-canvas-menu.php @@ -1,40 +1,59 @@ - - - - - - - - + + + + + +
    + +
      +

      CONTACT US

      +
      • + +
      • +
    • , +
      • + + +
      • +
    • , +
      • + + +
      • + + + + + + + + +
      • + + +
      • + +
    +
    + - - +
    +
    +
    +
    + + \ No newline at end of file diff --git a/scss/_map.scss b/scss/_map.scss index a8d9c17..f258900 100644 --- a/scss/_map.scss +++ b/scss/_map.scss @@ -38,7 +38,6 @@ margin-bottom: calc(-4% - 3px); } margin-right: -46px; - } .community-area{ color: #6e6e6e; diff --git a/scss/_off-canvas.scss b/scss/_off-canvas.scss new file mode 100644 index 0000000..51fa511 --- /dev/null +++ b/scss/_off-canvas.scss @@ -0,0 +1,408 @@ +/* for the mobile menu */ +aside.oc-overlay { + // background-color: rgba(0, 0, 0, 0.7); + // color: white; + position: fixed; + display: none; + width: 100%; + height: 100%; + top: 0; + left: 0; + right: 0; + overflow-y: scroll; + bottom: 0; + background-color: $blue; + z-index: 999999; + cursor: pointer; + } + aside.oc-overlay li.page_item { + display: block; + // overflow: hidden; + position: relative; + padding: 11px 8px 11px 22px;; + } + aside.oc-overlay .left-off-canvas-list{ + clear: both; + margin-top: 50px; + } + aside.oc-overlay .off-canvas-listaside.oc-overlay .off-canvas-list ul li a { + line-height: 20px; + color: $orange; + border-bottom: 1px solid #b1b3b6; + background-repeat: no-repeat; + background-position: 3px 50%; + } + aside.oc-overlay ul.oc-destinations-nav > li > a, + aside.oc-overlay ul.oc-primary-nav > li > a, + aside.oc-overlay ul.oc-home-link > li > a { + color: white; + } + aside.oc-overlay li.page_item_has_children a.toggle { + position: absolute; + right: 10px; + top: 8px; + width: auto; + text-decoration: none; + &:before { + // @include off-canvas-point(right, $orange, 17px); + content: url(../assets/arrow-down.png); + width: 20px; + height: 20px; + } + &:hover { + background: transparent; + } + } + aside.oc-overlay li.page_item_has_children a.toggle.open { + &:before { + content: url(../assets/arrow-up.png); + } + } + + aside.oc-overlay .off-canvas-list ul li > ul li > a { + padding-left: 10px; + margin-left: 25px; + line-height: 18px; + } + + #oc-client-info-container{ + background: $white; + h2{ + font-size: 20px; + color: $oil; + } + .oc-client-info{ + color: $oil; + padding: 25px 0 15px 15px; + max-width: 300px; + margin: 0 auto 0 auto; + } + } + .oc-overlay { + @media #{$medium-down}{ + .glm-top-header-left{ + float: left; + margin-left: 5px; + margin-top: 10px; + img{ + max-width: 230px; + } + } + } + .oc-open{ + top: 45px !important; + opacity: 1 !important; + z-index: 99 !important; + padding-top: 20px !important; + padding-left: 20px !important; + } + ul.children{ + border-top: 1px solid white; + position: absolute; + top: 100vh; + opacity: 0; + z-index: -1; + width: 100%; + margin: 0; + left:0; + height: 100vh; + background-color: $green; + transition: top 500ms ease, opacity 500ms ease; + -webkit-transition: top 500ms ease, opacity 500ms ease; + -moz-transition: top 500ms ease, opacity 500ms ease; + li{ + a{ + color: dark-teal; + } + } + // overflow:hidden; + // height: auto; + } + @media #{$large-up}{ + display: none !important; + } + #oc-socials-container { + background: white; + width: 100%; + } + #oc-socials { + padding: 0 15px; + background: white; + max-width: 300px; + margin: 0 auto 0 auto; + .social-link { + background-image: url(../assets/social-icons-medium-teal.png); + margin-right: 15px; + display: inline-block; + width: 44px; + height: 44px; + &.facebook { + background-position: 0px 0px; + } + &.blog { + background-position: 0px -105px; + } + } + } + .footer-social{ + li{ + a{ + margin: 0; + } + } + } + .button{ + display: block; + margin: 0 auto; + } + list-style: none; + li { + a { + color: $white; + font-size: 17px; + line-height: 1.2; + border-color: white; + margin-bottom: 5px; + } + a:hover { + color: $charcoal; + } + .dropdown { + list-style: none; + } + } + ul { + list-style: none; + padding: 10px 0 0 0; + li { + a { + color: $charcoal; + } + ul { + list-style: none; + li { + a { + // width: 85%; + display: inline; + white-space: pre-wrap; + } + } + } + } + } + } + + .offcavas-social-list { + @include inline-list; + margin-left: auto; + } + + + .offcavas-social-list { + @include inline-list; + margin-right: auto; + } + + body{ + #ocSearchForm{ + // max-width: 300px; + width: 80%; + margin: 10px auto 0 auto; + float: right; + position: relative; + left: -15px; + input{ + margin-bottom: 15px; + } + } + #off-canvas-connect{ + background-color: $oil; + padding: 30px 0 20px 0; + .footer-enews{ + max-width: 150px; + background-color: orange; + color: white; + margin: 15px auto 0 auto; + text-align: center; + padding: 10px 0; + } + .footer-social-container{ + max-width: 270px; + margin: 0 auto; + .footer-social{ + padding-top: 0; + } + } + h2{ + color: $white; + font-size: 20px; + margin-bottom: 0; + text-align: center; + } + } + .oc-secondary-nav{ + background-color: $green; + margin: 0; + padding: 25px 0 0 0; + li{ + a{ + color: $charcoal; + } + } + } + .oc-primary-separator { + max-width: 300px; + color: $charcoal; + padding: 0 20px; + display: block; + margin: 0 0 20px 30px; + width: 80%; + } + #oc-overlay #oc-members-only-nav { + margin: 0 0 0 15px; + //background: lighten($green, 10%); + //max-width: 300px; + //border-radius: 5px; + padding: 5px; + h2 { + color: $charcoal; + font-size: 30px; + } + } + .oc-home-link{ + margin: 0; + padding: 0; + } + .oc-destinations-nav { + background: $blue; + margin: 0; + padding: 0; + position: relative; + } + .oc-primary-nav{ + background: $blue; + margin: 0; + padding: 0 0 15px 0; + position: relative; + } + + } + .mobile-menu-toggle{ + float: left; + } + #menu-icon-close{ + background-color: $orange; + color: white; + padding: 5px; + border-radius: 50%; + width: 35px; + text-align : center; + font-weight: bold; + float: right; + margin: 9px 10px 0 0; + } + .wave-container { + width: 100%; + height: 60px; + overflow: hidden; + } + .wave { + display: block; + position: relative; + height: 40px; + background: white; + } + + .wave:before { + content: ""; + display: block; + position: absolute; + border-radius: 100%; + width: 100%; + height: 150px; + right: -25%; + top: 30px + } + + .wave:after { + content: ""; + display: block; + position: absolute; + border-radius: 100%; + width: 100%; + height: 150px; + left: -25%; + top: -100px; + } + #first-wave-container { + background: $green; + } + #first-wave { + background: $blue; + } + #first-wave:before { + background-color: $green; + } + #first-wave:after { + background-color: $blue; + } + #first-wave-alt-container { + background: $green; + } + #first-wave-alt { + background: $blue; + } + #first-wave-alt:before { + background-color: $green; + } + #first-wave-alt:after { + background-color: $blue; + } + #second-wave-container { + background: $orange; + } + #second-wave { + background: $green; + } + #second-wave:before { + background-color: $orange; + } + #second-wave:after { + background-color: $green; + } + #third-wave-container { + background: $blue; + } + #third-wave { + background: $white; + } + #third-wave:before { + background-color: $blue; + } + #third-wave:after { + background-color: $white; + } + + .sub-menu-section > li.menu-item.oc-collapsed{ + max-height: 0; + opacity: 0; + padding: 0; + } + .oc-hidden{ + height: 0; + padding: 0 !important; + overflow: hidden; + } + $top : 10px; + $left: 10px; + .sub-menu-section > li.menu-item{ + // max-height: 2rem; + opacity: 1; + transition: padding 400ms ease, max-height 400ms ease; + -webkit-transition: padding 400ms ease, max-height 400ms ease; + -moz-transition: padding 400ms ease, max-height 400ms ease; + background: rgba($white, 0); + + padding-left: 45px !important; + position: relative; + } \ No newline at end of file diff --git a/scss/app.scss b/scss/app.scss index 7515835..4f7ba9f 100644 --- a/scss/app.scss +++ b/scss/app.scss @@ -17,5 +17,6 @@ @import "page.footer"; @import "copyright"; @import "structure"; -@import "left-off-canvas"; -@import "right-off-canvas"; \ No newline at end of file +// @import "left-off-canvas"; +@import 'off-canvas'; +// @import "right-off-canvas"; \ No newline at end of file -- 2.17.1