html - 目次をフローティングにする方法は？

Question

http://orgmode.org/worg/org-tutorials/org-beamer/tutorial.html 目次のフローティングは非常に優れた機能です。この効果を達成する方法は？ところで、私も組織モードを使用していました

Answer 1

CSSを見てください

position: fixed;
right: 0em;
top: 0em;

これは、ホバー時にメニューを展開することを含む、分離されたデモです。

HTML

<div id="toc">
    hello
    <div id="full">hey there<br />This is the full TOC</div>
</div>

CSS

#toc {
  position: fixed;
  right: 0;
  top: 0;
  background-color:#FFF;
}

#toc #full { display: none; } /* Hide the full TOC by default */

#toc:hover #full{
  display: block; /* Show it on hover */
}

Answer 2

それはposition: fixedcss プロパティで行われましたが、古い ie バージョンではサポートされていません。

あなたが言ったように、ユーザーフレンドリーなインターフェースを作成するときに非常に便利です

Answer 3

固定位置を使用して、ウィンドウに対して何かを配置できます。

<div id="contents" style="position:fixed;width: 200px;right:0;top:0">
  Floating table of contents
  <div id="expanded" style="display: none">
    Content details
    links
    more links
    more links
  </div>
</div>

次に、javascript または css hover 疑似クラスを使用してコンテンツを展開し、フローティング オブジェクトにカーソルを合わせると詳細が表示されるようにします (#expanded div を display: ブロックに設定することにより)。

css hover 疑似クラスを機能させるには、次の css を使用できます。

<style>
  #contents:hover div {
    display: block;
  }
</style>

これは、誰かが #contents div にカーソルを合わせると、#contents div 内のすべての div が表示されることを意味します。