Menu icon Foundation

Designer | Weert

Worked with foundation 5, trying to move to foundation 6

My Posts





My Comments

Jos Kelleners commented on Jos Kelleners's post almost 4 years

The documentation about the accordion menu has been improved since 6.2.
I can now switch accordion on and off and that solves my problem.

Jos Kelleners commented on Adam's post almost 4 years

I was trying to do a destroy of an accordion object. but I cannot get this to work either. Would be nice to have a simple example.

Jos Kelleners commented on Jos Kelleners's post almost 4 years

Yes, The list is normally in 4 columns (for medium) on small all those links are above each other. The result is a very high footer. You don't want that. Thats why I am looking for a way to create an accordion from an existing structure and back again. The destroy method and the "create" method could solve it that 's why Iám looking for an example.

Jos Kelleners commented on Jos Kelleners's post almost 4 years

I did quite some work to find why the positioning did not work. Finally thing are Oke now.

First I implemented:

https://github.com/zurb/foundation-sites/issues/8124

Then there is a small difference between foundation 5 and foundation 6.

Foundation 5 needs 'href="#" in the reveal call, if you use this in foundation 6 you will have the problem as described in an earlier post.

It would be nice to have an overview of the differences between foundation 5 and foundation 6.

808080

Jos Kelleners commented on Jos Kelleners's post almost 4 years

When doing some further investigation, I found an article about the subject:
https://github.com/zurb/foundation-sites/issues/8124
When I corrected the code according this article the popup positioned well. However the V Position calculated by the software incorporates the window offset.
After popup the window is shifted down (left corner body on left corner screen) and my popup is moved off the screen again.
I think this haas to do with this code:

 // handle accessibility
    this.$element.attr({'aria-hidden': false}).attr('tabindex', -1).focus()
    /**
     * Fires when the modal has successfully opened.
     * @event Reveal#open
     */
                 .trigger('open.zf.reveal');

    $('body').addClass('is-reveal-open')

Does somebody know for what reason the window shifts down after popup, I did not have this problem on Foundation 5.

Jos Kelleners commented on Jos Kelleners's post almost 4 years

Hello,

I found a solution, maybe it is not the most elegant one but I can live with it and continue the project until ZURB corrects the code.
I folloed the solution as described in:
https://zurb.com/expo/lessons/how-to-re-create-top-bar-with-foundation-6.
Then corrected the position from the dropdown and changed the arrow class.

.is-dropdown-submenu.first-sub {
top: 30px;  
left: 0%;  
}
   <script>
  $(function(){
    $(".medium-horizontal>.is-dropdown-submenu-parent.is-right-arrow").removeClass("is-right-arrow").addClass('is-down-arrow'); 
  });
  $( window ).resize(function() {
   $(".medium-horizontal>.is-dropdown-submenu-parent.is-right-arrow").removeClass("is-right-arrow").addClass('is-down-arrow'); 
});
   </script>

Posts Followed


Following

    No Content

Followers

My Posts

My Comments

You commented on Jos Kelleners's post almost 4 years

The documentation about the accordion menu has been improved since 6.2.
I can now switch accordion on and off and that solves my problem.

You commented on Adam's post almost 4 years

I was trying to do a destroy of an accordion object. but I cannot get this to work either. Would be nice to have a simple example.

You commented on Jos Kelleners's post almost 4 years

Yes, The list is normally in 4 columns (for medium) on small all those links are above each other. The result is a very high footer. You don't want that. Thats why I am looking for a way to create an accordion from an existing structure and back again. The destroy method and the "create" method could solve it that 's why Iám looking for an example.

You commented on Jos Kelleners's post almost 4 years

I did quite some work to find why the positioning did not work. Finally thing are Oke now.

First I implemented:

https://github.com/zurb/foundation-sites/issues/8124

Then there is a small difference between foundation 5 and foundation 6.

Foundation 5 needs 'href="#" in the reveal call, if you use this in foundation 6 you will have the problem as described in an earlier post.

It would be nice to have an overview of the differences between foundation 5 and foundation 6.

808080

You commented on Jos Kelleners's post almost 4 years

When doing some further investigation, I found an article about the subject:
https://github.com/zurb/foundation-sites/issues/8124
When I corrected the code according this article the popup positioned well. However the V Position calculated by the software incorporates the window offset.
After popup the window is shifted down (left corner body on left corner screen) and my popup is moved off the screen again.
I think this haas to do with this code:

 // handle accessibility
    this.$element.attr({'aria-hidden': false}).attr('tabindex', -1).focus()
    /**
     * Fires when the modal has successfully opened.
     * @event Reveal#open
     */
                 .trigger('open.zf.reveal');

    $('body').addClass('is-reveal-open')

Does somebody know for what reason the window shifts down after popup, I did not have this problem on Foundation 5.

You commented on Jos Kelleners's post almost 4 years

Hello,

I found a solution, maybe it is not the most elegant one but I can live with it and continue the project until ZURB corrects the code.
I folloed the solution as described in:
https://zurb.com/expo/lessons/how-to-re-create-top-bar-with-foundation-6.
Then corrected the position from the dropdown and changed the arrow class.

.is-dropdown-submenu.first-sub {
top: 30px;  
left: 0%;  
}
   <script>
  $(function(){
    $(".medium-horizontal>.is-dropdown-submenu-parent.is-right-arrow").removeClass("is-right-arrow").addClass('is-down-arrow'); 
  });
  $( window ).resize(function() {
   $(".medium-horizontal>.is-dropdown-submenu-parent.is-right-arrow").removeClass("is-right-arrow").addClass('is-down-arrow'); 
});
   </script>

Posts Followed

Following

  • No Content

Followers

  • No Content