モバイル版のグローバルメニュー
見た目がドロワー方式になっている他、実装もデスクトップ版のグローバルメニューと異なる
左上のアイコンを最初にクリックすると、body直下に<div id="drawer-container">とその中身が動的に追加され、表示される
メニューを閉じるとこのdivの中身が空になる
もう一度メニューを開くと再び中身が動的に追加される
この仕様のため、中身をUserScriptから操作するためには少し工夫が必要となる
メニューが開かれたことを検知し、毎回操作を行う必要がある
code:js
new MutationObserver((_, self) => {
// drawer-container自体は一度作られれば以降は使い回されるので、MutationObserverを停止する
self.disconnect();
const drawer = document.getElementById('drawer-container');
new MutationObserver(() => {
// drawer の中身が存在していることを確認し、操作を行う
}).observe(drawer, {childList: true});
}).observe($('body')0, {childList: true});
UserCSSの場合はセレクタを修正する必要がある
https://gyazo.com/305076d13b045303036a6a9bd378ff95
#モバイル版