Я работаю над темой tumblr для своего блога. Я хочу реализовать lavalamp в моем меню, но я пробовал так много разных вещей и не могу заставить его работать. Я не эксперт по jquery, поэтому я бы очень признателен за помощь!
Мой блог: http://jamescharless.tumblr.com Если вы хотите увидеть его вживую.
<script type="text/javascript" src="http://static.tumblr.com/ww0u3rz/pREn35wbh/jquery.easing.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/ww0u3rz/I0Xn35wl8/jquery.lavalamp.min.js"></script>
<script src="http://static.tumblr.com/ww0u3rz/H7un35wai/jquery-1.1.3.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(function() {
$("#lava").lavaLamp({
fx: "backout",
speed: 700,
click: function(event, menuItem) {
return true;
}
});
});
});
</script>
И CSS:
ul.navigation {
position: relative;
overflow: hidden;
list-style-type: none;
margin: 0;
padding: 0;
}
ul.navigation li {
float: left;
list-style: none;
position: relative;
}
ul.navigation li.back {
border: 1px solid #000;
background-color: #e6e8ea;
width: 9px;
height: 30px;
z-index: 8;
position: absolute;
}
ul.navigation li a {
font-size: 11px;
text-transform: uppercase;
font-weight: 700;
font-family: "Montserrat";
color: #999;
outline: none;
text-align: center;
top: 7px;
text-transform: uppercase;
letter-spacing: 0;
z-index: 10;
display: block;
float: left;
height: 30px;
position: relative;
overflow: hidden;
margin: auto 10px;
}
ul.navigation li a:hover,
ul.navigation li a:active,
ul.navigation li a:visited {
border: none;
}
И, наконец, HTML:
<ul class="navigation" id="lava">
<li><a href="/">home</a></li>
<li><a href="/msg">message</a></li>
<li><a href="/">archives</a></li>
<li><a href="/">faq</a></li>
</ul>
Так должен выглядеть результат?
http://jsfiddle.net/lharby/Aee9W/
Сначала я вызываю jquery, затем другие плагины, поскольку они зависят от jquery.
<script src="http://static.tumblr.com/ww0u3rz/H7un35wai/jquery-1.1.3.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://static.tumblr.com/ww0u3rz/pREn35wbh/jquery.easing.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/ww0u3rz/I0Xn35wl8/jquery.lavalamp.min.js"></script>
редактировать
На самом деле попробуйте это
JQuery:
$(".navigation").lavaLamp({
// etc
HTML
<nav id="navigation">
<ul class="navigation">
<li><a href="/">home</a></li>
<li><a href="/msg">message</a></li>
<li><a href="/">archives</a></li>
<li><a href="/">faq</a></li>
</ul>
</nav>
Для этого может потребоваться обновление вашего css.