min-width:1920px;
<style type="text/css" media="screen">
#nav > li {cursor: pointer;}
#nav >.active {border:3px solid red;}
</style>
<ol id="nav">
<li class="active">пункт
</li><li>пункт
</li><li>пункт
</li><li>пункт
</li><li>пункт
</li></ol>
<script type="text/javascript">
var els= document.getElementById('nav');
els.onclick= function(e) {
[].forEach.call(this.querySelectorAll('li'), function(i) {
i.classList.remove('active');
})
e.target.classList.add('active');
e.stopPropagation();
}
</script>
<div>
<h5>Javascript-код:</h5>
<div class="code" style="display:block; width:100%; overflow:auto;"><pre><code for="prim" nolib="">
<div class="result pointer" onclick="jump(this);" style="background:#eee; display: inline-block; padding: 5px;">
Прыгучий объект
</div>
<script type="text/javascript">
function jump (el) {
el.style.position='relative';
var i=0, an= setInterval(function() {
if (i>=Math.PI) {
clearInterval(an);
el.style.top= 0;
} else el.style.top= -100*Math.sin(i) + 'px';
i+=.1;
},25)
}
</script>