Turn a knack menu view buttons into a drop down menu

This one is a simple one if you want to have a different arrangement for you menu view. This takes your existing menu and turns it into a drop down.

from this…


to this…

One thing you will need to do is you will need to have your custom settings turned on. You could use this in a way to choose if you want the menu to have a drop down

Finally you can set the event view to any and just use the option custom settings to enable or disable.

Javascript

$(document).on('knack-view-render.any, function() {
  var $select = $("<select/>").appendTo(".menu-links");
  $(".menu-links__list-item a").each(function() {
    var $option = $("<option/>");
    $option.val($(this).attr("href")).text($(this).text());
    $select.append($option);
  });
  $select.change(function() {
    window.location = $(this).val();
  });
  $(".menu-links__nav").hide();
});

CSS

.menu-links select {
  padding:10px;
  cursor:pointer;
}
4 Likes

Another great solution :+1:

2 Likes

That’s brilliant thanks will be great for using on mobile and some of our desktop scenes.

Craig

1 Like

Johnny, this is so great but I can’t get it to work in my app! The JS keeps breaking the script overall and never changes the buttons. Any ideas?

1 Like

Hey @Michael23

Great to hear from you. We will be looking into this for you and get back to you as soon as possible for a solution. I see you have left a comment on the post in hand so will reach out to you personally.

Thanks