Discover a smooth lavalamp effect on the menus in different styles.
Damn small and easy program for nice lavalamp effect on menus. You can use different styles on one site. It is designed to be easily integrated and just working fine.
This program is under GNU General Public License v3. It was developed with jquery 1.3.2 but works from 1.2.4.
Actually the minified program is only 1.8 kB in size (gzipped 888 Bytes)! Last updated on 19th August 2009.
Include the stylesheet, jquery-library and the plugin into the head.
<link rel="stylesheet" type="text/css" href="jquery-foxiblob-0.1.css" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery-foxiblob-0.1.min.js"></script>
Inside the body you have your menu.
<ul id="menu">
<li class="active"><a href="start.html">start</a></li>
<li><a href="site2.html">site2</a></li>
<li><a href="site3.html">site3</a></li>
</ul>
Now inside the head or body you link the main function to your menu.
<script type="text/javascript">
$(document).ready(function(){
$('#menu').foxiblob();
});
</script>
This is it! Automatically a blob is build wich follows the mouse above the menu items.
Another possibility would be ...
$('#menu ul').foxiblob({active:'contact',className:'dotted',opacity:1});
// in the body
<div id="menu">
<ul>
<li class="start"><a href="start.html">start</a></li>
<li class="guestbook"><a href="guestbook.html">guestbook</a></li>
<li class="contact"><a href="contact.html">contact</a></li>
</ul>
</div><!-- /#menu -->
In this example the blob is created in style defined in class '.dotted' and positioned on the contact list item.
Attention: List items should NOT have a background, because the blob is behind them.
| property | default | description |
|---|---|---|
| active | 'active' | Classname of the active list item wich will be marked on start. |
| opacity | 0.3 | Opacity of the blob. Allowed are values from 0 to 1. |
| speed | 'normal' | The speed for animation effects. Values are 'slow', 'normal', 'fast' and milliseconds. |
| className | 'foxiblob' | Classname for each blob. |
| callback | You can combine this plugin with other functions. |
foxiblob 0.1 full
jquery-foxiblob-0.1.js, jquery-foxiblob-0.1.css, license-gpl-3.0.txt
foxiblob 0.1 minified
jquery-foxiblob-0.1.min.js, jquery-foxiblob-0.1.css, license-gpl-3.0.txt
package of foxiblob 0.1 full, minified and this documentation
jquery-foxiblob-0.1.js, jquery-foxiblob-0.1.min.js, jquery-1.3.2.min.js, jquery-foxiblob-0.1.css, documentation.html, license-gpl-3.0.txt
The latest version of jquery you will get on jquery.com.
Check out my other small and easy programs!
foxibox
Nice image gallery. Very easy to use.
foxislide
Nice image rising effect. Very easy to use.
foxitip
Nice tooltips on links staying inside the window. You can even use different styles on one site. So easy to use.
foxiballoon
Objects following your vertical scrolling like a balloon. Very easy to use.
foxicols
Equal height columns made easy.