Create a dropdown like on Stripe
Demo Project
Install the library in your project
$ npm i vue-stripe-menu
// or
$ yarn add vue-stripe-menu
Then add components to Vue and compiled css styles.
// .js file
import Vue from 'Vue'
import VueStripeMenu from 'vue-stripe-menu'
Vue.use(VueStripeMenu)
// Import build styles
import 'vue-stripe-menu/dist/vue-stripe-menu.css'
Or you can change them at compile time (scss). See all available variables:
List of variables
// .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";
<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-->
<li class="vsm-section">
<img
src="/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-->
<li class="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">
*/
export default {
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 events
mouseover: (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>
Vue Stripe Menu - Real Demo
Code for creating a menu as on a demo: Link
Property |
Parameters |
Description |
Type |
Default |
Required |
menu |
MenuObject |
Description of the menu items, see below |
Array |
|
true |
element |
|
HTML element for root element |
String |
header |
false |
base-width |
|
The relationship between the width of the content and this value |
string, number |
header |
false |
base-height |
|
The relationship between the height of the content and this value |
string, number |
header |
false |
screen-offset |
|
Offset from the window screen |
string, number |
header |
false |
Name |
Description |
Return |
open-dropdown |
Open the dropdown menu, return the active DOM Element |
Element |
close-dropdown |
Close the dropdown menu, return the active DOM Element |
Element |
Name |
Parameters |
Description |
default |
MenuItem, index |
The main content for the dropdown list |
before-nav |
before-nav |
Content to the left of the list |
after-nav |
after-nav |
Content to the right of the list |
title |
MenuItem, index |
Replace the output of menu[i].title with your own |
this.$refs[myVsmRef].closeDropdown()
Name |
Parameters |
Description |
Return |
toggleDropdown |
HTMLElement |
Open dropdown menu, if open - close |
|
openDropdown |
HTMLElement |
Open dropdown menu for selected item |
|
closeDropdown |
|
Close any open dropdown menu |
|
const elements = this.$refs[myVsmRef].hasDropdownEls
Name |
Description |
Return |
hasDropdownEls |
List of HTML elements that have dropdown content |
Array<HTMLElement> |
$refs.links |
List of HTML elements obtained from menu props |
Array<HTMLElement> |
Property |
Type |
Description |
title |
String |
Menu item name. Can also be redefined through the slot |
dropdown |
String |
Unique value indicates that this item has a dropdown menu |
element |
String |
HTML element in the header element, if not specified, it will be or |
attributes |
Object |
All attributes to be assigned in the header element (v-bind) |
listeners |
Object |
All events to be assigned in the header element (v-on) |
Property |
Parameters |
Description |
Type |
Default |
Required |
v-model |
|
The state of the open/close the menu |
Boolean |
false |
false |
Name |
Parameters |
Description |
default |
|
The main content for the dropdown list |
hamburger |
|
Replace button to open dropdown |
Name |
Description |
vsm-mob-hide |
Hide HTML elements in mobile design |
vsm-mob-full |
Add flex-grow: 1, see Demo example |
Detailed changes for each release are documented in the CHANGELOG.md.
MIT