Menu icon Foundation
add links to content dropdown

2015 03 18 1614

want to have links in content drop down like in image attached but when i add link and open dropdown and by clickign anywhere within in content dropdown get closed

so if i have form in dropdown and link button i can't fill form fields as soon as i click in input it get closed

can someone help with this issue

dropdownfoundation5

2015 03 18 1614

want to have links in content drop down like in image attached but when i add link and open dropdown and by clickign anywhere within in content dropdown get closed

so if i have form in dropdown and link button i can't fill form fields as soon as i click in input it get closed

can someone help with this issue

This post has been closed. No new replies can be added.

Rafi Benkual over 4 years ago

This is desired behavior since the link is meant to take you to another page, or on a single page app, you'd want it to close after a link is selected.

There is a built in method to disable autoclose

  <a class="button" data-dropdown="autoCloseExample" aria-controls="autoCloseExample" aria-expanded="false">Link Dropdown &raquo;</a>
  <ul id="autoCloseExample" class="f-dropdown" data-dropdown-content tabindex="-1" aria-hidden="true" aria-autoclose="false" tabindex="-1">
    <li><a href="#">This is a link</a></li>
    <li><a href="#">This is another</a></li>
    <li><a href="#">Yet another</a></li>
  </ul>

Yasir over 4 years ago

Thanks a lot Rafi,

Yes link is meant to take user to another page but it should't close by click inside content elsewhere.

it get close even if i click anywhere inside content :( i have form in dropdown content and when i try to input it get close is there any solution for this other than auto close false ? it should auto close if i click outside anywhere.

Yasir over 4 years ago

here is codepen http://codepen.io/yasirhaleem/full/jEXWge/

i think its bug with version 5.5.1 it works fine if i use 5.1.1

Yasir over 4 years ago

where i can get the custom version of 5.1.1 ?

Rafi Benkual over 4 years ago

Sorry, I still don't see how the answer provided above doesn't help you. I modified your codepen with the autoclose http://codepen.io/rafibomb/pen/PwXbje

Now you can type in the form elements and click outside the dropdown to close. If you want the go button to close the dropdown, some jQuery will take care of that.

Older custom versions can be downloaded here: http://download.foundation5.zurb.com/

Yasir over 4 years ago

Thanks a lot Rafi