dave-kennedy/demo.html

## demo.html
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Bootstrap flyout demo</title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
        <link href="flyout.css" rel="stylesheet">
    </head>
    <body>
        <nav class="navbar navbar-light">
            <div class="navbar-brand">Demo</div>
            <button class="navbar-toggler" type="button" data-toggle="flyout" data-target="#menu">
                <span class="navbar-toggler-icon"></span>
            </button>
        </nav>
        <div class="flyout navbar-flyout right" id="menu">
            <div class="navbar-nav">
                <a class="nav-link">Link 1</a>
                <a class="nav-link">Link 2</a>
                <a class="nav-link">Link 3</a>
            </div>
        </div>
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
        <script src="flyout.js"></script>
    </body>
</html>

## flyout.css
.flyout {
    left: 0;
    position: fixed;
    right: auto;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 1050;
}

.flyout.right {
    left: auto;
    right: 0;
    transform: translateX(100%);
}

.flyout.show {
    transform: translateX(0%);
}

.flyout-backdrop {
    background-color: rgba(0, 0, 0, 0.5);
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1040;
}

.navbar-flyout {
    background-clip: padding-box;
    background-color: inherit;
    border-right: 1px solid rgba(0, 0, 0, 0.2);
    bottom: 0;
    padding: 1rem;
    top: 0;
}

.navbar-flyout.right {
    border-left: 1px solid rgba(0, 0, 0, 0.2);
    border-right: none;
}

## flyout.js
function hide() {
    $('.flyout-backdrop').removeClass('show').on('transitionend', event => {
        $(event.currentTarget).remove();
    });

    $(this).removeClass('show');
}

function show() {
    let backdrop = $('<div class="flyout-backdrop fade"></div>');
    $(document.body).append(backdrop);

    // bootstrap hack to make fade in work
    bootstrap.Util.reflow(backdrop[0]);

    backdrop.addClass('show').on('click', event => {
        hide.call(this);
    });

    $(this).addClass('show');
}

function toggle() {
    if ($(this).hasClass('show')) {
        hide.call(this);
    } else {
        show.call(this);
    }
}

$(document).on('click', '[data-toggle="flyout"]', event => {
    let target = $(event.currentTarget).data('target');
    $(target).flyout('toggle');
}).on('click', '[data-dismiss="flyout"]', event => {
    $(event.currentTarget).closest('.flyout.show').flyout('hide');
});

$.fn.flyout = function (config) {
    return this.each(() => {
        if (config == 'hide') {
            hide.call(this);
        } else if (config == 'show') {
            show.call(this);
        } else if (config == 'toggle') {
            toggle.call(this);
        }
    });
};
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>Bootstrap flyout demo</title>
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
	<link href="flyout.css" rel="stylesheet">
	</head>
	<body>
	<nav class="navbar navbar-light">
	<div class="navbar-brand">Demo</div>
	<button class="navbar-toggler" type="button" data-toggle="flyout" data-target="#menu">
	<span class="navbar-toggler-icon"></span>
	</button>
	</nav>
	<div class="flyout navbar-flyout right" id="menu">
	<div class="navbar-nav">
	<a class="nav-link">Link 1</a>
	<a class="nav-link">Link 2</a>
	<a class="nav-link">Link 3</a>
	</div>
	</div>
	<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
	<script src="flyout.js"></script>
	</body>
	</html>
	.flyout {
	left: 0;
	position: fixed;
	right: auto;
	transform: translateX(-100%);
	transition: transform 0.3s ease;
	z-index: 1050;
	}

	.flyout.right {
	left: auto;
	right: 0;
	transform: translateX(100%);
	}

	.flyout.show {
	transform: translateX(0%);
	}

	.flyout-backdrop {
	background-color: rgba(0, 0, 0, 0.5);
	bottom: 0;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 1040;
	}

	.navbar-flyout {
	background-clip: padding-box;
	background-color: inherit;
	border-right: 1px solid rgba(0, 0, 0, 0.2);
	bottom: 0;
	padding: 1rem;
	top: 0;
	}

	.navbar-flyout.right {
	border-left: 1px solid rgba(0, 0, 0, 0.2);
	border-right: none;
	}
	function hide() {
	$('.flyout-backdrop').removeClass('show').on('transitionend', event => {
	$(event.currentTarget).remove();
	});

	$(this).removeClass('show');
	}

	function show() {
	let backdrop = $('<div class="flyout-backdrop fade"></div>');
	$(document.body).append(backdrop);

	// bootstrap hack to make fade in work
	bootstrap.Util.reflow(backdrop[0]);

	backdrop.addClass('show').on('click', event => {
	hide.call(this);
	});

	$(this).addClass('show');
	}

	function toggle() {
	if ($(this).hasClass('show')) {
	hide.call(this);
	} else {
	show.call(this);
	}
	}

	$(document).on('click', '[data-toggle="flyout"]', event => {
	let target = $(event.currentTarget).data('target');
	$(target).flyout('toggle');
	}).on('click', '[data-dismiss="flyout"]', event => {
	$(event.currentTarget).closest('.flyout.show').flyout('hide');
	});

	$.fn.flyout = function (config) {
	return this.each(() => {
	if (config == 'hide') {
	hide.call(this);
	} else if (config == 'show') {
	show.call(this);
	} else if (config == 'toggle') {
	toggle.call(this);
	}
	});
	};