Otra bitácora de programación: Menú acordeón con efecto deslizante, sólo con CSS y SMIL - Slidding accordion menu (CSS and SMIL only)

Ahora agregaremos al menú de tipo acordeón el efecto deslizante y algunos detalles de estilo. El efecto deslizante lo logramos en Internet Explorer mediante SMIL (o HTML+TIME, como lo llama Microsoft). Para el resto utilizamos "CSS3 transitions", actualmente funcional en Chrome y Safari, y en desarrollo para las próximas versiones de FireFox y Opera.

En la próxima entrada explicaremos algunos cambios menores en la estructura para facilitar el agregado de estilos, como así también algún aporte a la discución sobre estándares.

Ejemplo "vivo":

El código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:time="urn:schemas-microsoft-com:time">
<head>
<title>Horizontal Accordion Menu</title>
<style type="text/css">
#menu {height:20px;}
#menu, #menu * {margin:0;padding:0;list-style:none;line-height:20px}
#menu .main {position:relative;float:left;overflow:hidden;background:yellow url(left.gif) no-repeat left top;padding-left:6px;}
#menu .sub {padding-right:6px;margin-top:-20px;padding-top:20px;}
#menu .sub li {margin-top:-20px;overflow:hidden;*overflow:visible}
#menu p {*position:relative;background:transparent url(right.gif) no-repeat right top;padding-right:6px;z-index:2}
#menu a {position:relative;display:block;width:50px;text-decoration:none;}
#menu p a {text-align:center;background-color:#000066;font-weight:bold;color:white;-webkit-transition:margin-right 1s linear;-mz-transition:margin-right 1s linear;-o-transition:margin-right 1s linear;}
#menu .sub a {color:red;background-color:yellow;}
#menu a.sub1 {left:50px}
#menu a.sub2 {left:100px}
#menu a.sub3 {left:150px}
#menu .sub a:hover, #menu a:active, #menu a:focus {margin-right:150px;z-index:2}
:root #menu a:hover {margin-right:150px;z-index:2}
time\:animate {-ms-behavior: url(#default#time2);behavior: url(#default#time2);}
</style>
</head>
<body>
<time:animate begin="a1.onmouseenter" end="a1.onmouseleave" dur="10s" targetelement="a1" attributename="marginright" keytimes="0;0.1;1" values="0px;150px;150px"></time:animate>
<time:animate begin="a2.onmouseenter" end="a2.onmouseleave" dur="10s" targetelement="a2" attributename="marginright" keytimes="0;0.1;1" values="0px;150px;150px"></time:animate>
<time:animate begin="a3.onmouseenter" end="a3.onmouseleave" dur="10s" targetelement="a3" attributename="marginright" keytimes="0;0.1;1" values="0px;150px;150px"></time:animate>
<ul id="menu">
<li class="main">
<p><a tabindex="1" id="a1" href="#">Main1</a></p>
<ul class="sub">
<li><a tabindex="2" class="sub1" href="#1">Sub11</a></li>
<li><a tabindex="3" class="sub2" href="#2">Sub12</a></li>
<li><a tabindex="4" class="sub3" href="#3">Sub13</a></li>
</ul>
</li>
<li class="main">
<p><a tabindex="5" id="a2" href="#">Main2</a></p>
<ul class="sub">
<li><a tabindex="6" class="sub1" href="#4">Sub21</a></li>
<li><a tabindex="7" class="sub2" href="#5">Sub22</a></li>
</ul>
</li>
<li class="main">
<p><a tabindex="9" id="a3" href="#">Main3</a></p>
<ul class="sub">
<li><a tabindex="10" class="sub1" href="#7">Sub31</a></li>
<li><a tabindex="11" class="sub2" href="#8">Sub32</a></li>
<li><a tabindex="12" class="sub3" href="#9">Sub33</a></li>
</ul>
</li>
</ul>
</body>
</html>

Las imágenes necesarias:

left.gif