digitalfondue / df-tab-menu Goto Github PK
View Code? Open in Web Editor NEWAngularJS directive that provides responsive tabs with dropdown menu overflow
License: MIT License
AngularJS directive that provides responsive tabs with dropdown menu overflow
License: MIT License
It will be really nice if you can add accessibility tags for screen readers like JAWS?
Thanks
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"....
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="<span>More +</span>" 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.
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()
.
You could have it on cdnjs.com.
Nice plugin by the way! Thx
Quick fix is too rename reserved directives in foundation "dropdown-toggle" to "df-dropdown-toggle"
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 with 0.3.0 code
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).
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? :)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.