In-Form Dropdown Menu Buttons

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

Desktop Example from the Mobility Services Portal - Operating Authority Form

Mobile 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 6-13: Links to the Page slug and creates a dictionary in the format

  • {"view_id" : ["Dropdown Menu Label", "page-slug"],etc...}

• Line 17-24: Creates the dropdownMenuItem(slug, recordId, route, linkName) format

• Line 27-47: Wraps the drop down menu based on the dictionary listing the Rich Text Views being replaced with dropdown menus.

  • Line 32-37: Creates HTML string using the dropdownMenuItem(recordId,route,linkName) function in line 4 per dropdown menu item in desktop.

  • Line 40-42: Creates HTML string using the dropdownMenuItem(recordId,route,linkName) function in line 4 per dropdown menu item in mobile screen sizes for min-width is 152px.

  • Line 45-47: Calls to render the dropdown menu item for desktop and mobile version using dropdownMenuItem(recordId,route,linkName)

/****************************************/
/**** In-Form Dropdown Menu Buttons  ****/
/****************************************/
// Define dictionary of views needing dropdown menu in editable Operating Authority (OA) pages
// Format is {"view_id" : ["Dropdown Menu Label", "page-slug"],etc...}
var dropdown = {
  "view_687": ["1 - Service Type", "service-type"],
  "view_750": ["2 - Business Information", "business-information"],
  "view_689": ["3 - Insurance", "insurance"],
  "view_691": ["4 - Additional People", "additional-people"],
  "view_693": ["5 - Vehicle Information", "vehicle-information"],
  "view_695": ["6 - Review and Submit", "review-and-submit"]
};

var knSlug = "#application-operating-authority";

// Function that returns the dropdown menu item
function dropdownMenuItem(slug, recordId, route, linkName) {
  var buttonItem = `<li class="kn-button">\
      <a href="${slug}/${route}/${recordId}/">\
        <span>${linkName}</span>\
      </a></li>`;
  return buttonItem;
}

for (let v in dropdown) {
  $(document).on(`knack-view-render.${v}`, function (event, view, record) {         
    var recordId = view.scene.scene_id; 
    var currentMenu = dropdown[v][0];   // "Dropdown Menu Label"
    var currentSlug = dropdown[v][1];   // "page-slug"

    // Desktop dropdown menu code
    var desktopDropdownMenu = `<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="${knSlug}/${currentSlug}/${recordId}" data-kn-slug="${knSlug}"></a>\
      <ul class="kn-dropdown-menu-list desktop-dropdown-menu-list" style="min-width: 152px; margin: 0;">`;

    // Mobile dropdown menu code
    var mobileDropdownMenu = `<div class="mobile-details-dropdown-menu">\
    <ul id="mobile-menu-list"><li class="mobile-dropdown-menu">\
    <ul class="kn-dropdown-menu-list mobile-dropdown-menu-list" style="min-width: 152px; margin: 0;">`;

    // Adds dropdown menuu item to desktop and mobile
    for (let label in dropdown) {
      desktopDropdownMenu += `${dropdownMenuItem(knSlug,recordId,dropdown[label][1],dropdown[label][0])}`;
      mobileDropdownMenu += `${dropdownMenuItem(knSlug,recordId,dropdown[label][1],dropdown[label][0])}`;

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;
}