נשאלנו רבות על יישום האפקט בתפריט הראשי באתר ^. האפקט הזה נקרא Lavalamp (מנורת לבה) על שם המנורה המבעבעת.
Lavalamp Toturial
Lavalamp Demos
קבצים לצירוף:
jquery
jquery.lavalamp
jquery.easing - אחראי על אפקטי הריכוך.
HTML:
<div id="main-nav">
<h2 class="primary-links-title">Primary Links</h2>
<ul class="menu primary-links">
<li class="menu-1092 active-trail first active">
<a href="/" title="" class="active">בית</a>
</li>
<li class="menu-825">
<a href="/discussions" title="כל הדיונים בפורום">פורום</a>
</li>
<li class="menu-828">
<a href="/posts" title="כל הפוסטים בבלוג">בלוג</a>
</li>
<li class="menu-905">
<a href="/events" title="כל האירועים">אירועים</a>
</li>
<li class="menu-1591 last">
<a href="/providers" title="ספקי שירות">ספקי שירות</a>
</li>
</ul>
</div>
<!-- /main-nav -->
jquery:
//the lavalamp load:
function loadLamps() {
$('.lamp').lavaLamp({
fx: 'easeOutBounce',
speed: 1000
});
}
//jquery initialize:
$(function() {
$('#main-nav').addClass('lamp');
loadLamps();
});
css:
.lamp {
position: relative;
overflow: hidden;
}
.lamp li {
float: left;
list-style: none;
}
.lamp li.backLava {
background-color:#eee;
width: 9px;
z-index: 8;
position: absolute;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
}
.lamp li a {
outline: none;
text-align: center;
padding: 5px 10px;
letter-spacing: 0;
z-index: 10;
display: block;
float: left;
position: relative;
overflow: hidden;
margin: auto;
}