# モバイル用のカスタムメニュー

**URL:** <https://meta.discourse.org/t/custom-menu-on-mobile/82729>\
**Category:** Product Support\
**Created:** [2018 年 3 月 11 日午後 1:50 UTC](https://meta.discourse.org/t/custom-menu-on-mobile/82729 "2018-03-11T13:50:17Z")\
**Posts on this page:** 1\
**Showing post:** 3

<div class="post-metadata">

**Author:** ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)\
**Post date:** [2018 年 3 月 12 日午前 2:27 UTC](https://meta.discourse.org/t/custom-menu-on-mobile/82729/3 "2018-03-12T02:27:45Z")

</div>

Focusing on the `</head>` section here:

Wrapping the code in a `$( document ).ready()` function made it work for me:

 ![5f161d22-a513-43cf-83ca-ced128b46d36](https://global.discourse-cdn.com/meta/original/3X/1/2/12682e92ee31a32cbfe49fbb09e0c078ecc1740f.gif)

Here’s what `</head>` code for that looks like:

```plaintext
<script type="text/discourse-plugin" version="0.8.18">

$(document).ready(function() {
	function click_outside(selector) {
		$(selector).on("click", function(e) {
			e.stopPropagation();
		});
		console.log("Click Outside initialized for " + selector);
		$("html").click(function(event) {
			if ($(selector).hasClass("active")) {
				console.log("clicked outside");
				$(selector).fadeOut(200, function() {
					$(selector).removeClass("active");
				});
			}
		});
	}

	$("#mobile-menu").addClass("visible");
	$("html").click(function(event) {
		if ($(".background").hasClass("active")) {
			$("#mobile-menu").toggleClass("active");
			$(".background").toggleClass("active");
			$(".dropdown").toggleClass("active");
			$("body").toggleClass("overflowMobile");
		}
	});

	$(".background").click(function(event) {
		event.stopPropagation();
	});

	$("#mobile-menu").click(function(event) {
		$(this).toggleClass("active");
		$(".background").toggleClass("active");
		$("body").toggleClass("overflowMobile");
		event.stopPropagation();
	});

	$(function() {
		$('#menu a[href^="/' + location.pathname.split("/")[1] + '"]').addClass(
			"active"
		);
	});
});

</script>

```

You have to figure out what `selector` actually is to make the click outside function work as well.

---

_[View the full topic](https://meta.discourse.org/t/custom-menu-on-mobile/82729)._