4

OKそれで、ホバーするとメニューを表示するボタンを作成しました。また、マウスをボタンから離すとすぐにメニューが非表示になります。これは完璧ですが、マウスからメニュー自体に移動してもメニューが消えないはずです。これも起こっていますが、cssを使用してバウンス効果を作成し、もう少しスタイリッシュにしました。アニメーションが実行される前にメニューにマウスを合わせようとすると、メニュー間のギャップのためにメニューが再び非表示になります。バウンスアクション中のボタンとボタンなので、非表示を2秒間遅らせたいと思いました。これにより、誰かがボタンを押してメニューを移動しようとしても、少なくとも2秒間待ってから消えます。フィドルへのリンク

HTMLコード

<div id="menu">
            <ul class="menu" id="tempMenu">
    <li class="listOfNumbers"><a id="Menus" href="">Numbers</a><div>
                        <ul class="submenu">
                            <li>
                                <a id="one" href="">one</a>
                            </li>
                            <li>
                                <a id="two" href="">two</a>
                            </li>
                            <li>
                                <a id="three" href="">three</a>
                            </li>
                            <li>
                                <a id="four" href="">four</a>
                            </li>
                            <li>
                                <a id="five" href="">five</a>
                            </li>
                            <li>
                                <a id="six" href="">six</a>
                            </li>
                            <li>
                                <a id="seven" href="">seven</a>
                            </li>
                            <li>
                                <a id="eight" href="">eight</a>
                            </li>
                        </ul>
                    </div>
                </li>
    </ul>
</div>
​

CSSコード：

ul.menu .listOfNumbers{
    position: fixed;
    margin-left: 20px;
    list-style-type: none;
    margin: 15px 0;
    float: left;
    height: 30px;
    line-height: 30px;

}
ul.menu .listOfNumbers a{
    position: fixed;
    margin-left: 93px;
    background: #666 -webkit-gradient( linear, left bottom, left top, color-stop(0.3, rgb(00,00,00)), color-stop(0.9, rgb(80,80,80)) );
     background: -moz-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(17,17,17,1) 60%, rgba(0,0,0,1) 77%, rgba(19,19,19,1) 91%);
   background: -ms-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(17,17,17,1) 60%,rgba(0,0,0,1) 77%,rgba(19,19,19,1) 91%); /* IE10+ */
background: linear-gradient(to bottom, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(17,17,17,1) 60%,rgba(0,0,0,1) 77%,rgba(19,19,19,1) 91%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
    display: block;
    padding: 0;
    text-decoration: none;
    color: #fff;
    font-size: 12px;
    font-weight: bolder;
    text-shadow: #000 0 -1px 1px;
    width: 90px;
    text-align: center;
    border-bottom: 1px solid #000;
    border-top: 1px solid #666;
    border-left: 1px solid #666;
    border-right: 1px solid #000;
    -webkit-transition:text-shadow .7s ease-out, background .7s ease-out;
    -moz-transition: text-shadow .7s ease-out, background .7s ease-out;
    -moz-box-shadow: white 7px 5px 20px;
    -webkit-box-shadow:white 7px 5px 20px;
    box-shadow: white 7px 5px 20px;
}
ul.menu .submenu{
    display: none;
   top: -30px;
   position: absolute;
    opacity: 0;
}
ul.menu .submenu li{
    list-style-type: none;
}
ul.menu li:hover .submenu{

    display: block;
    top: -2px;
    opacity: 1;
    animation:mymove 1.2s linear;
    -moz-animation:mymove 1.2s linear; /* Firefox */
    -webkit-animation:mymove 1.2s linear; /* Safari and Chrome */
    -o-animation:mymove 1.2s linear; /* Opera */
    -ms-animation:mymove 1.2s linear; /* IE */
}
@keyframes mymove
{
0%   {top:-10px;opacity:0.1;}
10%  {top:3px;opacity:0.3;}
30%  {top:40px;opacity:0.4;}
60%  {top:-5px;opacity:0.5;}
80%  {top:20px;opacity:0.7;}
90%  {top:10px;opacity:0.9;}
95%  {top:5px;opacity:0.95;}
100% {top:3px;opacity:1;}
}

