how to make table of contents floating?

Question

http://orgmode.org/worg/org-tutorials/org-beamer/tutorial.html The table of contents floating is a pretty nice feature. How to achieve this effect? Btw, I was also using org mode

Answer 1

Look at the CSS

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

Here's a demo of it isolated including expanding the menu on hover.

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

If you look at the source code of the tutorial (meantime moved to http://orgmode.org/worg/exporters/beamer/tutorial.html) you see that it references two css files http://orgmode.org/worg/style/worg-zenburn.css and */worg-classic.css. There you find the relevant CSS.

Here's the relevant part that you need to add to your org-mode file:

#+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>