Click a Dropdown Menu Title > Show a Custom Content

#1. First, you create a Page in Not Linked with Name/URL

• Custom Content – /custom-content

and design layout for this page

Here I added a List Section (with some CSS code to make the style beautiful)

#2. Install this plugin

The plugin will give you some code to add to the Code Injection Header and footer, like this.

#3. Use this code to Custom CSS box

/* @tuanphan */
.wm-load-container {
  display: none;
}
.show-hide ~ #siteWrapper a.header-nav-folder-title:after {
    transform: rotate(180deg);
    display: inline-block;
}
.show-hide {
    display: block !important;
}
  a.header-nav-folder-title:after {
    content: "\e009";
    font-family: 'squarespace-ui-font';
    position: relative;
    top: 2px;
}

#4. Use this code to Code Injection – Header, under #2 code

<div data-wm-plugin="load" data-target="/custom-content"></div>

#5. Use this code to Code Injection – Footer, under #2 code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('a.header-nav-folder-title[href="/locations"]').click(function(){
    	$('.wm-load-container').toggleClass('show-hide');
    });
});
</script>

#6. Note

/locations in the code

is Dropdown Menu Title Link

#7. Result

When clicking the Locations Dropdown Title, custom content will appear. You can use this to create a mega menu.