Dropdown Menu Prototype Using Tachyons CSS and Vue.js

dropdown-menu-prototype-using-tachyons-css-and-vue-js.markdown

Dropdown Menu Prototype Using Tachyons CSS and Vue.js

A Pen by Jesse Sutherland on CodePen.

License.

dropdown-menu-prototype-using-tachyons-css.markdown

Dropdown Menu Prototype Using Tachyons CSS

A Pen by Jesse Sutherland on CodePen.

License.

index.html

<!-- Inspired by www.shopify.ca, Dropdown Navigation Prototype Using Tachyons CSS & Vue.js.-->
<!-- Uses Tachyons CSS and a small override for a responsive CSS dropdown menu. -->
<div class="pa3 bg-light-gray sans-serif">
  <p class="gray">
    This is a prototype for a responsive dropdown navigation menu, using Tachyons CSS to rapidly style the markup in a way similar to the navigation found on www.shopify.ca.  Tachyons is useful in rapid prototyping UI elements. The markup here is just some static filler used for testing.
  </p>
</div>
<nav>
  <ul class="menu list pa3 bg-moon-gray gray sans-serif f5 fw6 ttu tracked">
    <li class="dib ma2 w-100 w-auto-ns bg-red">
      <a href="#" class="dib nav tc no-underline pa3 ph4 bg-white dark-gray w-100">First
      </a>
    </li>
    <li class="dib ma2 bg-white bg-animate hover-bg-light-pink hide-child relative-m relative-l w-100 w-auto-ns">
      <a href="#" class="dib nav tc no-underline pa3 ph4 dark-gray w-100">Second
      </a>
      <ul class="menu list bg-pink mt1 b-yellow pa2 f6 child child-vs o-100-vs absolute-m absolute-l top-100-m w-100 br2 shadow-4">
        <li class="ma1 pa2 ph3 bg-light-pink bg-animate hover-bg-white">
          Sub Item 1
        </li>
        <li class="ma1 pa2 ph3 bg-light-pink bg-animate hover-bg-white">
          Sub Item 2
        </li>
      </ul>
    </li>
  </ul>
</nav>

<div id="vue-example" class="mt5 bg-light-gray sans-serif">
  <p class="gray pa3 pb0 dib">
    This is the same type of menu as the prototype above but executed in Vue JS using components and some data (JSON) to inform the actual menu structure.  Since it uses actual data, in theory it could use a menu structure dynamically supplied by a CMS like WordPress or Drupal.
  </p>
  <fancy-menu v-bind:menus="menus"></fancy-menu>
  <h2 class="f3 ph3">Sample Header</h2>
  <p class="pa3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec nisi in arcu vestibulum aliquam ut at dolor. Nam augue erat, tempor ut magna at, ullamcorper dapibus lectus. Morbi aliquam leo leo, non efficitur sem convallis vel. Donec porttitor consequat porttitor. Donec porttitor, libero eget consequat euismod, est sapien rutrum ligula, nec facilisis turpis lorem a justo. Mauris vel libero nisi. Duis egestas ultrices orci eu cursus. Quisque imperdiet mi at arcu convallis, in volutpat enim feugiat. In sapien sapien, condimentum nec imperdiet a, laoreet in orci. Vestibulum dictum lorem vitae egestas feugiat. Suspendisse potenti. Cras sagittis metus ut mauris congue commodo. Duis lobortis a nisl non sollicitudin. Ut ultricies augue ante, in semper dui imperdiet a.
  </p>
  <p class="pa3">
Cras id varius nisi. Nulla sed nibh vel enim varius commodo. Aenean vulputate, nulla a facilisis condimentum, sapien est auctor magna, et pulvinar eros nibh sed augue. Nulla eu ex luctus, sollicitudin justo id, blandit arcu. Sed neque turpis, dapibus id euismod sed, scelerisque vitae lectus. Duis ultricies egestas sem. Aenean pulvinar id nulla in tempus. Duis sit amet pulvinar mauris. Curabitur tincidunt nibh vitae sem aliquam, fermentum finibus ex feugiat. Fusce vel nisi id libero egestas finibus. In id mattis mauris. Vivamus rhoncus ligula quis ullamcorper mollis. Aenean condimentum rhoncus arcu, vel egestas odio egestas non.
  </p>
</div>

script.js

// Mock menu data. Could be provided by JSON from say WordPress or other CMS.
var menuData = [
  {
    name: 'About Us',
    href: "#about-us",
    children:[ {
      name: "Origin Story",
      href: "#origin",
      children:[],
    }],
  },
  {
    name: 'Pricing',
    href: "#pricing",
    children:[
      {
        name: "Packages"
      }
    ],
  },{
    name: 'Projects',
    href: "#projects",
    children:[
      {
        name: 'Project X',
        href: '#projects-project-x',
      },
      {
        name: 'Project Y',
        href: '#projects-project-y',
      },
      {
        name: 'Project Z',
        href: '#projects-project-Z',
      }
    ],
  },
  {
    name: 'Contact',
    href: '#contact',
    children:[]
  }
];

// Sub menu component.
var fancyMenuSubMenu = {
  props:["children"],
   components: {
    'fancy-menu-child': fancyMenuChild
  },
  template:`
    <ul class="menu list bg-near-white mt1 b-yellow pa1 ph2 f6 child child-vs o-100-vs absolute-m absolute-l top-100-m w-100 br2 shadow-4">
      <li v-for="item in children" :item="item"  class="mv1 pv2 ph3 bg-near-white bg-animate hover-bg-white">
      <a v-bind:href="item.href" class="dib no-underline dark-gray w-100 f7">{{ item.name }}</a>
      </li>
    </ul>
  `
}

// Child component for fancy menu.
var fancyMenuChild = {
  props:['item'],
  components: {
    'fancy-menu-sub-menu': fancyMenuSubMenu
  },
  data: function() {
    // Check if the item has children, add a flag if it does, and so use a sub-menu.
    var hasChildren = this.item.children.length > 0 ? true : false;
    return {hasChildren};
  },
  template: `
          <li class="dib ma2 bg-near-white bg-animate hover-bg-white hide-child relative-m relative-l w-100 w-auto-ns shadow-hover">
            <a v-bind:href='item.href' class="dib nav tc no-underline pa3 ph4 dark-gray w-100">{{ item.name }}</a>
              <fancy-menu-sub-menu v-if="hasChildren"  v-bind:children="item.children "/>
          </li>
        `
}

// Define fancy-menu component.
var fancyMenu = {
  props:['menus'],
  components: {
    'fancy-menu-child': fancyMenuChild
  },
  data: function() {
    // Alter menus into menuItems if necessary.
    return {
      menuItems: this.menus
    }
  },
  template: `
    <nav>
      <ul class="menu list pa3 bg-moon-gray gray sans-serif f5 fw6 ttu tracked">
        <fancy-menu-child v-for="item in menus" :item="item"/>
      </ul>
    </nav>`
};

// Create instance of Vue.
var vueExample = new Vue({
  el: '#vue-example',
  data: function() {
   return {
      title: 'Vue Menu',
      menus: menuData
    }
  },
  components: {
    'fancy-menu': fancyMenu
  }
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>

style.css

/*
 * Inspired partially from unreleased Tachyons v 5.0 opacity addons
*/
@media screen and (max-width:30em) {
.o-100-vs,
div .o-100-vs,
.child-vs.o-100-vs {
  opacity: 1;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/tachyons/4.9.1/tachyons.css" rel="stylesheet" />