mochikit_v14/examples/effects/effects_slide.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   2 <html xmlns="http://www.w3.org/1999/xhtml">
   3 <head>
   4 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   5 <title>Untitled Document</title>
   6 <style type="text/css">
   7 #menu {
   8   width: 300px;
   9   border: 1px #000 solid;
  10 }
  11 .menu_header {
  12   background-color: #00CC99;
  13   color: #FFFFFF;
  14 }
  15 .menu_block {
  16   background-color: #006699;
  17   color: #FFFFFF;
  18   overflow:hidden;
  19 }
  20 .menu_block div {
  21 }
  22 .close_block {
  23   position: relative;
  24   width: 100%;
  25   bottom: 0px;
  26   height: 15px;
  27   text-align: center;
  28   display: block;
  29 }
  30 </style>
  31     <script src="../../MochiKit/MochiKit.js" type="text/javascript"></script>
  32     <script src="../../MochiKit/Position.js" type="text/javascript"></script>
  33     <script src="../../MochiKit/Visual.js" type="text/javascript"></script>
  34 </head>
  35 <body>
  36 <div id="menu">
  37   <div class="menu_header" id="menu_header1"><a onClick="MochiKit.Visual.slideDown('menu_block1'); return false;">HEADER 1</a></div>
  38   <div class="menu_block_container" id="menu_block_container1">
  39     <div class="menu_block" id="menu_block1"><div>
  40             text<br>
  41         text<br>
  42         text<br>
  43         text<br>
  44         text<br>
  45         text<br>
  46         text<br>
  47         <a class="close_block" onClick="MochiKit.Visual.slideUp('menu_block1'); return false;">close</a></div></div>
  48   </div>
  49   <div class="menu_header" id="menu_header2"><a onClick="MochiKit.Visual.slideDown('menu_block2'); return false;">HEADER 2</a></div>
  50   <div class="menu_block_container" id="menu_block_container2">
  51     <div class="menu_block" id="menu_block2"><div>
  52             text<br>
  53         text<br>
  54         text<br>
  55         text<br>
  56         text<br>
  57         text<br>
  58         text<br>
  59         <a class="close_block" onClick="MochiKit.Visual.slideUp('menu_block2'); return false;">close</a></div></div>
  60   </div>
  61 </div>
  62 </body>
  63 </html>