0

onclickのドロップダウンメニューをJavaScriptなしで作りたいのですが、PHPも使えません。ターゲットを使用していましたが、ページの上部にないため、クリックするたびにページがジャンプします。JS と PHP なしでオンクリックでドロップダウン メニューを作成することはできますか?

4

2 に答える 2

0

あなたが求めていることは実際に可能ですが、このテクニックを実際に使用することはお勧めしません. これはハッキングにほかならず、意味的に非常に正しくなく、おそらく SEO にとっては悪夢です。

これを考慮して、概念実証としてこの手法を説明します。

まず、次のようにhtmlを整理してください。

<nav>
    <ul>
        <li> 
            <label for='item-1'>main item 1</label>
            <input type="checkbox" id="item-1"/>
            <ul>
                <li><a href="#">sub 1</a></li>
                ...
            </ul>
        </li>
        ...
    </ul>
</nav>

:checkedセレクターと兄弟セレクターのスマートな使用により、+クリック時にドロップダウンをシミュレートできるようになりました。関連するCSSは次のようになります。

/* we hide the checkboxes, they are just there to store the 'state' in the background */
/* their state will be triggered by clicking the corresponding label */
nav input[type="checkbox"] {
    display: none;
}
/* we hide the sub menu's by default */
nav > ul > li > ul {
   display: none;   
}
/* we show the sub menu, if it follows a checked checkbox */
nav input[type="checkbox"]:checked + ul {
   display: block;   
}

実際の例については、私が設定したフィドルを確認してください: http://jsfiddle.net/Xj8Ce/

于 2013-04-08T21:51:16.427 に答える
0

「onclick」イベントが必要な場合は、JavaScript が必要です。ホバーでこれを試すことができます：http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

それが役に立てば幸い！

于 2013-04-08T20:25:14.480 に答える