Меню Lavalamp не работает

0

Я работаю над темой 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>
  • 0
    В вашем коде у вас есть <nav id = "navigation">, а затем <li>, которые являются дочерними элементами ul, но ваша функция jquery пытается нацелить элемент с идентификатором lava id = "lava", который не существует в вашем коде. Ниже выложу ответ, который может сработать.
Теги:
themes
tumblr

2 ответа

-1

Так должен выглядеть результат?

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>
  • 0
    Вау, это работает, так что не уверен, почему глупое понижение.
-1

редактировать

На самом деле попробуйте это

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.

  • 0
    Все еще не работал :-(
  • 0
    Почему бы вам не опубликовать весь свой код где-нибудь, как здесь: pastebin.com
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню