既存のハンバーガーメニュー項目の並べ替え

貢献 UX
1

既存のハンバーガーメニューの項目を削除したり、並び替えたりすることは可能でしょうか？例えば、AboutやFAQを上部に移動させたり、Keyboard Shortcutsを削除したりすることなどです。

「いいね！」 1
2

メニューの再配置は多分ないでしょうが、UI のあらゆる要素から項目を削除するのは、通常、管理画面のカスタマイズで CSS ルールを使って行うことができます。

「いいね！」 3
3

CSS を使用すると、以下のようなことが可能です…

.hamburger-panel .panel-body-contents {
  display: flex; /* 要素の順序を変更できるようにフレックスレイアウトを設定 */
  flex-direction: column;
  .menu-container-footer-links {
    order: -1;  /* フッターリンクを上部に移動 */
    .keyboard-shortcuts-link {
     display: none !important; /* キーボードショートカットリンクを非表示 */
    }
  }
}

境界線や間隔など、他の調整が必要になるかもしれませんが、これで 90% は達成できると思います。

「いいね！」 8
Custom Hamburger Menu Links
Custom sidebar sections being tested on meta
4

Kris、本当に助かりました！ありがとうございます！

同様に、About や FAQ をフッターではなく一般的なリンクに移動させるには、以下のようなコードが使えますね。

.hamburger-panel .panel-body-contents {
  display: flex; /* 要素の順序を並べ替えるためにフレックスレイアウトを設定 */
  flex-direction: column;
  .menu-container-footer-links {
    order: -1;  /* フッターのリンクを上部に移動 */
    .about-link {
    }
  }
}
5

いいえ、CSS でできるのはセクション全体を移動することまでです。リンクを別のセクションに移動させることはできません（おそらく、そのことをお尋ねになっているのだと思いますが）。

「いいね！」 3
6

ちょっと怖いね、ちょうどこの質問をメタで聞こうとしていたら、ディスカッションリストの一番上にあったなんて。なんて確率なんだろう。

「いいね！」 1
7

ああ、わかりました！ clarification ありがとうございます。おっしゃる通り、私の最終的な目的は footer から About と FAQ を general へ移動させることでした。ただし、あなたの最初の CSS の例を見ると、両方のセクションを 削除 してから、以下のような方法で general セクションに About と FAQ のリンクを作成できるようです：

少し不自然ですが、実現可能そうです。

「いいね！」 3
8

それで問題ないはずです。私もそのカスタムテーマを使っていますが、ちゃんと機能しています。

「いいね！」 4
9

@awesomerobot、お手伝いいただきありがとうございます。さらに質問させてください。トップのハンバーガーメニューの一部の項目を非表示にするためのコードはどのようになるでしょうか？

ここに提示されたコード例をいろいろ試してみましたが、うまくいきません。

よろしくお願いいたします。

「いいね！」 3
10

リンクのいずれかを右クリックして「検証」を選択すると、それぞれのリンクに関連付けられたクラス名が表示されます。例えば、「最新」のリンクには latest-topics-link が割り当てられています。

58%20PM
58%20PM818×328 28.9 KB

CSS でこれを非表示にするには、以下のようにします。

.menu-panel li a.widget-link.latest-topics-link {
  display: none;
}
「いいね！」 6
11

ああ、inspect 機能、いつも忘れちゃうんですよね。

完璧です、ありがとうございます！

「いいね！」 2
12

サイドバーに統合されたハンバーガーメニューのカスタマイズ方法について、何かヒントはありますか？

「その他」セクションの項目をトップレベルに移動させる方法はありますか？

編集： 「このリンクを非表示にする」という項目を非表示にすることに成功しました。

.sidebar-wrapper li a.sidebar-section-link-about {
    display: none;
}

どうもありがとうございました！

「いいね！」 1