Skip to content
A simple hands-on mobile nested menu UI component with a smooth slide animation
Branch: master
Clone or download
Latest commit a76ba7b Sep 17, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook Init project with @stroybook/vue May 11, 2018
config
dist Correct rollup format and update dist May 13, 2018
example Update component source as props and item link May 14, 2018
src Remove demo data May 15, 2018
stories Add draft stories May 11, 2018
.babelrc Init project with @stroybook/vue May 11, 2018
.editorconfig Add .editorconfig May 11, 2018
.eslintrc.js Init project with @stroybook/vue May 11, 2018
.gitignore Init project with @stroybook/vue May 11, 2018
README.md
package.json Update project version in package.json May 13, 2018
rollup.config.js Correct rollup format and update dist May 13, 2018
yarn.lock Add rollup and build config May 13, 2018

README.md

vue-nested-menu Version

A simple hands-on mobile nested menu UI component with a smooth slide animation.

demo

Installation

Yarn / NPM

$ yarn add vue-nested-menu

main.js

import VueNestedMenu from 'vue-nested-menu';

Vue.use(VueNestedMenu);

Usage

Basic

index.html

<div id="app">
  <vue-nested-menu :source="menu"></vue-nested-menu>
</div>

main.js

import VueNestedMenu from 'vue-nested-menu';

Vue.use(VueNestedMenu)

new Vue({
  el: '#app',
  data: {
    menu: {
      title: '首頁',
      children: [
        {
          title: `Today's Deals`,
          link: `/today`,
          children: [],
        },
        {
          title: `Shop By Department`,
          children: [
            {
              title: `Amazon Music`,
              link: `/music`,
              children: [],
            },
            {
              title: `CDs and Vinyl`,
              link: `/cds`,
              children: [],
            },
          ],
        },
      ],
    },
  },
});

Single File Component

app.js

import VueNestedMenu from 'vue-nested-menu';

Vue.use(VueNestedMenu);

// ...

MyMenu.vue

<template>
  <vue-nested-menu :source="menu" />
</template>

<script>
export default {
  data() {
    return {
      menu: {
        // your menu data
      },
    };
  },
};
</script>

Styling

You can use following classes for your own customizations

default style

.Menu__header {
    display: flex;
    align-items: center;
    padding-left: 35px;
    height: 50px;
    color: #fff;
    font-size: 16px;
    background-color: #232f3e;
    cursor: pointer;

    .arrow {
        padding-top: 2px;
        fill: #fff;
        margin-right: 10px;
        width: 10px;
        height: 100%;
        display: flex;
        align-items: center;
    }
}

.Menu__list {
    list-style: none;
    padding-bottom: 2px;

    .separator {
        border-bottom: 1px solid #d5dbdb;
        padding: 2px 0 0 0;
        margin: 0;
    }
}

.Menu__item {
    color: #4a4a4a;
    padding-left: 35px;
    height: 45px;
    display: flex;
    align-items: center;
    cursor: pointer;

    a {
        color: #4a4a4a;
        text-decoration: none;
    }

    .arrow {
        padding-top: 2px;
        padding-left: 15px;
        display: flex;
        align-items: center;
        width: 10px;
        height: 100%;
    }
}
You can’t perform that action at this time.