digitalfondue/df-tab-menu

AngularJS directive that provides responsive tabs with dropdown menu overflow

df-tab-menu's Issues

[Feature request] Accessibility on the tabs?

It will be really nice if you can add accessibility tags for screen readers like JAWS?
Thanks

Flexibility of choosing OL or UL tag in the template

Hi,
As the OL tag is used for main menu which semantically not right if one want to use UL if the tabs are unordered.
Will it be possible to provide more flexibility defining something like below example or something else?
data-df-tab-menu
ul or ol
li menu-item="tab1"....

Placing the df-tab-menu tabs inside another list breaks formatting...

Trying to use the df-tab-menu inside another <ul> or <ol> list causes formatting issues (actually breaks the formatting).

Reproducing the fault
Use the html source from the existing Static menu example from the df-tab-menu demo webpage (http://digitalfondue.ch/df-tab-menu/#) and place inside a list.

e.g.

<ul>
  <li>

    <!-- BEGIN Existing Code for Static menu example -->

    <data-df-tab-menu menu-control="{{navigationState}}" more-menu-template="<span>More +</span>">
      <li menu-item="home"><a data-ng-href="#" data-ng-click="navigationState = 'home'"><span>Home</span></a></li>
      <li menu-item="products"><a data-ng-href="#" data-ng-click="navigationState = 'products'"><span>Products</span></a></li>
      <li menu-item="gallery"><a data-ng-href="#" data-ng-click="navigationState = 'gallery'"><span>Gallery</span></a></li>
      <li menu-item="sustainability"><a data-ng-href="#" data-ng-click="navigationState = 'sustainability'"><span>Sustainability</span></a></li>
      <li menu-item="innovation"><a data-ng-href="#" data-ng-click="navigationState = 'innovation'"><span>Innovation</span></a></li>
      <li menu-item="blog"><a data-ng-href="#" data-ng-click="navigationState = 'blog'"><span>Blog</span></a></li>
      <li menu-item="contactus"><a data-ng-href="#" data-ng-click="navigationState = 'contactus'"><span>Contact Us</span></a></li>
      <li menu-item="about"><a data-ng-href="#" data-ng-click="navigationState = 'about'"><span>About</span></a></li>
    </data-df-tab-menu>

    <p>navigation state: {{navigationState}}</p>

    <!-- END Existing Code for Static menu example -->

  </li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

When the HTML renders you get...

<ul>
  <li>
    <data-df-tab-menu more-menu-template="&lt;span&gt;More +&lt;/span&gt;" menu-control="home">
      <ol main-menu="" class="df-tab-menu">
        <li more-menu-item="" class="ng-hide"><a dropdown-toggle="" href="" class=""><span>More +</span></a><ul class="df-tab-menu-dropdown" more-menu=""></ul>
        </li>
      </ol>
    </data-df-tab-menu>
  </li>
  <li menu-item="home"><a data-ng-click="navigationState = 'home'" data-ng-href="#" href="#"><span>Home</span></a></li>
  <li menu-item="products"><a data-ng-click="navigationState = 'products'" data-ng-href="#" href="#"><span>Products</span></a></li>
  <li menu-item="gallery"><a data-ng-click="navigationState = 'gallery'" data-ng-href="#" href="#"><span>Gallery</span></a></li>
  <li menu-item="sustainability"><a data-ng-click="navigationState = 'sustainability'" data-ng-href="#" href="#"><span>Sustainability</span></a></li>
  <li menu-item="innovation"><a data-ng-click="navigationState = 'innovation'" data-ng-href="#" href="#"><span>Innovation</span></a></li>
  <li menu-item="blog"><a data-ng-click="navigationState = 'blog'" data-ng-href="#" href="#"><span>Blog</span></a></li>
  <li menu-item="contactus"><a data-ng-click="navigationState = 'contactus'" data-ng-href="#" href="#"><span>Contact Us</span></a></li>
  <li menu-item="about"><a data-ng-click="navigationState = 'about'" data-ng-href="#" href="#"><span>About</span></a></li>

  <p class="ng-binding">navigation state: home</p>

  <li>List item 2</li>
  <li>List item 3</li>
</ul>

The problem is that the "menu-item" li elements get appended to the outer list and not inside the data-df-tab-menu ol list.

Dynamically added menu items are not considered on resize

With a menu with the following markup (much is simplified and removed to make it more readable):

df-tab-menu more-menu-template="<span>More +</span>"
  li menu-item="All"
    a href=""
      span All
  li menu-item="{{tag.slug}}" ng-repeat="tag in allTags"
    a href=""
      span {{tag.name}}

The compile function in the directive only counts a single element (the 'All' item) and count and elements do not include the dynamically added items.
I've tried adding an ng-if to only add the menu to the dom once allTags is available, but that results in a delayed menu load, then showing all menu options.

I've worked around this by recalculating count, maxWidth and running getElementsSize() inside buildMenu().

cdnjs

You could have it on cdnjs.com.
Nice plugin by the way! Thx

ng-show and ng-hide are not working on <li> elements

Does not work with angularjs foundation

Quick fix is too rename reserved directives in foundation "dropdown-toggle" to "df-dropdown-toggle"

"data-menu-item" attribute is not supported

Using the HTML5 data-* prefix on this attribute breaks the directive. The selected tab is not indicated, and the dropdown does not appear.

update example branch

update example branch with 0.3.0 code

there is no 'src' folder when installing the package from bower

Possible issue with Angular 1.3.7

Great job on this directive! Love the concept. We just upgraded to angular 1.3.7 and the dropdown menu on collapse has stopped showing (Was working great on 1.2).

Feature Request: No default tab 'open'...

Would it be possible, could it be possible to be able to initiate a df-tab-menu but without having a tab active as default?

I.e. all the tab content panels start closed until you click on one of the tabs?

I've tried initiating a data-df-tab-menu but without setting the data-ng-init but that just renders all the tabs and the 'more' functionality doesn't get fired.

Any chance this functionality could be implemented? Pretty please? :)