chrismademe

Create a Simple Slideout Menu for your Responsive Website

One of the most important parts of any site is the navigation, especially with responsive design since you don't have much space to place with. That's why I put together this super simple yet effective slide out menu, using nothing but HTML, CSS and Javascript (no jQuery here!)

The HTML

First, layout the markup for your menu.

<nav id="slideout-menu" class="slideout-menu">

chrismademe

<?php

// Get tagged products
$featured_products = get_posts(array(
    'posts_per_page' => 3,
    'post_type' => 'product',
    'product_tag' => 'featured',
    'orderby' => 'date'
));

chrismademe

<?php

class JSON {
    
    // Options array
    private $options = array();
    
    /**
     * Construct
     *

chrismademe

<?php

/**
 * Get Posts by Year
 *
 * Returns an array of posts
 * sorted by year and month.
 *
 * @param string $post_type Post Type
 * @param array $options Options array for get_posts()

chrismademe

<?php
 
$permitted_chars = '0123456789abcdefghijklmnopqrstuvwxyz';
// Output: 54esmdr0qf
echo substr(str_shuffle($permitted_chars), 0, 10);
 
$permitted_chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
// Output: video-g6swmAP8X5VG4jCi.mp4
echo 'video-'.substr(str_shuffle($permitted_chars), 0, 16).'.mp4';
 

chrismademe

var picker = new Pikaday({
    field: document.getElementById('datpicker'),
    minDate: moment().toDate(), // Today
    disableDayFn: function(date) {
        var currentDate, today, yearFromNow, dateFormat;

        // Set Date Format
        dateFormat = 'YYYY-MM-DD';

        // Create Moment Objects

chrismademe

<?php

/**
 * Get Date Range
 *
 * @param string $start Start date in unix timestamp format
 * @param string $end End date in unix timestamp format
 * @return array Range of dates in an array
 */
function get_date_range( $start, $end ) {

chrismademe

<?php

/*
 * Manage Vacancies Columns
 */
add_filter( 'manage_vacancies_posts_columns', function ( $columns ) {

    // Checkbox column
    $cb = $columns['cb'];

chrismademe

/**
 * Written by Philip Walton
 * @see https://philipwalton.com/articles/responsive-components-a-solution-to-the-container-queries-problem/
 */

if ('ResizeObserver' in self) {
  
  // Create a single ResizeObserver instance to handle all
  // container elements. The instance is created with a callback,
  // which is invoked as soon as an element is observed as well

chrismademe

<?php

/**
 * Order Has Product
 * 
 * Checks a WooCommerce order to see if it contains
 * a given product ID
 * 
 * @param object $order
 * @param int $product_id