1.0.0 • Published 6 years ago

fmenu v1.0.0

Weekly downloads
4
License
MIT
Repository
github
Last release
6 years ago

fmenu

Installation

npm install

Start Dev Server

npm run dev

Build Prod Version

npm run build

Props

PropertyValuesDefaultDescription
data-fmenu--initialize the fmenu
data-fmenu-dirrtl, ltrltrThe direction of the fmenu
data-fmenu-fixedbooleanfalsemake the fmenu position fixed on screen
data-fmenu-allMobilebooleanfalsemake the fmenu style like mobile all time
data-fmenu-logo"string"logo url-put logo inside the fmenu
data-fmenu-search"string"search url-add search feature to the fmenu
data-fmenu-positionbottom, toptopposition of the fmenu
data-fmenu-verticalbooleanfalsemake the fmenu vertical
data-fmenu-themelondon, paris-change fmenu theme
data-fmenu-login"string"login page url-add login form to the fmenu
data-fmenu-socialobject-add social media icons
data-fmenu-json"string"json url-get fmenu data from json file

How it works

Here is a simple Fmenu setup:

<nav data-fmenu>
  <ul>
    <li><a href="">Item1</a></li>
    <li><a href="">Item2</a></li>
    <li><a href="">Item3</a></li>
    <li><a href="">Item4</a></li>
    <li><a href="">Item5</a></li>
  </ul>
</nav>

Features

Use Fmenu advanced features

<nav data-fmenu data-fmenu-dir="rtl" data-fmenu-fixed="true"
 data-fmenu-logo="https://git-scm.com/images/logos/downloads/Git-Logo-White.png"
  data-fmenu-search="http://google.com" data-fmenu-vertical="true"
   data-fmenu-theme="paris" data-fmenu-login="http://men3m.com"
    data-fmenu-social='{"facebook": "http://fb.me/hello", "instagram":
     "http://instagram.com/hello", "twitter": "http://twitter.com/hello"}'
      data-fmenu-position="top">

  <ul>
    <li><a href="">Item1</a></li>
    <li><a href="">Item2</a></li>
    <li><a href="">Item3</a></li>
    <li><a href="">Item4</a></li>
    <li>
      <a href="">Item5</a>

      <ul>
        <li><a href="">Sub Item1</a></li>
        <li><a href="">Sub Item2</a></li>
        <li><a href="">Sub Item3</a></li>
        <li><a href="">Sub Item4</a></li>
        <li><a href="">Sub Item5</a></li>
      </ul>

    </li>
  </ul>
</nav>