Alexeykhr / Vue Stripe Menu
Licence: mit
Creating a navigation menu with animations like on Stripe
Stars: ✭ 266
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vue Stripe Menu
React Dropdown Select
Customisable dropdown select for react
Stars: ✭ 227 (-14.66%)
Mutual labels: menu, dropdown
Dropdownmenukit
UIKit drop down menu, simple yet flexible and written in Swift
Stars: ✭ 246 (-7.52%)
Mutual labels: menu, dropdown
Bootstrap Dropdown Hover
Bootstrap based responsive mulltilevel dropdown navigation menu with fascinating animations
Stars: ✭ 115 (-56.77%)
Mutual labels: menu, dropdown
react-native-select-pro
React Native dropdown (select) component developed by Mobile Reality
Stars: ✭ 79 (-70.3%)
Mutual labels: dropdown, menu
Dopdropdownmenu Enhanced
DOPDropDownMenu 添加双列表 优化版 新增图片支持(double tableView, The optimization version ,new add image,detailText)
Stars: ✭ 1,757 (+560.53%)
Mutual labels: menu, dropdown
React Menu
React component for building accessible menu, dropdown, submenu, context menu and more.
Stars: ✭ 237 (-10.9%)
Mutual labels: menu, dropdown
Tippyjs
Tooltip, popover, dropdown, and menu library
Stars: ✭ 9,433 (+3446.24%)
Mutual labels: menu, dropdown
ContextMenuSwift
A better version of iOS 13 Context Menu
Stars: ✭ 162 (-39.1%)
Mutual labels: dropdown, menu
clicky-menus
Simple click-triggered navigation submenus. Accessible and progressively enhanced.
Stars: ✭ 76 (-71.43%)
Mutual labels: dropdown, menu
Custom Reactjs Dropdown Components
Custom dropdown components for ReactJS
Stars: ✭ 110 (-58.65%)
Mutual labels: menu, dropdown
Yndropdownmenu
✨ Awesome Dropdown menu for iOS with Swift 5.0
Stars: ✭ 1,259 (+373.31%)
Mutual labels: menu, dropdown
Azdropdownmenu
A simple dropdown menu component for iPhone
Stars: ✭ 198 (-25.56%)
Mutual labels: menu, dropdown
Igldropdownmenu
An iOS drop down menu with pretty animation and easy to customize.
Stars: ✭ 1,218 (+357.89%)
Mutual labels: menu, dropdown
React Native Dropdown Picker
A single / multiple, categorizable & searchable item picker (dropdown) component for react native which supports both Android & iOS.
Stars: ✭ 230 (-13.53%)
Mutual labels: menu, dropdown
Tippyjs React
React component for Tippy.js (official)
Stars: ✭ 1,081 (+306.39%)
Mutual labels: menu, dropdown
Ember Select Box
🔠 A faux select box for Ember apps
Stars: ✭ 60 (-77.44%)
Mutual labels: menu, dropdown
Accordion
Silky-smooth accordion widgets with no external dependencies.
Stars: ✭ 32 (-87.97%)
Mutual labels: dropdown, menu
Vue Stripe Menu
Create a dropdown like on Stripe
How to install
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:
// .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";
Nuxt
Create a new plugin:
// plugins/vue-stripe-menu.js
import Vue from 'vue'
import VueStripeMenu from 'vue-stripe-menu'
import 'vue-stripe-menu/dist/vue-stripe-menu.css'
Vue.use(VueStripeMenu)
Connect it:
// nuxt.config.js
export default {
plugins: [{
src: '~/plugins/menu'
}],
}
Basic Demo
<template>
<vsm-menu
:menu="menu"
:base-width="380"
:base-height="400"
:screen-offset="10"
element="header"
handler="hover"
@open-dropdown="onOpenDropdown"
@close-dropdown="onCloseDropdown"
>
<template #default="{ item }">
<!--Dropdown Content-->
<!--You can replace it with a separate component if each menu item has its own style-->
<!--Dynamic Component Example: https://codepen.io/Alexeykhr/pen/YzPKxpX-->
<div class="wrap-content">
<div class="wrap-content__block">
Header: {{ item.title }}
</div>
<div class="wrap-content__item">
{{ item }}
</div>
</div>
</template>
<template #before-nav>
<!--Image or svg of website logo-->
<li class="vsm-section logo-section">
<img
src="https://vuejs.org/images/logo.png"
alt="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>
<style lang="scss">
// Styles, to quickly start using the component
// You can delete, change or add your own
// Limit the width to 1024px and center
.vsm-menu {
margin: 10px;
ul {
max-width: 1024px;
margin: 0 auto;
}
}
// Let's simplify the work with menu items (logo, menu, buttons, etc)
.vsm-root {
display: flex;
align-items: center;
justify-content: center;
}
// Move all the content to the right and reduce the logo
.logo-section {
flex: 1 1 auto;
img {
user-select: none;
max-width: 40px;
}
}
// All menu items (element props: a, button, span, etc) are
// made the same in style
.vsm-section_menu {
> * {
padding: 0 25px;
font-weight: 500;
font-family: inherit;
}
}
// Styles for Dropdown Content:
.wrap-content {
padding: 30px;
// Set the width manually so that it does not depend
// on changing content
width: 400px;
}
.wrap-content__block {
font-weight: bold;
}
.wrap-content__item {
font-style: italic;
font-size: .8rem;
}
</style>
Codepen Demo
Advanced Demo
Code for creating a menu as on a demo: Link
API
[Menu] Props
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 | |
handler | hover, click | What event should you open dropdown for | string | hover | false |
[Menu] Events
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 |
[Menu] Slots
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 |
[Menu] Methods
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 |
[Menu] Properties
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> |
[Menu] MenuObject (menu props)
[Mob] Props
Property | Parameters | Description | Type | Default | Required |
---|---|---|---|---|---|
v-model | The state of the open/close the menu | Boolean | false | false |
[Mob] Slots
Name | Parameters | Description |
---|---|---|
default | The main content for the dropdown list | |
hamburger | Replace button to open dropdown |
[Mob] Methods
this.$refs[myVsmMobRef].closeDropdown()
Name | Parameters | Description | Return |
---|---|---|---|
closeDropdown | Close dropdown menu |
Classes
Name | Description |
---|---|
vsm-mob-hide | Hide HTML elements in mobile design |
vsm-mob-full | Add flex-grow: 1, see Demo example |
Contributing
Launch of a demo project (development of lib)
$ npm run dev
Build a demo project
$ npm run build
Build library
$ npm run build:lib
Run tests
$ npm run test
Check code on Eslint
$ npm run lint
Changelog
Detailed changes for each release are documented in the CHANGELOG.md.
License
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].