@-moz-keyframes mymove /* Firefox */
{
0%   {top:-10px;opacity:0.1;}
10%  {top:3px;opacity:0.3;}
30%  {top:40px;opacity:0.4;}
60%  {top:-5px;opacity:0.5;}
80%  {top:20px;opacity:0.7;}
90%  {top:10px;opacity:0.9;}
95%  {top:5px;opacity:0.95;}
100% {top:3px;opacity:1;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
0%   {top:-10px;opacity:0.1;}
10%  {top:3px;opacity:0.3;}
30%  {top:40px;opacity:0.4;}
60%  {top:-5px;opacity:0.5;}
80%  {top:20px;opacity:0.7;}
90%  {top:10px;opacity:0.9;}
95%  {top:5px;opacity:0.95;}
100% {top:3px;opacity:1;}
}

@-o-keyframes mymove /* Opera */
{
0%   {top:-10px;opacity:0.1;}
10%  {top:3px;opacity:0.3;}
30%  {top:40px;opacity:0.4;}
60%  {top:-5px;opacity:0.5;}
80%  {top:20px;opacity:0.7;}
90%  {top:10px;opacity:0.9;}
95%  {top:5px;opacity:0.95;}
100% {top:3px;opacity:1;}
}

@-ms-keyframes mymove /* IE */
{
0%   {top:-10px;opacity:0.1;}
10%  {top:3px;opacity:0.3;}
30%  {top:40px;opacity:0.4;}
60%  {top:-5px;opacity:0.5;}
80%  {top:20px;opacity:0.7;}
90%  {top:10px;opacity:0.9;}
95%  {top:5px;opacity:0.95;}
100% {top:3px;opacity:1;}
}

ul.menu .submenu li:first-child a{
  -webkit-border-top-left-radius:10px;
    -webkit-border-bottom-left-radius:2px;
    -webkit-border-top-right-radius:10px;
    -webkit-border-bottom-right-radius:2px;
    -moz-border-top-left-radius: 10px;
    -moz-border-radius-bottomleft:2px;    
    -moz-border-top-right-radius: 10px;
    -moz-border-radius-bottomright: 2px;
    border-top-left-radius: 10px;
    border-bottom-left-radius:2px;    
    border-top-right-radius: 10px;
    border-bottom-right-radius:2px;
    margin: 34px 95px;
    z-index: 1000;


}
ul.menu .submenu li:last-child a{
    -webkit-border-top-left-radius:2px;
    -webkit-border-bottom-left-radius:10px;
    -moz-border-top-left-radius: 2px;
    -moz-border-radius-bottomleft:10px;
    -webkit-border-top-right-radius:2px;
    -webkit-border-bottom-right-radius:10px;
    -moz-border-top-right-radius: 2px;
    -moz-border-radius-bottomright: 10px;
    border-top-left-radius: 2px;
    border-bottom-left-radius:10px;    
    border-top-right-radius: 2px;
    border-bottom-right-radius:10px;
    margin:260px 95px;
     z-index: 1000;

}

ul.menu .submenu li:nth-of-type(2) a{
    -webkit-border-top-left-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-top-left-radius: 0px;
    -moz-border-radius-bottomleft:0px;
    -webkit-border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    -moz-border-top-right-radius: 0px;
    -moz-border-radius-bottomright: 0px;
    margin: 68px 95px;
     z-index: 1000;

}
ul.menu .submenu li:nth-of-type(3) a{
    -webkit-border-top-left-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-top-left-radius: 0px;
    -moz-border-radius-bottomleft:0px;
    -webkit-border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    -moz-border-top-right-radius: 0px;
    -moz-border-radius-bottomright: 0px;
    margin: 100px 95px;
     z-index: 1000;

}
ul.menu .submenu li:nth-of-type(4) a{
    -webkit-border-top-left-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-top-left-radius: 0px;
    -moz-border-radius-bottomleft:0px;
    -webkit-border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    -moz-border-top-right-radius: 0px;
    -moz-border-radius-bottomright: 0px;
    margin: 133px 95px;
     z-index: 1000;

}
ul.menu .submenu li:nth-of-type(5) a{
    -webkit-border-top-left-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-top-left-radius: 0px;
    -moz-border-radius-bottomleft:0px;
    -webkit-border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    -moz-border-top-right-radius: 0px;
    -moz-border-radius-bottomright: 0px;
    margin: 165px 95px;
     z-index: 1000;

}
ul.menu .submenu li:nth-of-type(6) a{
    -webkit-border-top-left-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-top-left-radius: 0px;
    -moz-border-radius-bottomleft:0px;
    -webkit-border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    -moz-border-top-right-radius: 0px;
    -moz-border-radius-bottomright: 0px;
    margin: 197px 95px;
     z-index: 1000;

}

ul.menu .submenu li:nth-of-type(7) a{
    -webkit-border-top-left-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-top-left-radius: 0px;
    -moz-border-radius-bottomleft:0px;
    -webkit-border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    -moz-border-top-right-radius: 0px;
    -moz-border-radius-bottomright: 0px;
    margin: 229px 95px;
     z-index: 1000;

}​

javascriptまたはjQueryを含める必要があるかどうかはわかりません。しかし、それでもそれらのいずれかを使用して達成可能であれば、それも問題ありません。

4

3 に答える 3

3

おそらくあなたが望むtransition-delay：https ：//developer.mozilla.org/en-US/docs/CSS/transition-delay

編集：

複数の遅延を指定できます。各遅延は、マスターリストとして機能するtransition-propertyプロパティで指定された対応するプロパティに適用されます。マスターリストよりも指定された遅延が少ない場合、欠落している値は初期値（0）に設定されます。さらに遅延がある場合は、リストが適切なサイズに切り捨てられます。どちらの場合も、CSS宣言は有効なままです。

于 2012-12-30T09:34:26.700 に答える
1

jsfiddle http://jsfiddle.net/sP5hg/6/

    ul.menu .listOfNumbers{
    position: relative;
    margin-left: 20px;
    list-style-type: none;
    margin: 15px 0;
    float: left;
    line-height: 30px;
    z-index: 1000;
}
ul.menu .listOfNumbers a{
    margin-left: 93px;
    background: #666 -webkit-gradient( linear, left bottom, left top, color-stop(0.3, rgb(00,00,00)), color-stop(0.9, rgb(80,80,80)) );
     background: -moz-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(17,17,17,1) 60%, rgba(0,0,0,1) 77%, rgba(19,19,19,1) 91%);
   background: -ms-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(17,17,17,1) 60%,rgba(0,0,0,1) 77%,rgba(19,19,19,1) 91%); /* IE10+ */
background: linear-gradient(to bottom, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(17,17,17,1) 60%,rgba(0,0,0,1) 77%,rgba(19,19,19,1) 91%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
    display: block;
    padding: 0;
    text-decoration: none;
    color: #fff;
    font-size: 12px;
    font-weight: bolder;
    text-shadow: #000 0 -1px 1px;
    width: 90px;
    text-align: center;
    border-bottom: 1px solid #000;
    border-top: 1px solid #666;
    border-left: 1px solid #666;
    border-right: 1px solid #000;
    -webkit-transition:text-shadow .7s ease-out, background .7s ease-out;
    -moz-transition: text-shadow .7s ease-out, background .7s ease-out;
    -moz-box-shadow: white 7px 5px 20px;
    -webkit-box-shadow:white 7px 5px 20px;
    box-shadow: white 7px 5px 20px;
}
ul.menu .submenu{
    display: none;
   top: -30px;
   position: absolute;
    /*opacity: 0;*/
}
ul.menu .submenu li{
    list-style-type: none;
}

ul.menu li:hover .submenu{

    display: block;
    top: -2px;
    /*opacity: 1;*/
    animation:mymove 1.2s linear;
    -moz-animation:mymove 1.2s linear; /* Firefox */
    -webkit-animation:mymove 1.2s linear; /* Safari and Chrome */
    -o-animation:mymove 1.2s linear; /* Opera */
    -ms-animation:mymove 1.2s linear; /* IE */
}
@keyframes mymove
{
0%   {top:-10px;opacity:0.1;}
10%  {top:3px;opacity:0.3;}
30%  {top:40px;opacity:0.4;}
60%  {top:-5px;opacity:0.5;}
80%  {top:20px;opacity:0.7;}
90%  {top:10px;opacity:0.9;}
95%  {top:5px;opacity:0.95;}
100% {top:3px;opacity:1;}
}

