Custom mobile menus using Liquid

Liquid is a versatile, open-source template language that is used in platforms like Power Pages (formerly PowerApps Portals) for rendering dynamic content. It can be utilized to create custom mobile menus, providing the flexibility to adapt the portal’s user interface (UI) based on the screen size, and ensure a smooth, mobile-first experience.

In this guide, we’ll walk you through the steps to design a custom mobile menu using Liquid and CSS for your Power Pages portal.

Step 1: Plan Your Mobile Menu Design

The first step in creating a custom mobile menu is deciding how it should appear and function. Mobile menus can be:

Hamburger Menus: A popular option where three horizontal lines are used to represent a hidden menu.
Slide-in Menus: A menu that slides in from the side, typically triggered by a button.
Bottom Navigation Bars: A fixed bar with key menu items at the bottom of the screen.

Considerations for Mobile Menus:

Minimal Design: Focus on presenting the most important sections or links.
Easy to Use: Ensure that the menu items are large enough to tap and that the menu is accessible with minimal effort.
Visibility: Ensure it is clear to the user where the menu is located, usually at the top or bottom of the page.

Step 2: Implementing Liquid Logic to Render the Menu

Liquid allows you to dynamically render the mobile menu by accessing the portal’s data, such as site navigation or specific content. For this example, we will use Liquid to render a simple hamburger menu based on the portal’s navigation structure.

2.1. Define the Menu Structure

To create the mobile menu, first, ensure that you have a Site Map configured in Power Pages, which contains all the necessary pages and sections. Liquid can access the Site Map, and we’ll dynamically generate the menu based on it.

{% assign menu_items = site.navigation.menu_items %}

This assigns all the menu items from the navigation to the menu_items variable.

2.2. Loop Through Menu Items

Now that we have the menu_items array, we can loop through it to display each item as part of the menu.

<ul class="mobile-menu">
  {% for item in menu_items %}
    <li><a href="{{ item.url }}">{{ item.title }}</a></li>
  {% endfor %}
</ul>

This loop will create an unordered list (<ul>) with each menu item inside a list item (<li>). The {{ item.url }} links to the page, and {{ item.title }} displays the title of the menu item.

2.3. Add a Hamburger Button

Next, let’s create the button to toggle the visibility of the menu. This button will be visible only on mobile devices.

liquidCopyEdit<button class="hamburger-menu" onclick="toggleMenu()">☰</button>

This button contains a simple ☰ icon (which represents the hamburger menu) and an onclick attribute that will trigger the toggleMenu() function, which we will define next in JavaScript.

Step 3: Use CSS for Mobile Responsiveness

The next step is to style the menu using CSS. You want to ensure that the menu is hidden by default on mobile and only appears when the user clicks the hamburger button. Here’s an example of CSS to style the menu:

3.1. Basic Mobile Menu Styles

/* Hide the menu on mobile */
.mobile-menu {
  display: none;
  background-color: #333;
  position: fixed;
  top: 0;
  right: 0;
  width: 250px;
  height: 100%;
  overflow-y: auto;
  z-index: 9999;
}

/* Mobile menu item styles */
.mobile-menu li {
  list-style: none;
  padding: 15px;
  border-bottom: 1px solid #444;
}

.mobile-menu li a {
  text-decoration: none;
  color: white;
  font-size: 18px;
}

/* Hamburger icon for mobile devices */
.hamburger-menu {
  font-size: 30px;
  background: none;
  border: none;
  color: #333;
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 10000;
}

/* Styles for when the menu is visible */
.mobile-menu.show {
  display: block;
}

3.2. Mobile Menu Toggle Logic with JavaScript

Now, we need to make the menu appear when the user clicks the hamburger button. We will achieve this by toggling the show class on the .mobile-menu when the button is clicked.

<script>
  function toggleMenu() {
    var menu = document.querySelector('.mobile-menu');
    menu.classList.toggle('show');
  }
</script>

This script finds the menu (.mobile-menu) and toggles the show class. When the class is added, the menu becomes visible (display: block), and when the class is removed, the menu hides again (display: none).

Step 4: Ensure Responsiveness with Media Queries

For a responsive mobile-first design, we want to hide the desktop navigation menu on smaller screens and only show the mobile version. We can use media queries to achieve this.

/* Show the mobile menu only on small screens */
@media (max-width: 768px) {
  .desktop-menu {
    display: none; /* Hide the desktop menu */
  }

  .hamburger-menu {
    display: block; /* Show hamburger button */
  }

  /* Optionally, style the hamburger button for larger screens */
  .hamburger-menu {
    display: block;
    font-size: 30px;
    cursor: pointer;
  }
}

/* Show the desktop menu on larger screens */
@media (min-width: 769px) {
  .mobile-menu {
    display: none; /* Hide the mobile menu */
  }

  .desktop-menu {
    display: block; /* Show the desktop menu */
  }

  .hamburger-menu {
    display: none; /* Hide the hamburger button on larger screens */
  }
}

Step 5: Test on Different Devices

After setting up the custom mobile menu with Liquid, CSS, and JavaScript, it’s essential to test your portal on various devices. This ensures that the menu works well on different screen sizes and that the interactions are smooth.