Y como siempre para los anciosos les tengo el demo, en este caso le expongo el segundo acordión de este demo que acaban de ver.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Acordion con jQuery</title>
<link rel="stylesheet" href="AcordionjQuery.css" />
<script type="text/javascript" src="../lib/jquery.js"></script>
<script type="text/javascript" src="../lib/chili-1.7.pack.js"></script>
<script type="text/javascript" src="../lib/jquery.easing.js"></script>
<script type="text/javascript" src="../lib/jquery.dimensions.js"></script>
<script type="text/javascript" src="../jquery.accordion.js"></script>
<script type="text/javascript">
jQuery().ready(function(){
jQuery('#navigation').accordion({
active: false,
header: '.head',
navigation: true,
event: 'mouseover',
fillSpace: true,
animated: 'easeslide'
});
});
</script>
</head>
<body>
<h1>jQuery accordion Plugin - Demo</h1>
<div id="main">
<h3>Codigo</h3>
<code class="mix">jQuery('#navigation').accordion({
active: false,
header: '.head',
navigation: true,
event: 'mouseover',
fillSpace: true,
animated: 'easeslide'
});</code>
<p></p>
<div style="height:250px;margin-bottom:1em;">
<ul id="navigation">
<li>
<a class="head" href="?p=1.1.1">Nuestra web</a>
<ul>
<li><a href="#">Quejate y ya</a></li>
<li><a href="#">Foro</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</li>
<li>
<a class="head" href="?p=1.1.2">Otra vez Nuestra Web</a>
<ul>
<li><a href="#">Quejate y ya</a></li>
<li><a href="#">Foro</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</li>
<li>
<a class="head" href="?p=1.1.3">La web otra vez</a>
<ul>
<li><a href="#">Quejate y ya</a></li>
<li><a href="#">Foro</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Sobra decriles que pueden comentar cualquier duda acerca de de su implementión.
Espero les sirva.
0 comentarios:
Publicar un comentario