2

CSSのみを使用してサブメニューを展開および縮小する単純な（外観の）メニューの概念がありました。

これが概念化されたものです：

ここに画像の説明を入力してください

<ul>
    <li><a href="#">home</a></li>
    <li><a href="#">main one</a>
        <ul>
            <li><a href="#">sub one</a></li>
            <li><a href="#">sub two</a></li>
            <li><a href="#">sub three</a></li>
        </ul>
    </li>
    <li><a href="#">main two</a>
        <ul>
            <li><a href="#">sub one</a></li>
            <li><a href="#">sub two</a></li>
        </ul>
    </li>
    <li><a href="#">main three</a></li>
</ul>

上記の基本的なフレームワーク（クラス、ID、パイプシンボルなどの欠如を無視）をネストされた順序付けされていないリストを使用してコーディングしましたが、すべてをインラインに保つのに問題があります。すべてのリストがlist-style-type: noneあり、すべてのリスト項目が左に浮かんでいます。

また、ワードラップを防止して、リストアイテム全体が2つに分割されるのではなく、全体として新しい行に移動されるようにする方法がわかりません。

さらに、マウスクリックでネストされたリストをスライドさせるために、transitionプロパティと組み合わせてどのプロパティを使用できますか？

4

2 に答える 2

2

私は2つの方法を考えることができます：

1.a:focus + ul（a:active + ulIEの場合）を使用して、クリックするとメニューが展開されます。

デモ

利点：

  • 優れたブラウザサポートを備えています。IE8でも意図したとおりに機能します。IE7では多少ですが、メニューが展開されるのを確認するには、リンクからカーソルを合わせる必要があります。
  • tabindex='1'現在のHTML構造を保持します。クリックしたときにアクションをトリガーするリンクに追加する必要があります（サブメニューの展開など）

短所：

  • 一度に複数のサブメニューを「拡張」状態にすることはできません。
  • 永続的ではありません。これは、ページ内の別の場所をクリックすると、サブメニューを展開したリンクがフォーカスを失うことを意味します=>サブメニューが崩壊します。

仕組み：

  • a:focusフォーカスのあるリンクを選択します（リンクはクリックされた後にフォーカスを取得し、他の何かがクリックされるまでフォーカスを維持します）
  • a:focus + ululHTMLでフォーカスがあり（この場合はクリックされた後）、その直後に来る（=それらの間に他の要素がない）リンクの兄弟である順序付けられていないリスト（）を選択します-これを参照してください：隣接する兄弟コンビネータ
  • a:focus + ul li上記の順序なしリストの子孫であるリストアイテムを選択します
  • a:focus + ul a上記の順序なしリストの子孫であるリンクを選択します

2.チェックボックスハックを使用します。

デモ

利点：

  • 複数のサブメニューを一度に展開できます。
  • それは永続的です。ページ上の別の場所をクリックしても、展開されたメニューは折りたたまれません。

短所：

  • HTML構造を変更する必要があります。
  • IE8以前では機能しません。

仕組み：

  • input[type=checkbox]:checkedチェックされたチェックボックスを選択します。チェックボックスはここでは非表示になっています（設定さdisplay: noneれています）が、チェックボックスをクリックすると、クリックされた属性の値と同じlabelチェックボックスがオンになります。idforlabel
  • input[type=checkbox]:checked ~ ulチェックされたチェックボックスの兄弟（必ずしも隣接している必要はありません）である順序付けられていないリストを選択します-これを参照してください：一般的な兄弟コンビネータ
于 2012-09-05T12:06:38.460 に答える
0

メインの1人の子をに設定します

display:none;

そしてメインのもののホバーで

それらをに設定します

display:block;
于 2012-09-05T11:26:16.090 に答える