0

I have this dilemma, I have to make a menu, the basic estructure is four to six main menu items and each one can have N level 2 menus and each sub menu can also have subs.

I get from the server this html two ul like this one:

<ul>
   <li> <a>Normal link</a></li>
   <li> 
       <a> </a>
       <ul> this is other level of menus</ul>
   </li>
</ul>

The first list I get just contains the main menu items, the second one all the sub levels.

It has to be presented something like this: enter image description here

Each time the user click the main menu items, the sub level lists appear, when a sub level menu is clicked the next level appears below the active one.

This basic structure is not that complex I just take with Javascript all the "sub level N" items and each 3 menu items (in each level) I add a new <li> where i move all containing the next levels <ul> and show/hide them using related classes and attributes, something like:

<ul>
  <li></li>
  <li class="i-am-for-X></li>
  <li></li>
  <li class="here-are-my-next-level-items">
      <ul></ul>
      <ul class="i-am-x"></ul>
      <ul></ul>
  </li>
  <li></li>
  <li class="here-are-my-other-next-level-items">
</ul>

My problem comes now, I was required that the menu class should had a method that changes the number of cols per sub menus (to be used in some viewport breakpoints). This means theoretically my i-am-x can be after the 3rd <li> as in my above example as it could be after the 4th or the Xth so I need the same content in multiple places, as far as I can see I have only two options: Clone them or move them.

If I clone them, I will do this after my eventlisteners are in place and after the page is loaded and let the css handle the show and hide with javascript just for change the classes needed.

If I move them, I have to make this after the page is loaded on each breakpoint. I think this could be more disturbing for the user and the responsiveness.

I am not sure If I am not seeing another option and/or more problems related to this options and I am not sure which one has better performance.

Thanks in advance for your input!

0

My problem comes now, I was required that the menu class should had a method that changes the number of cols per sub menus (to be used in some viewport breakpoints). This means theoretically my i-am-x can be after the 3rd <li> as in my above example as it could be after the 4th or the Xth so I need the same content in multiple places.

You know these things up front:

  • The number of breakpoints
  • The markup needed at each breakpoint
  • The style rules needed at each breakpoint

Performance wise, generating different CSS for the same markup would be one option. For example:

$breakpoints: (
  small: 320px,
  medium: 480px,
  large: 960px,
  xlarge: 1200px
);

@mixin bp($name) {
    @if not map-has-key($breakpoints, $name) {
        @warn "Invalid breakpoint `#{$name}`.";
    } @else {
        @if map-get($breakpoints, $name) {
            @media (min-width: map-get($breakpoints, $name)) {
                @content;
            }
        } @else {
            @content;
        }
    }
}

CSS-wise, use grid-template-columns and content to programmatically control the number of columns and the content respectively.

References

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.