css - ドロップダウンの代わりに水平サブメニューをコーディングする方法

Question

ドロップダウン サブメニューがあるナビゲーション バーがあります。しかし、AppleのWebサイトのように、「ドロップダウン」サブメニューを「サイドバイサイド」サブメニューに変換する方法. たとえば、「ipad」をクリックすると、「機能」、「組み込みアプリ」、「ios」が表示され、ハイライトされた 1 つが並んで表示されます。

これを私のウェブサイトに実装したいと思います。

Answer 1

Apple サイトとまったく同じように動作させたいですか?

もしそうなら....

Appleでは、読み込まれるサブ ナビゲーションは iPad ページの一部であり、メイン メニューの一部ではありません (コードに関する限り)。その特定のページにロードされるのは、別の水平メニューです。

したがって、最初のページのサイトでは、メインメニューのみが水平にスタイル設定されます

<ul id="main-menu">
  <li><a href="page1.html">page one</a></li>
  <li><a href="page2.html">page two</a></li>
  <li><a href="page3.html">page three</a></li>
  <li><a href="page4.html">page four</a></li>
</ul>

次に、page1.html で、このように下のどこかに追加のメニューを追加するだけです...

<ul id="main-menu">
  <li><a href="page1.html">page one</a></li>
  <li><a href="page2.html">page two</a></li>
  <li><a href="page3.html">page three</a></li>
  <li><a href="page4.html">page four</a></li>
</ul>

<ul id="sub-menu">
  <li><a href="page1_option1.html">option one</a></li>
  <li><a href="page1_option2.html">option two</a></li>
  <li><a href="page1_option3.html">option three</a></li>
  <li><a href="page1_option4.html">option four</a></li>
</ul>

ユーザーがメイン メニュー項目にカーソルを合わせたときに表示されるメイン メニューの一部であるサブ メニューが必要な場合は、次のように、メイン メニューの関連する「li」内に「ul」メニューを追加します。

<ul id="main-menu">
  <li id="show-sub-menu"><a href="page1.html">page one</a>
    <ul id="sub-menu-1">
      <li><a href="page1_option1.html">option one</a></li>
      <li><a href="page1_option2.html">option two</a></li>
      <li><a href="page1_option3.html">option three</a></li>
    </ul>
  </li>
  <li><a href="page2.html">page two</a></li>
  <li><a href="page3.html">page three</a></li>
  <li><a href="page4.html">page four</a></li>
</ul>

次に、サブ ナビゲーションをメイン メニューのように水平方向に表示するようにスタイルを設定します。次のように、それを display:none に設定し、その親要素のホバー時に sho を設定する必要があります...

CSS

#main-menu li ul{
   display:none;
}

#main-menu li#show-sub-menu:hover ul{
   display:block;
}