いまのヘッダーメニュー構成にするときに調べた内容の備忘録です。

手順が裏技的な感じがしますが、もし必要が出た方はこちらの記事で手順をご参照下さい。

リンク無しメニューの完成状態

マウスオーバーしたらメニューがドロップダウンで表示されるメニューの完成形↓

リンク無しメニューを実現するために調べたこと

こちらの記事を参考にさせて頂きました。

親メニューをクリックしたときに何もさせない方法を教えてください。

リンク無しメニューを作る手順

前提：メニューで「サービス案内」とだけ表示させたい。サービス案内をマウスオーバーしたら「WEBサイト制作」「WEBマーケティング」がリストで表示されるようにしたい。

下図のように会社概要の下に「サービス案内」を追加して、サービス案内自体はリンク無しにしたい。

そのようなときは「カスタムリンク」でサービス案内を擬似的に作ります。

左の欄からカスタムリンクを開き、URLに任意の文字列を入力します。※空欄だとエラーになります。

リンク文字列に「サービス案内」と入力し、メニューに追加します。

追加したサービス案内を開き、URLを削除し、メニューを保存します。※この手順を忘れると存在しないページのリンクを作ってしまいますので要注意。

「WEBサイト制作」「WEBマーケティング」をメニューに追加します。

ドラッグアンドドロップで階層を下げ、メニューを保存します。

出来上がった状態↓ CSSが変なのでちょっと分かりづらいですが、サービス案内をマウスオーバーしたらリストが出てくるようになりました。

まとめ

いったん偽のURLを作ってエラーを回避してメニューに追加出来た段階でURLを消すというところがミソですね。

最終的に空欄が許されるなら最初から空欄で追加OKでも良い気がしますが、何か開発側で不都合なことがあったのかと変な深読みをしてしまいました。