0

このアニメーション化された CSS メニューを機能させることができないようです... a) 中央に配置されておらず、中央に配置できないようです (おそらく、CSS の UL 要素が競合しているためでしょうか?) および b) JavaScript が適用されていません全て。

何が問題なのかについては、こちらを参照してください: http://runic-paradise.com/

そして、それがどのように機能するかについては、http: //runic-paradise.com/animated-menu.htmlを参照してください。

HTML:  

<ul class="menu">
    <li class="green">
        <p><a href="#">Home</a></p>
        <p class="subtext">The front page</p>
    </li>
    <li class="yellow">
        <p><a href="#">About</a></p>
        <p class="subtext">More info</p>
    </li>
    <li class="red">
        <p><a href="#">Contact</a></p>
        <p class="subtext">Get in touch</p>
    </li>
    <li class="blue">
        <p><a href="#">Submit</a></p>
        <p class="subtext">Send us your stuff!</p>
    </li>
    <li class="purple">
        <p><a href="#">Terms</a></p>
        <p class="subtext">Legal things</p>
    </li>
</ul>

Javascript:

$(document).ready(function(){

    //Fix Errors - http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup/

    //Remove outline from links
    $("a").click(function(){
        $(this).blur();
    });

    //When mouse rolls over
    $("li").mouseover(function(){
        $(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce'})
    });

    //When mouse is removed
    $("li").mouseout(function(){
        $(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
    });

});

CSS:

ul.menu {
    margin: 0;
    padding: 0;
}

/*li{
    width:100px;
    height:50px;
    float:left;
    color:#191919;
    text-align:center;
    overflow:hidden;
}*/

a.menu{
    color:#FFF;
    text-decoration:none;
}

p.menu{
    padding: 0px 5px;
}

.subtext{
    padding-top:15px;
}

/*Menu Color Classes*/
.green{
    background:#6AA63B url('images/green-item-bg.jpg') top left no-repeat;
    width:100px;
    height:50px;
    float:left;
    color:#191919;
    text-align:center;
    overflow:hidden;
}

.yellow{
    background:#FBC700 url('images/yellow-item-bg.jpg') top left no-repeat;
    width:100px;
    height:50px;
    float:left;
    color:#191919;
    text-align:center;
    overflow:hidden;
}

.red{
    background:#D52100 url('images/red-item-bg.jpg') top left no-repeat;
    width:100px;
    height:50px;
    float:left;
    color:#191919;
    text-align:center;
    overflow:hidden;
}

.purple{
    background:#5122B4 url('images/purple-item-bg.jpg') top left no-repeat;
    width:100px;
    height:50px;
    float:left;
    color:#191919;
    text-align:center;
    overflow:hidden;
}

.blue{
    background:#0292C0 url('images/blue-item-bg.jpg') top left no-repeat;
    width:100px;
    height:50px;
    float:left;
    color:#191919;
    text-align:center;
    overflow:hidden;
}
4

3 に答える 3

1

スクリプトを間違った順序でロードしています。

<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="js/animated-menu.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>

最初の 2 つのスクリプトが機能するには jQuery が必要ですが、まだ利用できません。最初に jQuery をロードします。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="js/animated-menu.js" type="text/javascript"></script>
于 2013-11-01T07:45:51.627 に答える
1

これを試して、

CSS

ul.menu{
    height: 50px;
    list-style: none outside none;
    margin: 0 auto;
    width: 500px;
}

そして、あなたは次のli-classesように短くすることができます、

ul.menu li{
    width:100px;
    height:50px;
    float:left;
    color:#191919;
    text-align:center;
    overflow:hidden;
}

/*Menu Color Classes*/
.green{
    background:#6AA63B url('images/green-item-bg.jpg') top left no-repeat;
}    
.yellow{
    background:#FBC700 url('images/yellow-item-bg.jpg') top left no-repeat;
}    
.red{
    background:#D52100 url('images/red-item-bg.jpg') top left no-repeat;
}    
.purple{
    background:#5122B4 url('images/purple-item-bg.jpg') top left no-repeat;
}    
.blue{
    background:#0292C0 url('images/blue-item-bg.jpg') top left no-repeat;
}

また、あなたのanimation作品とすべてのjsロード。

于 2013-11-01T07:44:17.050 に答える
1

easing.jsダウンロードのリンクを入れて、headタグに入れます

https://github.com/ai/easions.net

于 2013-11-01T08:00:53.657 に答える