SharePoint Site Global Navigation Mega Menu

Hi Shawn Xiong. Maybe you can take a look at this sample on the PnP GitHub repository:

https://github.com/OfficeDev/PnP/tree/master/Components/Core.TaxonomyNavigationComponents

It corresponds to your 3rd option. Behind the scenes, this sample uses RequireJS and the JavaScript injection technique to build a top navigation bar. All navigation links are managed through a taxonomy term set and are retrieved via JSOM.

If you want, you have also an other solution using Webpack and the SharePoint "Script On Demand" loading technique (instead of RequireJS):

https://github.com/OfficeDev/PnP/tree/master/Solutions/Business.O365StarterIntranet

In this case you will need to create a custom master page to load the JS files.

Hope this help!

Franck.