https://github.com/annotationsro/ember-dynamic-menu

Dynamic horizontal menu, that shows dropdown button when neccesary.
https://github.com/annotationsro/ember-dynamic-menu

hacktoberfest

Last synced: about 1 month ago
JSON representation

Dynamic horizontal menu, that shows dropdown button when neccesary.

• Host: GitHub
• URL: https://github.com/annotationsro/ember-dynamic-menu
• Owner: AnnotationSro
• License: mit
• Created: 2016-10-22T19:11:29.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2022-10-02T11:10:37.000Z (about 2 years ago)
• Last Synced: 2024-04-09T14:25:52.260Z (9 months ago)
• Topics: hacktoberfest
• Language: JavaScript
• Homepage:
• Size: 1.77 MB
• Stars: 0
• Watchers: 2
• Forks: 1
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# Ember-dynamic-menu

[![Build Status](https://travis-ci.org/AnnotationSro/ember-dynamic-menu.svg?branch=master)](https://travis-ci.org/AnnotationSro/ember-dynamic-menu)

Mobile friendly horizontal menu - on wide enough screens it shows all the menu items side-by-side, but once the screen (window width) is not able to show all the menu items, dropdown button is show.

You can assign a priority to each menu item - menu item with the lowest priority will be hidden first.

## WARNING

This package is no longer maintained!

## Install

Compatibility

------------------------------------------------------------------------------

* Ember.js v3.20 or above

* Ember CLI v3.20 or above

* Node.js v12 or above

Installation

------------------------------------------------------------------------------

```

ember install ember-dynamic-menu

```

## Usage

```

{{#dynamic-menu dropdownButtonWidth=50 position='bottom' dropdownIconClasses='fa fa-caret-down' dropdownTitle='more'}}

  {{#dynamic-menu-item priority=5}}

    {{!-- any template you want for a menu item --}}

    


      Press me!

    

  {{/dynamic-menu-item}}


  {{#dynamic-menu-item priority=1}}

    {{!-- any template you want for a menu item --}}

    


      Press me #2!

    

  {{/dynamic-menu-item}}


{{/dynamic-menu}}  

```

Note that each menu item *must* have the same width. To specify dropdown button width use `dropdownButtonWidth` property (see example above).

You can also specify position of the menu, using property `position` which can be either `top` or `bottom` (default).

To customize the dropdown button, you can add any CSS classes to the dropdown button using property `dropdownIconClasses` - you can add FontAwesome, glypicons, Icomoon icons or whatever you like. You can also add aditional text that will be show under the icon using `dropdownTitle` property.

To make space between menu items equally distributed, you can use `enableAutoSpacing` (true|false) to enable it (true by default) - just beware: your browser must support flexbox.

## Styling

```

.dynamic-menu-container{

    background-color: red;

}

.dropdown-button{

  width: 50px;

  height: 50px;

  background-color: blue;

  display: inline-block;

}

#dynamic-dropdown{

  background-color: orange;

}

```