Skip to content

Instantly share code, notes, and snippets.

@chillybin

chillybin/functions.php

Last active August 22, 2018 15:48
Show Gist options
  • Save chillybin/1ba3506ee0ef0584591475fc0ee1109f to your computer and use it in GitHub Desktop.
Save chillybin/1ba3506ee0ef0584591475fc0ee1109f to your computer and use it in GitHub Desktop.
Download ZIP
Emulating the Squarespace Mobile Menu Bar
Raw
functions.php
<?php
add_action('genesis_after', 'cb_mobile_bar', 999);
function cb_mobile_bar() { ?>
<div class="mobile-bar">
<div class="mobile-bar-triggers">
<div class="mobile-bar-trigger" data-type="contactEmail">
<a href="mailto:[email protected]">
<span class="mobile-bar-trigger-icon"></span>
<span class="mobile-bar-trigger-label">Email</span>
</a>
</div>
<div class="mobile-bar-trigger" data-type="contactPhoneNumber">
<a href="tel:+6531591596">
<span class="mobile-bar-trigger-icon"></span>
<span class="mobile-bar-trigger-label">Call</span>
</a>
</div>
<div class="mobile-bar-trigger trigger-overlay" data-type="location">
<span class="mobile-bar-trigger-icon"></span>
<span class="mobile-bar-trigger-label">Map</span>
</div>
<div class="mobile-bar-trigger trigger-overlay" data-type="businessHours">
<span class="mobile-bar-trigger-icon"></span>
<span class="mobile-bar-trigger-label">Hours</span>
</div>
</div>
<div class="mobile-bar-overlay">
<div class="mobile-bar-overlay-content">
<div class="mobile-bar-overlay-content-section" id="location">
<div class="mobile-bar-address-map">
<img src="https://maps.googleapis.com/maps/api/staticmap?center=Scotts+Road,+Singapore&zoom=14&scale=2&size=640x960&maptype=roadmap&key=AIzaSyC7KzN7W9xp63vWqc4PAFq88QAHg6daCdw&format=png&visual_refresh=true&markers=size:mid%7Ccolor:0x4d81cc%7Clabel:%7C1+Scotts+Road,+#24-05+Shaw+Centre,+Singapore+228208" alt="Google Map of Scotts Road, Singapore">
</div>
<div class="mobile-bar-address">
<div data-type="addressTitle">ChillyBin Web Design</div>
<div data-type="addressLine1">1 Scotts Road</div>
<div data-type="addressLine2">#24-05 Shaw Centre</div>
<div data-type="addressCountry">Singapore 228208</div>
<a target="_blank" class="map-link" href="//www.google.com/maps/dir//1+Scotts+Road+Singapore/"></a>
</div>
</div>
<div class="mobile-bar-overlay-content-section" id="businessHours">
<div class="hours-content">
<?php
date_default_timezone_set('Asia/Singapore'); // timezone
$weekday = date(l); // today
//print $weekday; // Debug
//print date("H:i"); // debug
// Set open and closing time for each day of the week
if ($weekday == "Saturday" || $weekday == "Sunday") {
$open_from = "00:00";
$open_to = "00:00";
}
else {
$open_from = "09:00";
$open_to = "18:00";
}
// now check if the current time is before or after opening hours
if (date("H:i") < $open_from || date("H:i") > $open_to ) {
$opening = "Closed!";
}
// show the checkout button
else {
$opening = "Open!";
}
?>
<div class="hours-content-current">
We are currently<br><span><?php echo $opening; ?></span>
</div>
<div class="hours-content-day">
<div class="hours-content-day-label">Mon</div>
<div class="hours-content-day-hours">
<div>9am - 6pm</div>
</div>
</div>
<div class="hours-content-day">
<div class="hours-content-day-label">Tue</div>
<div class="hours-content-day-hours">
<div>9am - 6pm</div>
</div>
</div>
<div class="hours-content-day">
<div class="hours-content-day-label">Wed</div>
<div class="hours-content-day-hours">
<div>9am - 6pm</div>
</div>
</div>
<div class="hours-content-day">
<div class="hours-content-day-label">Thu</div>
<div class="hours-content-day-hours">
<div>9am - 6pm</div>
</div>
</div>
<div class="hours-content-day">
<div class="hours-content-day-label">Fri</div>
<div class="hours-content-day-hours">
<div>9am - 6pm</div>
</div>
</div>
<div class="hours-content-day">
<div class="hours-content-day-label">Sat</div>
<div class="hours-content-day-hours">
<div>Closed</div>
</div>
</div>
<div class="hours-content-day">
<div class="hours-content-day-label">Sun</div>
<div class="hours-content-day-hours">
<div>Closed</div>
</div>
</div>
</div>
</div>
</div>
<div class="mobile-bar-overlay-close"></div>
</div>
</div>
<?php
}
Raw
script.js
jQuery( document ).ready(function() {
jQuery('.trigger-overlay').click(function(){
jQuery('.mobile-bar').addClass('mobile-bar-show-overlay');
jQuery('.mobile-bar-overlay-content-section').removeClass('show');
overlay = jQuery(this).data('type');
jQuery('#' + overlay).addClass('show');
});
jQuery('.mobile-bar-overlay-close').click(function(){
jQuery('.mobile-bar').removeClass('mobile-bar-show-overlay');
});
});
jQuery(window).on('scroll', function() {
scrollPosition = $(this).scrollTop();
if (scrollPosition >= 64) {
jQuery('.mobile-bar').addClass('hide-bar');
}
if (scrollPosition <= 64) {
jQuery('.mobile-bar').removeClass('hide-bar');
}
});
Raw
style.css
.mobile-bar {
display: none;
position: fixed;
z-index: 10000;
bottom: 0;
left: 0;
width: 100%;
background: #ebebeb;
transition: all .2s cubic-bezier(.23,.47,.32,1);
transform: none;
}
.mobile-bar.hide-bar {
transform: translate3d(0,100px,0);
}
@media only screen and (max-width: 812px) {
.mobile-bar {
display: block;
}
}
.mobile-bar-trigger {
cursor: pointer;
display: inline-block;
width: 25%;
padding: 15px 0;
text-align: center;
}
.mobile-bar-triggers {
font-size: 0;
}
.mobile-bar-trigger-icon {
display: block;
width: 16px;
height: 16px;
margin: 0 auto 8px auto;
background-size: contain;
background-repeat: no-repeat;
}
.mobile-bar-trigger[data-type="location"] .mobile-bar-trigger-icon {
background-image: url(//static.squarespace.com/universal/images-v6/mobile-info-bar/map.png)
}
.mobile-bar-trigger[data-type="contactEmail"] .mobile-bar-trigger-icon {
background-image: url(//static.squarespace.com/universal/images-v6/mobile-info-bar/email.png)
}
.mobile-bar-trigger[data-type="contactPhoneNumber"] .mobile-bar-trigger-icon {
background-image: url(//static.squarespace.com/universal/images-v6/mobile-info-bar/call.png)
}
.mobile-bar-trigger[data-type="businessHours"] .mobile-bar-trigger-icon {
background-image: url(//static.squarespace.com/universal/images-v6/mobile-info-bar/hours.png)
}
.mobile-bar-triggers a {
text-decoration: none;
}
.mobile-bar-trigger-label {
display: block;
font-size: 10px;
line-height: 1em;
letter-spacing: 1px;
color: #222;
text-transform: uppercase;
font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
}
.mobile-bar-overlay {
visibility: hidden;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
background: #ebebeb;
color: #222;
display: flex;
justify-content: center;
align-items: center;
transition: opacity .2s cubic-bezier(.23,.47,.32,1);
z-index: 0;
}
.mobile-bar-show-overlay .mobile-bar-overlay {
opacity: 1;
visibility: visible;
z-index: 100;
}
.mobile-bar-overlay .show {
display: block;
}
#businessHours {
width: calc(100vw - 2em);
}
.mobile-bar-address-map {
top: 0;
left: 0;
width: 100vw;
height: 100vh;
position: relative;
overflow: hidden;
}
.mobile-bar-address-map img {
height: 100%;
display: block;
position: absolute;
top: 0px;
left: 50%;
margin-left: -320px;
background-color: rgb(229, 227, 223);
max-width: none;
}
.mobile-bar-address {
position: absolute;
width: 100%;
height: auto;
color: #aaa;
background: #ebebeb;
bottom: 0;
padding: 20px;
font-size: 12px;
line-height: 19px;
font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
box-sizing: border-box;
}
.mobile-bar-address > div[data-type="addressTitle"] {
color: #222;
font-size: 14px;
line-height: 14px;
margin: 2px 0 7px 0
}
.mobile-bar-address .map-link {
background: url(//static.squarespace.com/universal/images-v6/icons/icon-external-link-18-dark.png) no-repeat;
position: absolute;
width: 18px;
height: 18px;
top: 50%;
right: 20px;
margin-top: -9px
}
.hours-content-current {
text-align: center;
margin: 1em 0 3em 0;
color: #aaa;
font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
font-size: 16px;
line-height: 1.65;
}
.hours-content-current span {
text-transform: uppercase;
letter-spacing: 2px;
color: #222;
font-size: 20px;
}
.hours-content-day {
margin: .5em 0;
font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
font-size: 16px;
line-height: 1.4;
font-style: normal;
letter-spacing: 1px;
}
.hours-content-day:after {
display: block;
visibility: hidden;
font-size: 0;
height: 0;
clear: both;
content: ".";
}
.hours-content-day-label {
color: #aaa;
float: left;
position: relative;
top: 2px;
width: 35%;
margin-right: 10%;
font-size: 13px;
text-transform: uppercase;
text-align: right;
}
.hours-content-day-hours {
float: right;
width: 55%;
}
.mobile-bar-overlay-close {
cursor: pointer;
position: fixed;
background: #ebebeb;
top: 10px;
right: 10px;
padding: 13px;
}
.mobile-bar-overlay-close:after {
content: '×';
display: block;
font-family: helvetica,arial,sans-serif;
font-weight: 100;
font-size: 19px;
line-height: 15px;
padding: 0;
color: #222;
}
.mobile-bar-overlay-content-section {
display: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment