Menu icon Foundation
Semantic dropdown menu.

Hello Foundation users.

I'm enjoying Foundation 6, and I'd like to take full advantage of it's semantic features.
I'd like to build a dropdown menu without using the presentational classes from the framework. From the documentation, I'm reading the javascript references in order to assign the dropdown js function to an element, but not being very good at javascript, I'm encountering some difficulties.

Also, the link on the page "Learn more about how JavaScript plugins are initialized." is an anchored to #, I thought I could find some informations in it but it doesn't work :(

javascriptdropdownmenusites

Hello Foundation users.

I'm enjoying Foundation 6, and I'd like to take full advantage of it's semantic features.
I'd like to build a dropdown menu without using the presentational classes from the framework. From the documentation, I'm reading the javascript references in order to assign the dropdown js function to an element, but not being very good at javascript, I'm encountering some difficulties.

Also, the link on the page "Learn more about how JavaScript plugins are initialized." is an anchored to #, I thought I could find some informations in it but it doesn't work :(

Brian Tan almost 4 years ago

Ref http://foundation.zurb.com/sites/docs/dropdown.html

Say you define a dropdown element

<div id="mydropdown" class="dropdown-pane" data-dropdown>
  Just some junk that needs to be said. Or not. Your choice.
</div>

To call Dropdown.open function, do this:

 <script>
$("#mydropdown").foundation('open');
</script>

To bind show.zf.Dropdown event, and for example add a class ".top" for positioning:

 <script>
$("#mydropdown").on("show.zf.dropdown", function() {
  $("#mydropdown").addClass("top");
});
</script>

plugin options are markup as such:

data-options="vOffset:10; hover:true;"

or individually as

data-v-offset="10" data-hover="true"

Hope this helps.

baglio over 3 years ago

Omg, Brian, I'm so sorry. Is been forever since you tried to help me; I've somehow missed the notification. :(

I have eventually learned how to do that via trial and error. At first, nothing seemed to work, but it was because I had some problems with the template, and gulp didn't process js correctly.

Sorry again for not answering you in such a long time :(. 

Brian Tan over 3 years ago

Nice to hear from you again. Glad that you are doing ok with Foundation. Cheers!

baglio over 3 years ago

Sure. Thank you again. Have a nice day. 

wijnaldumwilliam over 3 years ago

 

Desktop (regular monitor, Linux):

  • ✓ Firefox
  • ✓ Chrome

Touchscreen Laptop (Win8)

  • ✓ Firefox
    • "ontouchstart" in window === false
  • ✗Chrome
    • "ontouchstart" in window === true

On Chrome and Firefox I can open it with touch. Perhaps there's a way to check for lack of a mouse, rather than presence of touch? For example, when the page first loads, we add a listener for mousemove. If the mouse moves once, we remove the handler and remember that a mouse is present. I don't know of a device with a mouse and touchscreen that doesn't generate "click" events for a tap on the screen.

Note: that mousedown/up/move isn't triggered on touch devices usually; just click. We can safely bind events to those events and touchstart/drag/end. There may be some exceptions, which is why we need throttling 
in many areas of the library. We could pull a debounce method from underscore/lodash.

 

Ex:

 

<div class="ui dropdown"> <div class="text">File</div> <i class="dropdown icon"></i> <div class="menu"> <div class="item">New</div> <div class="item"> <span class="description">ctrl + o</span> Open... </div> <div class="item"> <span class="description">ctrl + s</span> Save as... </div> <div class="item"> <span class="description">ctrl + r</span> Rename </div> <div class="item">Make a copy</div> <div class="item"> <i class="folder icon"></i> Move to folder </div> <div class="item"> <i class="trash icon"></i> Move to trash </div> <div class="divider"></div> <div class="item">Download As...</div> <div class="item"> <i class="dropdown icon"></i> Publish To Web <div class="menu"> <div class="item">Google Docs</div> <div class="item">Google Drive</div> <div class="item">Dropbox</div> <div class="item">Adobe Creative Cloud</div> <div class="item">Private FTP</div> <div class="item">Another Service...</div> </div> </div> <div class="item">E-mail Collaborators</div> </div> </div>