https://cdn.idomin.com/menuskin/pd_01/menubar.js

1// include menubar core js 
2document.addEventListener("DOMContentLoaded", function() {
3	const scripts = [
4		'/script/menubar.js',
5	];	
6	function loadScript(src) {
7		return new Promise((resolve, reject) => {
8			const script = document.createElement("script");
9			script.src = src;
10			script.onload = () => resolve();
11			script.onerror = () => reject(new Error("error loading " + src));
12			document.body.appendChild(script);
13		});
14	}	
15	function loadAll(scripts, index = 0) {
16		if (index < scripts.length) {
17			loadScript(scripts[index]).then(() => {
18				loadAll(scripts, index + 1);
19			}).catch(error => {
20				console.error(error);			
21				loadAll(scripts, index + 1);
22			});
23		}
24	}	
25	loadAll(scripts);
26});
27
28$(function(){
29	const GL_HEADER = $(".gl-header");
30		
31	// search opener
32	const GL_SEARCH = $(".gl-search-container");
33	
34	GL_SEARCH.on("click", ".gl-search-action", function(e) {
35		// const _parent = $(e.delegateTarget);
36
37		if(GL_HEADER.hasClass("sch-active")) {
38			GL_HEADER.removeClass("sch-active");
39		} else {
40			GL_HEADER.addClass("sch-active").find(".gl-search-input").focus();
41		}
42	});
43	
44	// menu opener
45	$(".user-header").on("click", "#all-section-btn", function(e) {
46		const _parent = $(e.delegateTarget);
47		if(_parent.hasClass("all-active")) {
48			_parent.removeClass("all-active");
49			_parent.find("#all-section").slideUp('600');
50			// $('body, html').css('overflow', 'auto');
51		} else {
52			_parent.addClass("all-active");
53			_parent.find("#all-section").slideDown('600');
54			// $('body, html').css('overflow', 'hidden');
55		}
56	});
57	
58	// document mouseup
59	$(document).mouseup(function (e){
60		if(
61			!GL_SEARCH.is(e.target) && GL_SEARCH.has(e.target).length === 0
62			&& !$(".gl-search").is(e.target) && $(".gl-search").has(e.target).length === 0
63			&& !$(".gl-search-ab").is(e.target) && $(".gl-search-ab").has(e.target).length === 0 
64		) {
65			GL_HEADER.removeClass("sch-active");
66		}
67		
68		if(
69			!$("#all-section").is(e.target) && $("#all-section").has(e.target).length === 0
70			&& !$("#all-section-btn").is(e.target) && $("#all-section-btn").has(e.target).length === 0
71		) {
72			$(".user-header").removeClass("all-active");
73			$("#all-section").hide();
74		}
75	});
76});