it-swarm.dev

Joomlaメニュー項目をクリック可能なdivに

Joomlaメニューのカスタマイズに取り組んでおり、どのようにカスタマイズできるかを確認するための小さな実験を行っています。ただし、すべてのメニュー項目を編集可能なボタンにしたので、それらをUL/LIからDIVに変更することにしました。

さて、問題は、デフォルトのmod_menuを使用していて、実際には<a href...などを操作していないため、liをdivに変換すると、 div全体ではなく、クリック可能なdiv内のテキスト。

見た目はいいし、私がやりたいことはほぼ実行しますが、主な優先事項は、1つの記事のリンクを含むdiv全体がボタンとして機能し、クリックしてそのページに移動できることです。

誰かがそうする方法について何か考えを持っていますか?

2
Hocho

わかりやすくするために、<a>タグにはリンクhrefが含まれているため、タグをまったく削除しないでください。削除した場合は、jQueryなどを使用する必要があります。

たとえば、メニューに次のマークアップがあるとします。

<div class="menu">
    <div class="item">
        <a href="#">Home</a>
    </div>
    <div class="item">
        <a href="#">About</a>
    </div>
    <div class="item">
        <a href="#">Contact</a>
    </div>
</div>

現在、<a>タグはデフォルトでdisplay: inline;であるため、テキストはクリック可能な唯一のものです。

したがって、次のCSSを使用するだけです。

.menu .item a {
    display: block;
}

これは基本的に、要素をその親の完全な次元に拡張します。

1
Lodder