如何使目錄浮動？

Question

http://orgmode.org/worg/org-tutorials/org-beamer/tutorial.html 浮動內容表是一個非常不錯的功能。如何達到這個效果？ 順便說一句，我還使用組織模式

Answer 1

看那CSS

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

下面是它的一個demo隔絕包括擴大懸停菜單。

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: fixed CSS屬性做雖然較老版本的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格爲display：block） 。

要獲得CSS懸停僞類的工作，你可以使用下面的CSS：

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

這意味着，如果有人懸停在#contents DIV的#contents格內的任何股利將顯示。

Answer 4

如果你看看教程的源代碼（其間移動到http://orgmode.org/worg/exporters/beamer/tutorial.html），你會發現它引用了兩個css文件http://orgmode.org/worg/style/worg-zenburn.css和*/worg-classic.css。你可以找到相關的CSS。

下面是您需要添加到您的組織模式文件的相關部分：

#+HTML_HEAD: <style> /* TOC inspired by http://jashkenas.github.com/coffee-script */ 
#+HTML_HEAD_EXTRA: @media all 
#+HTML_HEAD_EXTRA: { 
#+HTML_HEAD_EXTRA: #table-of-contents { 
#+HTML_HEAD_EXTRA:  font-size: 10pt; 
#+HTML_HEAD_EXTRA:  position: fixed; 
#+HTML_HEAD_EXTRA:  right: 2em; 
#+HTML_HEAD_EXTRA:  top: 0em; 
#+HTML_HEAD_EXTRA:  background: #2b2b2b; 
#+HTML_HEAD_EXTRA:  color: #dcdccc; 
#+HTML_HEAD_EXTRA:  -webkit-box-shadow: 0 0 1em #777777; 
#+HTML_HEAD_EXTRA:  -moz-box-shadow: 0 0 1em #777777; 
#+HTML_HEAD_EXTRA:  -webkit-border-bottom-left-radius: 5px; 
#+HTML_HEAD_EXTRA:  -moz-border-radius-bottomleft: 5px; 
#+HTML_HEAD_EXTRA:  text-align: right; 
#+HTML_HEAD_EXTRA:  /* ensure doesn't flow off the screen when expanded */ 
#+HTML_HEAD_EXTRA:  max-height: 80%; 
#+HTML_HEAD_EXTRA:  overflow: auto; } 
#+HTML_HEAD_EXTRA:  #table-of-contents h2 { 
#+HTML_HEAD_EXTRA:  font-size: 10pt; 
#+HTML_HEAD_EXTRA:  max-width: 8em; 
#+HTML_HEAD_EXTRA:  font-weight: normal; 
#+HTML_HEAD_EXTRA:  padding-left: 0.5em; 
#+HTML_HEAD_EXTRA:  padding-left: 0.5em; 
#+HTML_HEAD_EXTRA:  padding-top: 0.05em; 
#+HTML_HEAD_EXTRA:  padding-bottom: 0.05em; } 
#+HTML_HEAD_EXTRA:  #table-of-contents #text-table-of-contents { 
#+HTML_HEAD_EXTRA:  display: none; 
#+HTML_HEAD_EXTRA:  text-align: left; } 
#+HTML_HEAD_EXTRA:  #table-of-contents:hover #text-table-of-contents { 
#+HTML_HEAD_EXTRA:  display: block; 
#+HTML_HEAD_EXTRA:  padding: 0.5em; 
#+HTML_HEAD_EXTRA:  margin-top: -1.5em; } 
#+HTML_HEAD_EXTRA:  #table-of-contents { 
#+HTML_HEAD_EXTRA:  color: black; 
#+HTML_HEAD_EXTRA:  background: #FFF; 
#+HTML_HEAD_EXTRA:  font-size: 80%; 
#+HTML_HEAD_EXTRA:  padding: .5em; 
#+HTML_HEAD_EXTRA:  margin: 1em -2em 1em 1em; 
#+HTML_HEAD_EXTRA:  display: block; 
#+HTML_HEAD_EXTRA:  } 
#+HTML_HEAD_EXTRA:  #table-of-contents a { 
#+HTML_HEAD_EXTRA:  color: #003333; 
#+HTML_HEAD_EXTRA:  } 
#+HTML_HEAD_EXTRA:  #table-of-contents a:hover { 
#+HTML_HEAD_EXTRA:  color: #003333; 
#+HTML_HEAD_EXTRA:  text-decoration: underline; 
#+HTML_HEAD_EXTRA:  } 
#+HTML_HEAD_EXTRA:  #table-of-contents li { 
#+HTML_HEAD_EXTRA:  margin: .2em; 
#+HTML_HEAD_EXTRA:  } 
#+HTML_HEAD_EXTRA:  #table-of-contents h2 { 
#+HTML_HEAD_EXTRA:  margin-top: .2em; 
#+HTML_HEAD_EXTRA:  border: none; 
#+HTML_HEAD_EXTRA:  } 
#+HTML_HEAD_EXTRA: } /* END OF @media all */ 
#+HTML_HEAD_EXTRA: @media screen { 
#+HTML_HEAD_EXTRA:  #table-of-contents { 
#+HTML_HEAD_EXTRA:   float: right; 
#+HTML_HEAD_EXTRA:   border: 1px solid #CCC; 
#+HTML_HEAD_EXTRA:   max-width: 50%; 
#+HTML_HEAD_EXTRA:   overflow: auto; 
#+HTML_HEAD_EXTRA:  } 
#+HTML_HEAD_EXTRA:  } /* END OF @media screen */ 
#+HTML_HEAD_EXTRA: </style>