Menu icon Foundation

Designer | Salt Lake City, Utah

BFA Graphic Design. Working as front-end developer and web consultant for Software Technology Group

My Posts



My Comments

Daniel commented on Daniel's post almost 4 years

Solved my own problem. I had the content nested inside the toggler.

Daniel commented on Brian Tan's post almost 4 years

Has there been any development on this? No warnings would be great.

Daniel commented on Moreno's post almost 4 years

Thanks for your help, Brian and Chris. Running a bower update via command line fixed things right up. Where/when can I look to be notified about updating Yeti Launch so I know it's pulling down the correct version?

Daniel commented on Moreno's post almost 4 years

Looks like mine says 6.0.3

Daniel commented on Daniel's post almost 4 years

By way of update, I just tried using data-options="disableHover: true;" and the option on page load was still false. It seems that the only method that returns desired results is to use the option by name (i.e. data-disable-hover="true"

Daniel commented on Moreno's post almost 4 years

So I think this problem has cropped up again. I just tested it on my own site and then on a fresh spin-up via Yeti Launch. I copied the first example from the Foundation Docs here: http://foundation.zurb.com/sites/docs/top-bar.html and then replaced all the # with http://www.google.com and upon clicking the link in the submenu, nothing happens.

Daniel commented on Daniel's post almost 4 years

Again, thank you for looking into this for me. Just to make sure I had a sterile environment to test this in, I spun up a new static site using Yeti Launch. But the same issue as before is still present. Here is the index page:

<header data-sticky-container>
  <section class="sticky" data-sticky data-stick-to="top" data-margin-top="0" data-margin-bottom="0" data-btm-anchor="the-bottom: bottom">
    <div class="row">
      <div class="small-12">
        <nav class="top-bar" style="z-index: 50;">
          <div class="tob-bar-left">
            <ul class="dropdown menu" id="one-off-dropdown" data-dropdown-menu>
              <li><a href="#">Item One</a></li>
              <li class="has-submenu"><a href="#">Item 2</a>
                <ul class="submenu menu vertical" data-submenu>
                  <li><a href="#">Users</a></li>
                  <li><a href="#">Departments</a></li>
                  <li><a href="#">Security</a></li>
                </ul>
              </li>
              <li><a href="#">Item Three</a></li>
            </ul>
          </div>
        </nav>
      </div>
    </div>
  </section>
</header>

<div id="the-bottom">
 the bottom
</div>

And here is app.js:

 $(document).foundation();

var opts = {disableHover: true, alignment: 'right', closeOnClick: true};
var menu = new Foundation.DropdownMenu($('#one-off-dropdown'), opts);

I added in alignment: 'right' just to more quickly see a visual change, to which there is none. Could it be that the other plugins I'm using (such as top bar) be creating the issue. Or might it be related to what Chris pointed out what shouldn't be in the <ul> tag?

At this point, I'm fine going the way of just listing the options in a data-options string in the <ul>.

Brian, in answer to your question, both ways of using the data attribute in the <ul> work. It's this method of passing them in via app.js that still seems to be an issue.

Daniel commented on Daniel's post almost 4 years

Thanks, Brian, for getting back to me. Your code makes sense to me. I went ahead and plugged that into my app.js file. And while the console log shows that the changes were passed in, the desired settings have not taken effect.

I did notice in the inspector that there was an additional data attribute being added to my <ul> tag like so:

<nav class="top-bar">
  <div class="top-bar-left">
    <ul class="dropdown menu" id="one-off-dropdown" data-dropdown-menu data-dropdownmenu="cn9ggf-dropdownmenu">

And, that data-dropdownmenu has a different value each time I refresh the page. Do I need to remove some things from my <ul> tag?

Posts Followed



  • 2
    Replies
  • Dropdown buttons in F6

    By Allan Jardine

    dropdown f6

    I used the Dropdown Buttons that were available in <a href="http://foundation.zurb.com/sites/docs/v/5.5.3/components/dropdown_buttons.html">Foundation 5</a> to easily create Foundation styled buttons for my <a href="http://datatables.net/extensions/button... (continued)

    Last Reply by Allan Jardine almost 4 years ago


Following

    No Content

Followers

My Posts

My Comments

You commented on Daniel's post almost 4 years

Solved my own problem. I had the content nested inside the toggler.

You commented on Brian Tan's post almost 4 years

Has there been any development on this? No warnings would be great.

You commented on Moreno's post almost 4 years

Thanks for your help, Brian and Chris. Running a bower update via command line fixed things right up. Where/when can I look to be notified about updating Yeti Launch so I know it's pulling down the correct version?

You commented on Moreno's post almost 4 years

Looks like mine says 6.0.3

You commented on Daniel's post almost 4 years

By way of update, I just tried using data-options="disableHover: true;" and the option on page load was still false. It seems that the only method that returns desired results is to use the option by name (i.e. data-disable-hover="true"

You commented on Moreno's post almost 4 years

So I think this problem has cropped up again. I just tested it on my own site and then on a fresh spin-up via Yeti Launch. I copied the first example from the Foundation Docs here: http://foundation.zurb.com/sites/docs/top-bar.html and then replaced all the # with http://www.google.com and upon clicking the link in the submenu, nothing happens.

You commented on Daniel's post almost 4 years

Again, thank you for looking into this for me. Just to make sure I had a sterile environment to test this in, I spun up a new static site using Yeti Launch. But the same issue as before is still present. Here is the index page:

<header data-sticky-container>
  <section class="sticky" data-sticky data-stick-to="top" data-margin-top="0" data-margin-bottom="0" data-btm-anchor="the-bottom: bottom">
    <div class="row">
      <div class="small-12">
        <nav class="top-bar" style="z-index: 50;">
          <div class="tob-bar-left">
            <ul class="dropdown menu" id="one-off-dropdown" data-dropdown-menu>
              <li><a href="#">Item One</a></li>
              <li class="has-submenu"><a href="#">Item 2</a>
                <ul class="submenu menu vertical" data-submenu>
                  <li><a href="#">Users</a></li>
                  <li><a href="#">Departments</a></li>
                  <li><a href="#">Security</a></li>
                </ul>
              </li>
              <li><a href="#">Item Three</a></li>
            </ul>
          </div>
        </nav>
      </div>
    </div>
  </section>
</header>

<div id="the-bottom">
 the bottom
</div>

And here is app.js:

 $(document).foundation();

var opts = {disableHover: true, alignment: 'right', closeOnClick: true};
var menu = new Foundation.DropdownMenu($('#one-off-dropdown'), opts);

I added in alignment: 'right' just to more quickly see a visual change, to which there is none. Could it be that the other plugins I'm using (such as top bar) be creating the issue. Or might it be related to what Chris pointed out what shouldn't be in the <ul> tag?

At this point, I'm fine going the way of just listing the options in a data-options string in the <ul>.

Brian, in answer to your question, both ways of using the data attribute in the <ul> work. It's this method of passing them in via app.js that still seems to be an issue.

You commented on Daniel's post almost 4 years

Thanks, Brian, for getting back to me. Your code makes sense to me. I went ahead and plugged that into my app.js file. And while the console log shows that the changes were passed in, the desired settings have not taken effect.

I did notice in the inspector that there was an additional data attribute being added to my <ul> tag like so:

<nav class="top-bar">
  <div class="top-bar-left">
    <ul class="dropdown menu" id="one-off-dropdown" data-dropdown-menu data-dropdownmenu="cn9ggf-dropdownmenu">

And, that data-dropdownmenu has a different value each time I refresh the page. Do I need to remove some things from my <ul> tag?

Posts Followed

Following

  • No Content

Followers

  • No Content