// .scss file// You can resize for "@media only screen":$vsm-media: 500px;
// Colors:$vsm-color: #000;
$vsm-color-hover: rgba(0, 0, 0, .9);
// And also you can see the animation in slow motion:$vsm-transition: 1s;
@import"~vue-stripe-menu/src/scss/index";
Basic Demo
<template>
<vsm-menu
:menu="menu"
:base-width="380"
:base-height="400"
:screen-offset="10"element="header"
@open-dropdown="onOpenDropdown"
@close-dropdown="onCloseDropdown"
>
<template #default="data">
<!--Dropdown Content-->
<div>{{ data }}</div>
</template>
<template #before-nav>
<!--Image or svg of website logo-->
<liclass="vsm-section">
<imgsrc="/path/to/file"title="My Logo"
>
</li>
</template>
<template #title="data">
<!--Display menu items through slots-->
{{ data.item.title }}
</template>
<template #after-nav>
<!--Mobile Burger, buttons, etc--><!--For the same styles - add the vsm-section-->
<liclass="vsm-section vsm-mob-hide">
<button>My Button</button>
</li>
<!--Display when user media screen below from $vsm-media (scss)-->
<vsm-mob>Mobile Content</vsm-mob>
</template>
</vsm-menu>
</template>
<script>/* eslint-disable *//* * This is an example of possible settings, you can also control * scss variables, and also you need to add a little style. * So copy and delete what you don’t need. * * After #after-nav and #before-nav it is recommended to use * to maintain the correct HTML structure: * <li class="vsm-section">*/exportdefault {data() {return { menu: [ {// display menu item (or override title slot) title:'News',// now this is not a link, but a menu item where there is a dropdown dropdown:'news',// don't want a button element? element:'span',// menu item can accept all attributes attributes: {// I want more classes! No problem// string, array, object, not matter class: ['my-class1', { 'my-class2':true }],// Custom attributes'data-big':'yes' },// add some events? listeners: {// all possible native eventsmouseover: (evt) => {console.log('news hover', evt) } },// just extra properties in the object new_section:false, }, { title:'External Link', attributes: { href:'https://github.com/Alexeykhr/vue-stripe-menu', target:'_blank' } }// ... ] } }, methods: {onOpenDropdown() {console.log('onOpenDropdown') },onCloseDropdown() {console.log('onCloseDropdown') } }}</script>