w3css - ドロップダウンメニュー内のホバーブルドロップダウン

-1

w3.cssの機能を使用して、thisチュートリアルの助けを借りてカスケードドロップダウンメニューを作成するためのHTMLプログラムを作成しようとしています。次のようにw3css - ドロップダウンメニュー内のホバーブルドロップダウン

私のコードは次のとおりです。

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta charset="utf-8" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 
    <title>Query Control Panel</title> 
</head> 
<body> 
<div class="w3-bar w3-black"> 
    <a href="#" class="w3-bar-item w3-button">abc</a> 
    <div class="w3-dropdown-hover"> 
     <button class="w3-button">dropdown-1</button> 
     <div class="w3-dropdown-content w3-card-4"> 
      <div class="w3-bar w3-light-gray"> 
       <div class="w3-dropdown-click"> 
        <button class="w3-button">dropdown-2</button> 
        <div class="w3-dropdown-content w3-bar-block w3-card-4 w3-right"> 
         <a href="#" class="w3-bar-item w3-button">link-1</a> 
         <a href="#" class="w3-bar-item w3-button">link-2</a> 
        </div> 
       </div> 
      </div> 
      <div class="w3-dropdown-click"> 
       <button class="w3-button">dropdown-3</button> 
       <div class="w3-dropdown-content w3-bar-block w3-card-4 w3-left"> 
        <a href="#" class="w3-bar-item w3-button">link-3</a> 
        <a href="#" class="w3-bar-item w3-button">link-4</a> 
       </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </body> 
</html>

出力：私はドロップダウン-1の上に置くと、それぞれのドロップダウン-2の下で、ドロップダウン-3の下に来るべき要素は、なしに表示されますホバーまたはクリックします。私はドロップダウン-1、ドロップダウン-2およびdropdown-の上に私のマウスを置くと：

は、所望の出力：私のマウスは、ドロップダウン-1の上にあるときに

次の画像は、私が取得しています出力を示しています3が表示されます。ドロップダウン2をクリックすると、リンク1とリンク2だけが表示されます。同様に、ドロップダウン-3の場合。 https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js と https://www.w3schools.com/w3css/4/w3.css

出典

2017-06-13 Sonali Agrawal

実際のフィドルやスニペットを作ってください。 – codesayan

あなたのHTML構造のせいかもしれません。すべてのボタンを同じ「レベル」のアイテムにしたい場合は、3つの独立した要素を同じレベルに置くことによって構造に反映されるはずですが、2＆3を1のドロップダウンにネストします。 – CBroe

@CBroe I don同じレベルでdropdown-1,2,3をしたくない。ちょうどUIのように1の下に2と3が必要です。しかし、Link-1とLink-2は、ドロップダウン2をクリックしたとき、またはドロップダウン3をクリックしたときにのみ表示されることは望ましくありません。ドロップダウンの上にカーソルを置くだけで表示されません。 –

私はあなたが、マルチレベルのメニューを構築しようとしていると思う：

フィドル

は親切にここにfiddle

フィドルに使用される外部リソースがある見つけます、私はフィドルを見てきましたthis

<ul class="nav site-nav"> 
    <li> 
     <a href=#>Lorem</a> 
    </li> 
    <!-- 
--> 
    <li> 
     <a href=#>Ipsum</a> 
    </li> 
    <!-- 
--> 
    <li class=flyout> 
     <a href=#>Dolor</a> 
     <!-- Flyout --> 
     <ul class="flyout-content nav stacked"> 
      <li> 
       <a href=#>Foo Bar</a> 
      </li> 
      <li> 
       <a href=#>Bar Baz</a> 
      </li> 
      <li class="flyout-alt"> 
       <a href=#>Baz Foo</a> 
       <!-- Flyout --> 
       <ul class="flyout-content nav stacked"> 
        <li> 
         <a href=#>Foo Bar</a> 
        </li> 
        <li> 
         <a href=#>Bar Baz</a> 
        </li> 
        <li class="flyout-alt"> 
         <a href=#>Baz Foo</a> 
         <!-- Flyout --> 
         <ul class="flyout-content nav stacked"> 
          <li class="flyout-alt"> 
           <a href=#>Foo Bar</a> 
           <!-- Flyout --> 
           <ul class="flyout-content nav stacked"> 
            <li> 
             <a href=#>Bar Baz</a> 
            </li> 
            <li class="flyout-alt"> 
             <a href=#>Baz Foo</a> 
             <!-- Flyout --> 
             <ul class="flyout-content nav stacked"> 
              <li> 
               <a href=#>Bar Baz</a> 
              </li> 
              <li> 
               <a href=#>Baz Foo</a> 
              </li> 
              <li> 
               <a href=#>Foo Bar</a> 
              </li> 
             </ul> 
            </li> 
            <li> 
             <a href=#>Foo Bar</a> 
            </li> 
            <li> 
             <a href=#>Foo Bar</a> 
            </li> 
           </ul> 
          </li> 
          <li> 
           <a href=#>Bar Baz</a> 
          </li> 
          <li class="flyout-alt"> 
           <a href=#>Baz Foo</a> 
           <!-- Flyout --> 
           <ul class="flyout-content nav stacked"> 
            <li> 
             <a href=#>Bar Baz</a> 
            </li> 
            <li> 
             <a href=#>Baz Foo</a> 
            </li> 
           </ul> 
          </li> 
         </ul> 
        </li> 
       </ul> 
      </li> 
     </ul>

出典

2017-06-13 10:29:30

はい、それは私が欲しいものです！唯一の違いは、「Bar Baz」と「Baz Foo」の両方がドロップダウンする必要があることです。私のコードで問題を見つけてこれを達成するのを手伝ってもらえますか？私はw3.cssのルック＆フィールを変更したくありません –

私のためにフィドルを作成してください。 –

https://jsfiddle.net/sonali9696/ndpatnvt/ 親愛なるここで@Manoj –

w3css - ドロップダウンメニュー内のホバーブルドロップダウン

答えて

関連する問題