Skip to content

Instantly share code, notes, and snippets.

@amir3code
Last active April 12, 2018 08:59
Show Gist options
  • Save amir3code/b6a34c2ee4de6d9053d59a0a65ae06d5 to your computer and use it in GitHub Desktop.
Save amir3code/b6a34c2ee4de6d9053d59a0a65ae06d5 to your computer and use it in GitHub Desktop.
2 menu on the same page slideout js + vue js

Installation

Create a new vuejs project (or use the one you have).

# Create a new project:
$ vue init webpack

Go to project folder and install slideout:

npm install --save slideout

Fill the file App.vue with the contents I have provided with this gist.
You are good to go!

<template>
<div class="main">
<div ref="left_menu">
Left Menu
</div>
<div class="main" ref="panel">
Main Page Is HERE
</div>
<div ref="right_menu">
Right Menu
</div>
</div>
</template>
<script>
import Slideout from 'slideout/dist/slideout.min.js'
export default {
data() {
return {}
},
components: {
},
mounted() {
enableSlideOuts.call(this)
},
}
let enableSlideOuts = function () {
let left_slideOut = new Slideout({
'panel': this.$refs.panel,
'menu': this.$refs.left_menu,
'padding': 256,
'tolerance': 70,
'side': 'left'
})
let right_slideOut = new Slideout({
'panel': this.$refs.panel,
'menu': this.$refs.right_menu,
'padding': 256,
'tolerance': 70,
'side': 'right'
})
let right_slideOut_makeSureClosed = function () {
if (right_slideOut.isOpen()) {
right_slideOut.close()
}
}
let left_slideOut_makeSureClosed = function () {
if (left_slideOut.isOpen()) {
left_slideOut.close()
}
}
left_slideOut.on('close', right_slideOut_makeSureClosed)
.on('open', right_slideOut_makeSureClosed)
right_slideOut.on('close', left_slideOut_makeSureClosed)
.on('open', left_slideOut_makeSureClosed)
left_slideOut.on('translatestart', function () {
left_slideOut.menu.style.visibility = 'visible'
right_slideOut.menu.style.visibility = 'hidden'
})
right_slideOut.on('translatestart', function () {
left_slideOut.menu.style.visibility = 'hidden'
right_slideOut.menu.style.visibility = 'visible'
})
}
</script>
<style>
@import 'slideout/index.css';
.slideout-menu-left {
left: 0;
right: unset;
}
.slideout-menu-right {
right: 0;
left: unset;
}
body, html, .main {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
user-select: none;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment