1

メニューバーがあります：

http://jsfiddle.net/EyFPB/8/

メニューに画像があり、下にスライドして明らかにしたい：

.green{background:#6AA63B;
   background-image: url('http://images.dailytech.com/frontpage/fp__army_fish.jpg');
   background-position:bottom;
   background-repeat:no-repeat;}

ただし、このような CSS を使用すると、メニューが折りたたまれて下にスライドしたときに画像が表示されます。単色のブロック (例では緑) を表示し、下にスライドして画像を表示する効果が必要です。

JQuery animate でこれを行うことはできますか?

4

2 に答える 2

1

シンプルな CSS ソリューションで、 に を追加background-position:0 50px;し.greenます。

jsフィドル

于 2013-08-14T16:46:34.213 に答える
0

Figured it out.

You need to set a custom .subtext class for each button:

.subtextGreen{
    height:100px;
    margin-top:-7px;
    background-image: url('../images/home-btn.jpg');
    background-position:bottom;
    background-repeat:no-repeat;
}

and then in the code:

            <li class="green">
                            <p><a href="default.aspx">Home</a></p>
                            <p class="subtextGreen"></p>
                        </li>
于 2013-08-14T16:45:35.850 に答える