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

如果您查看教程的源代码（同时移至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>

Answer 3

它是使用position: fixed css属性完成的，虽然旧的版本不支持它。

就像你说的那样在创建用户友好界面时非常有用

Answer 4

您可以使用固定定位来放置相对于窗口的内容。

<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：block）。

要使css悬停psuedo-class工作，可以使用以下css：

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

这意味着如果有人在#contents div上悬停，则会显示#contents div中的任何div。

如何制作目录浮动？

4 个答案: