In-Form Dropdown Menu Buttons

How to condense a Knack Menu into a categorized Dropdown Menu on each web page

Example from the Mobility Services Portal - Operating Authority Form

The JS

There's customization that needs to go into the code before you can get it working in your app

Line 4-9: Links to the Page URL

Lines 13-20: Creates a dictionary in the format

{view_id_1: "Name of Menu Item 1",view_id_2: "Name of Menu Item 2", etc.}

Line 35: Same as Line 6 but modified.

Line 38-63: Calls the dropdownMenuItem(recordId,route,linkName) function in line 4 per dropdown menu item in Desktop

Line 72-96: Calls the dropdownMenuItem(recordId,route,linkName) function in line 4 per dropdown menu item in mobile screen sizes for min-width is 152px;

/****************************************/
/*** Dropdown Menu Buttons Navigation ***/
/****************************************/
function dropdownMenuItem(recordId, route, linkName) {
  return `<li class="kn-button">\
      <a href="#application-operating-authority/business-information/${recordId}/${route}/${recordId}">\
        <span>${linkName}</span>\
      </a>\
    </li>`;
}

// Dictionary of views needing dropdown menu in editable Operating Authority (OA) pages
var viewNameOA = {
  687: "1 - Service Type",
  750: "2 - Business Information",
  689: "3 - Insurance",
  691: "4 - Authorized Person",
  693: "5 - Vehicle Information",
  695: "6 - Review and Submit",
};

for (let key in viewNameOA) {
  $(document).on(
    "knack-view-render.view_" + key,
    function (event, view, record) {
      var recordId = view.scene.scene_id;
      var currentMenu = viewNameOA[key];

      /* Desktop Operating Authority Page */
      $(`<div class="details-dropdown-menu tabs">\
      <ul id="desktop-menu-list">\
        <li class="desktop-dropdown-menu kn-dropdown-menu kn-button">\
        <a><span class="nav-dropdown-link">${currentMenu}</span>\
          <span class="kn-dropdown-icon fa fa-caret-down" /></a>\
          <a href="#application-operating-authority/service-type/${recordId}/service-type/${recordId}" data-kn-slug="#application-operating-authority">\
          </a>\
          <ul class="kn-dropdown-menu-list desktop-dropdown-menu-list" style="min-width: 152px; margin: 0;">\
            ${dropdownMenuItem(
              recordId,
              "service-type",
              "1 - Service Type"
            )}\
            ${dropdownMenuItem(
              recordId,
              "business-information",
              "2 - Business Information"
            )}\
            ${dropdownMenuItem(recordId, "insurance", "3 - Insurance")}\
            ${dropdownMenuItem(
              recordId,
              "authorized-person",
              "4 - Authorized Person"
            )}\
            ${dropdownMenuItem(
              recordId,
              "vehicle-information",
              "5 - Vehicle Information"
            )}\
            ${dropdownMenuItem(
              recordId,
              "review-and-submit",
              "6 - Review and Submit"
            )}\
          </ul>\
    </div><br>`).appendTo("#view_" + key);

      /* Mobile Operating Authority Page */
      $(`<div class="mobile-details-dropdown-menu">\
    <ul id="mobile-menu-list">\
      <li class="mobile-dropdown-menu">\
        <ul class="desktop-dropdown-menu-list" style="min-width: 152px; margin: .5em;">\
          ${dropdownMenuItem(
            recordId,
            "service-type",
            "1 - Service Type"
          )}\
            ${dropdownMenuItem(
              recordId,
              "business-information",
              "2 - Business Information"
            )}\
            ${dropdownMenuItem(recordId, "insurance", "3 - Insurance")}\
            ${dropdownMenuItem(
              recordId,
              "authorized-person",
              "4 - Authorized Person"
            )}\
            ${dropdownMenuItem(
              recordId,
              "vehicle-information",
              "5 - Vehicle Information"
            )}\
            ${dropdownMenuItem(
              recordId,
              "review-and-submit",
              "6 - Review and Submit"
            )}\
      </li>\
    </ul>\
  </div><br>`).appendTo("#view_" + key);
    }
  );
}

The CSS

We style the menu buttons to be similar to how the default Knack styling is. We also hide the original menu view if screen size is 770px or larger but hide our custom dropdown menu on smaller screens. This allows for easier navigation on mobile without the dropdowns, but also easier navigation on desktop with the dropdowns.

/****************************************/
/*** Dropdown Menu Buttons Navigation ***/
/****************************************/

/* hide custom menu if on mobile */
@media (max-width: 770px) {
  #desktop-menu-list {
    display: none;
  }
}

/* hide knack menu buttons if on desktop */
@media (min-width: 770px) {
  #mobile-menu-list {
    display: none;
  }
}

/*list, list item, and button stylings*/
#desktop-menu-list {
  border-bottom: 0 !important;
}

#desktop-menu-list li {
  margin-right: 0.5em;
  box-shadow: 0px 2px 4px 0px gray;
}

#desktop-menu-list .kn-button a {
  color: #163f6e;
  font-size: 1.1em;
  border-bottom: 0;
  padding-top: 3px;
}

.desktop-dropdown-menu-list .kn-button {
  border-radius: 1px;
}

.desktop-dropdown-menu-list li {
  border: 0;
  margin-right: 0 !important;
}

.desktop-dropdown-menu-list li:hover {
  background-color:#ebebeb;
}

/*Mobile list, list item, and button stylings*/
.mobile-details-dropdown-menu ul {
  margin-left: .25em;
}

#mobile-menu-list {
  list-style-type: none;
  margin: 0;
} 

#mobile-menu-list li {
  margin-top:5px;
} 

#mobile-menu-list ul {
  list-style-type: none;
}

#mobile-menu-list .kn-button a {
  padding: 5px;
  text-decoration: none;
}

.mobile-dropdown-menu span {
  margin-top: .25em;
  color: #163f6e;
}

.mobile-dropdown-menu-list {
  margin-top: 1em;
}

.mobile-dropdown-menu-list.active {
  display: inherit;
}