web-dev-qa-db-ja.com

リンクのないメニュー項目

リンクのないメニュー項目（ドロップダウンメニューのあるクリックできないメニュー項目など）を作成することがよくありますが、[システムリンク]タブには、似たオプションがいくつかあります。

enter image description here

Menu Heading、Text Separatorと"＃"にリンクされている外部URLの違いは何ですか？

joomla-3.xmenu-itemmenu
5
johanpw

主な違いは、HTMLのレンダリング方法です。したがって、メニュー項目がどのように見えるかはテンプレートに依存します。これは、デフォルトのProtostarテンプレートがさまざまなオプションを表示する方法です。

Protostar template menu options

外部URL

メニュー項目のデフォルトのHTML出力はリンクです。

<li class="item-120"><a href="#">External URL menu item</a></li>

これは、他の「通常の」メニュー項目とまったく同じです。

多くの見出し項目

これにより、メニュー項目の次のHTMLコードが作成されます。

<li class="item-121"><span class="nav-header">Menu Heading item</span></li>

テキスト区切り

テキストセパレータのデフォルトのHTML出力は次のとおりです。

<li class="item-122 divider"><span class="separator">Text Separator item</span></li>

（<li>タグの追加のdividerクラスに注意してください。）

その他のテンプレート

多くのテンプレートはデフォルトのレンダリングを上書きし、異なる結果をもたらします。これは、同じメニュー項目が Joomla51.com のテンプレートでどのように見えるかです。

Menu items in J51 template

同じメニューのHTML出力：

<li class="item-120"><a href="#" tabindex="-1" class="subMenuBtn">External URL menu item</a></li>
<li class="item-121"><a href="/" tabindex="-1" class="subMenuBtn">Menu Heading item</a></li>
<li class="item-122"><a tabindex="-1" class="subMenuBtn">Text Separator item</a>
</li></ul>

すべてのメニュー項目が同じように見えることに注意してください。これは、RocketThemeなどの他のテンプレートクラブにも当てはまります（ソースコードは異なりますが、3つのアイテムは同じに見えます）。

9
johanpw