5

http://orgmode.org/worg/org-tutorials/org-beamer/tutorial.html 目录浮动是一个非常不错的功能。如何达到这个效果？顺便说一句，我也在使用 org 模式

4

4 回答 4

9

看看 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 */
}
于 2012-09-02T01:15:02.250 回答
2

如果您查看教程的源代码（同时移至http://orgmode.org/worg/exporters/beamer/tutorial.html），您会发现它引用了两个 css 文件http://orgmode.org/worg/样式/worg-zenburn.css和 */worg-classic.css。在那里你可以找到相关的 CSS。

这是您需要添加到 org-mode 文件的相关部分：

#+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>
于 2017-08-01T16:00:18.183 回答
0

它是用position: fixedcss 属性完成的，尽管旧的 ie 版本不支持它。

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

于 2012-09-02T01:15:54.400 回答
0

您可以使用固定定位来相对于窗口放置一些东西。

<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 psuedo-class 工作，您可以使用以下 css：

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

这意味着如果有人将鼠标悬停在#contents div 上，将显示#contents div 内的任何div。

于 2012-09-02T01:16:20.720 回答