jQuery lava lamp effect – Mouse ile menüde kayan efekt

Mouse menüdeki kategori linklerinin üzerine geldiğinde hemen mousenin üzerinde bulunduğu linkin altına doğru kayan border görünümlü bir alt çizginin yaklaştığı örneklerle belki karşılaşmışsınızdır. Ayrıca menü balıklarını içine alan balon tarzında da kayan animasyon örnekleri bulunuyor. Buna benzer menü tasarımları Lavalamp.js adı verilen uygulama ile yapılıyor. Kendi alanında en popüler olan çalışmalardan bir tanesidir.

Kullanımı :

• Head etiketleri arasına eklemeniz gereken bölümler.

Js ve stil dosyaları :

<link rel="stylesheet" href="lavalamp_test.css" type="text/css" media="screen">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.min.js"></script>
<script type="text/javascript" src="jquery.lavalamp.min.js"></script>

Javascript :

<script type="text/javascript">
        $(function() {
            $("#1, #2, #3").lavaLamp({
                fx: "backout", 
                speed: 700,
                click: function(event, menuItem) {
                    return false;
                }
            });
        });
</script>

• Body etiketleri arasına eklemeniz gereken bölüm.

Html :

Demo 1
<ul class="lavaLampWithImage" id="1">
    <li><a href="#">Home</a></li>
    <li><a href="#">Plant a tree</a></li>
    <li><a href="#">Travel</a></li>
    <li><a href="#">Ride an elephant</a></li>
</ul>

Demo 2
<ul class="lavaLampNoImage" id="2">
    <li><a href="#">Home</a></li>
    <li><a href="#">Plant a tree</a></li>
    <li><a href="#">Travel</a></li>
    <li><a href="#">Ride an elephant</a></li>
</ul>

Demo 3
<ul class="lavaLampBottomStyle" id="3">
    <li><a href="#">Home</a></li>
    <li><a href="#">Plant a tree</a></li>
    <li><a href="#">Travel</a></li>
    <li><a href="#">Ride an elephant</a></li>
</ul>