0

見出しタブをクリックするとサブメニューが表示される CSS ナビゲーションを作成したいと考えています。これがどのように機能するかを示す HTML の例を次に示します。

<ul id="menu">
<li id="nav-1"><a href="home.php">Home</a></li>
<li id="nav-2"><a href="#">Menu 1</a>
<ul id="subnav-2">
  <li><a href="page1">Page 1</a></li>
  <li><a href="page2">Page 2</a></li>
  <li><a href="page3">Page 3</a></li>
</ul>
</li>
<li id="nav-3"><a href="#">Menu 2</a>
<ul id="subnav-3">
  <li><a href="page1">page 1</a></li>
  <li><a href="page2">page 2</a></li>
  <li><a href="page3">page 3</a></li>
</ul>
</li>
  <li id="nav-4"><a href="crickets.php">Other tab without submenu</a>
  </li>
</ul>

これを機能させるためにオンラインで何かを見つけることができないようです。何か案は？

4

5 に答える 5

1

ライブラリの使用を気にしない場合は、bootstrapの使用をお勧めします。ドロップダウン サブメニューを含むメニューを非常に簡単に作成でき、非常にきちんとしたデフォルト スタイルが付属しています。これを見てください：

http://twitter.github.com/bootstrap/javascript.html#dropdowns

于 2012-04-13T21:27:46.867 に答える
1

編集：おっと！「ホバー」ではなく「クリック」と言いました。ごめん。他の人に役立つ場合に備えて、ここに残します。

セマンティック マークアップからの純粋な CSS 階層メニューの 4 つの手法の例を以下に示します:
http://phrogz.net/JS/ul2menu/purecss_testsuite.html

1 つの手法の例を次に示します:
http://jsfiddle.net/FX4Dz/1/

<nav><ul>
  <li>Header 1<ul>
    <li class="sub">Subhead 1.1<ul>
      <li>Subhead 1.1.1</li>
      <li>Subhead 1.1.2</li>
    </ul></li>
    <li>Subhead 1.2</li>
    <li>Subhead 1.3</li>
  </ul></li>
  <li>Header 2<ul>
    <li>Subhead 2.1</li>
    <li class="sub">Subhead 2.2<ul>
      <li>Subhead 2.2.1</li>
    </ul></li>
  </ul></li>
</ul></nav>​

nav li       {
    display:inline-block;
    padding:0 0.4em;
    height:1.4em; line-height:1.4em;
    position:relative;
}

nav li ul         { display:none }
nav li li         { display:block; width:8em }
nav li:hover > ul {
  display:block;
  position:absolute;
  top:1.4em; left:-1px; /* align with respect to horizontal row */
  width:8em; z-index:2
}
nav li li:hover ul {
  left:8em; top:-1px    /* subnav menus align next to their menu item */
}
于 2012-04-13T21:29:41.577 に答える
1

クリックで行う必要がある場合は、javascript が必要です。ホバーで実行しても問題ない場合は、次のようにすることができます。

#menu ul{
 dispaly: none;
}

#menu > li:hover ul{
 display: block;
}

警告: これは IE7+ でのみ機能します。また、ドロップダウンを適切に配置する必要もあります (絶対配置、ほとんどの場合)。

于 2012-04-13T21:29:50.483 に答える
1

Swimbi アプリは、ドロップダウン メニューのきれいな CSS コードを生成します。アプリを使用するか、デモ ページhttp://f-source.com/swimbi/demo/?menu=Apple_Blue%20Seaから CSS をコピーするだけです。

于 2014-02-03T09:20:37.607 に答える
0

http://css3menu.com/ これをダウンロードして自分で作成し、コードを調べて編集し、学習します

于 2012-04-13T21:29:58.680 に答える