javascript - フローティング サブメニューを含むフローティング フッター メニュー

Question

JavaScript と HTML & CSS を使用してフローティング フッター メニューを作成し、フッター メニューの要素に他のサブ メニューを使用したいと考えています。サブメニューもマウス ホバーでフロートする必要があります。これらのニーズを満たす方法はありますか？助けてください、ありがとう。

Answer 1

あなたはCSSにかなり慣れていないようです（そうでなくても不快感はありません！）

簡単にするために、Twitter Bootstrapフレームワークを使用することをお勧めします。CSSを初めて使用する場合は、多くの一般的な落とし穴から時間を節約できます。

BootstrapにはNavbarコンポーネントがあり、サイトの下部に固定できます。サンプルコードをいくつか添付しましたが、Bootstrap Webサイトにアクセスして、その方法を学ぶことを強くお勧めします。努力する価値は十分にあります。

HTML（ブートストラップスタイルシートとjavascriptが含まれていることを確認してください）

<div class="navbar navbar-inverse navbar-fixed-bottom">
  <div class="navbar-inner">
    <div class="container">
      <button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar" type="button">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="./index.html" class="brand">Submenu Example</a>
      <div class="nav-collapse collapse">
        <ul class="nav">
          <li class="">
            <a href="./base-css.html">Normal Item</a>
          </li>
          <li class="dropdown">
            <a data-toggle="dropdown" class="dropdown-toggle" href="#">
              Dropup Item
              <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
              <li><a href="#">Sub Item 1</a></li>
              <li><a href="#">Sub Item 2</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>