1. Customize design - Top part of the website, ievietojam:
Code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
2. Customize design - Bottom part of the website, ievietojam:
Code
<script type="text/javascript">
$.fn.upHover = function () {
return $(this).hover(
function(){$(this).stop().animate({marginTop: '-10px'}, 200)},
function(){$(this).stop().animate({marginTop: '0px'}, 200)}
);
}
$(".up").upHover();
</script>
3. Customize design - Style sheet (CSS), ievietojam:
Code
.links {margin:0;padding:0;height:50px;line-height:50px;width:350px}
.links li {margin:0;padding:0;list-style: none; float:left;margin-right:20px}
.up {padding:20px;display:block}
4. Vietā, kurā vēlamies redzēt vēlamo efektu ar hipersaitēm, kuras ievietotas zem teksta:
Code
<ul class="links">
<li><a href="http://ucozwebmeistars.ucoz.lv/" class="up">Facebook</a></li>
<li><a href="http://ucozwebmeistars.ucoz.lv/" class="up">Twitter</a></li>
<li><a href="http://ucozwebmeistars.ucoz.lv/" class="up">uCozwebmeistars</a></li>
<li><a href="http://ucozwebmeistars.ucoz.lv/" class="up">Google Plus</a></li>
</ul>
5. Iznākums:
! Piemērā redzamā aktīvā - ar kursoru skartā teksta daļa ar hipersaiti ir Twitter, kas uzreiz paceļās uz augšu, iezīmējas ar pasvītrojumu..