@-moz-keyframes mymove /* Firefox */
{
0%   {top:-10px;opacity:0.1;}
10%  {top:3px;opacity:0.3;}
30%  {top:40px;opacity:0.4;}
60%  {top:-5px;opacity:0.5;}
80%  {top:20px;opacity:0.7;}
90%  {top:10px;opacity:0.9;}
95%  {top:5px;opacity:0.95;}
100% {top:3px;opacity:1;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
0%   {top:-10px;opacity:0.1;}
10%  {top:3px;opacity:0.3;}
30%  {top:40px;opacity:0.4;}
60%  {top:-5px;opacity:0.5;}
80%  {top:20px;opacity:0.7;}
90%  {top:10px;opacity:0.9;}
95%  {top:5px;opacity:0.95;}
100% {top:3px;opacity:1;}
}

@-o-keyframes mymove /* Opera */
{
0%   {top:-10px;opacity:0.1;}
10%  {top:3px;opacity:0.3;}
30%  {top:40px;opacity:0.4;}
60%  {top:-5px;opacity:0.5;}
80%  {top:20px;opacity:0.7;}
90%  {top:10px;opacity:0.9;}
95%  {top:5px;opacity:0.95;}
100% {top:3px;opacity:1;}
}

@-ms-keyframes mymove /* IE */
{
0%   {top:-10px;opacity:0.1;}
10%  {top:3px;opacity:0.3;}
30%  {top:40px;opacity:0.4;}
60%  {top:-5px;opacity:0.5;}
80%  {top:20px;opacity:0.7;}
90%  {top:10px;opacity:0.9;}
95%  {top:5px;opacity:0.95;}
100% {top:3px;opacity:1;}
}

ul.menu .submenu li:first-child a{
  -webkit-border-top-left-radius:10px;
    -webkit-border-bottom-left-radius:2px;
    -webkit-border-top-right-radius:10px;
    -webkit-border-bottom-right-radius:2px;
    -moz-border-top-left-radius: 10px;
    -moz-border-radius-bottomleft:2px;    
    -moz-border-top-right-radius: 10px;
    -moz-border-radius-bottomright: 2px;
    border-top-left-radius: 10px;
    border-bottom-left-radius:2px;    
    border-top-right-radius: 10px;
    border-bottom-right-radius:2px;
    margin: 35px 93px 0;


}
ul.menu .submenu li:last-child a{
    -webkit-border-top-left-radius:2px;
    -webkit-border-bottom-left-radius:10px;
    -moz-border-top-left-radius: 2px;
    -moz-border-radius-bottomleft:10px;
    -webkit-border-top-right-radius:2px;
    -webkit-border-bottom-right-radius:10px;
    -moz-border-top-right-radius: 2px;
    -moz-border-radius-bottomright: 10px;
    border-top-left-radius: 2px;
    border-bottom-left-radius:10px;    
    border-top-right-radius: 2px;
    border-bottom-right-radius:10px;

}

ul.menu .submenu li:nth-of-type(2) a{
    -webkit-border-top-left-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-top-left-radius: 0px;
    -moz-border-radius-bottomleft:0px;
    -webkit-border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    -moz-border-top-right-radius: 0px;
    -moz-border-radius-bottomright: 0px;
}
ul.menu .submenu li:nth-of-type(3) a{
    -webkit-border-top-left-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-top-left-radius: 0px;
    -moz-border-radius-bottomleft:0px;
    -webkit-border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    -moz-border-top-right-radius: 0px;
    -moz-border-radius-bottomright: 0px;

}
ul.menu .submenu li:nth-of-type(4) a{
    -webkit-border-top-left-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-top-left-radius: 0px;
    -moz-border-radius-bottomleft:0px;
    -webkit-border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    -moz-border-top-right-radius: 0px;
    -moz-border-radius-bottomright: 0px;

}
ul.menu .submenu li:nth-of-type(5) a{
    -webkit-border-top-left-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-top-left-radius: 0px;
    -moz-border-radius-bottomleft:0px;
    -webkit-border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    -moz-border-top-right-radius: 0px;
    -moz-border-radius-bottomright: 0px;

}
ul.menu .submenu li:nth-of-type(6) a{
    -webkit-border-top-left-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-top-left-radius: 0px;
    -moz-border-radius-bottomleft:0px;
    -webkit-border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    -moz-border-top-right-radius: 0px;
    -moz-border-radius-bottomright: 0px;

}

ul.menu .submenu li:nth-of-type(7) a{
    -webkit-border-top-left-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-top-left-radius: 0px;
    -moz-border-radius-bottomleft:0px;
    -webkit-border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    -moz-border-top-right-radius: 0px;
    -moz-border-radius-bottomright: 0px;

}

主な CSS の変更:

  1. LI の位置を相対位置に変更し、その子の位置修正を削除して、LI のサイズにすべての子が含まれるようにします。マウスがリンク「Numbers」の外に出ても、li:hover が常に機能するようになるため、この手順は重要です。
  2. サブメニューではなく LI に z-index を適用します。メニュー全体を最前面に配置する必要があるため、これはより合理的である必要があります。
于 2012-12-30T12:55:39.447 に答える
-1

このW3Schoolの説明を見てください

いつでもトランジションを指定でき、複数のトランジションがあり、CSS3 でできることは他にもたくさんあります。チュートリアルを実行してください。大いに役立ちます。

于 2012-12-30T09:56:28.510 に答える