14

CSS 動的メニューを作成しており、ホバー操作を遅らせたいと考えています。リンクの上にカーソルを置いたときのメニューの反応は、サブメニュー (ドロップダウン) を提供することです。

サブメニューがすぐには表示されず、ドロップダウンに1秒かかるように、ドロップダウンプロセスを遅くしたいと思います。助けていただければ幸いです。

コードは以下のとおりです。

<html>

<head>
<style>
#navMenu{
    margin:0;
    padding:0;
}
#navMenu ul{
    margin:0;
    padding:0;

}
#navMenu li{
    margin-right:2px;
    padding:0;
    list-style:none;
    float:left;
    position:relative;
    background:#CCC;
}
#navMenu ul li a{
    text-align:center;
    font-family:sans-serif, cursive;
    text-decoration:none;
    height:30px;
    width:150px;
    display:block;
    color:#000;
    border:10px;
  -webkit-transition: background-color 0.1s;
  -moz-transition: background-color 0.1s;
  -o-transition: background-color 0.1s;
  transition: background-color 0.1s;
}
#navMenu ul ul{
        position:absolute;
        visibility:hidden;
  -webkit-transition: background-color 0.1s;
  -moz-transition: background-color 0.1s;
  -o-transition: background-color 0.1s;
  transition: background-color 0.1s;
}

#navMenu ul li:hover ul{
    visibility:visible; 
  -webkit-transition: background-color 0.1s;
  -moz-transition: background-color 0.1s;
  -o-transition: background-color 0.1s;
  transition: background-color 0.1s;
}


</style>
</head>

<body>
<div id="wrapper"><!--beginning of wrapper div-->
<div id="navMenu"><!--Beginning of Nav Menu-->
    <ul><!--Beginning of main UL-->
      <li><a href="#">About Us</a>
            <ul><!--Begining of Internal UL-->
                <li><a href="#">Link item </a></li>
                <li><a href="#">Link item </a></li>
                <li><a href="#">Link item </a></li>
                <li><a href="#">Link item </a></li>
            </ul>
     </li>
     <li><a href="#">Contact Us</a></li>
  </ul><!--End of Main UL --></div>
</div>
<p>&nbsp;</p>

</body>

</html>

前もって感謝します ：）

よろしく、

ジョセフ

4

6 に答える 6

13

css transition-delay プロパティを次のように使用できます。

transition-delay: 1s; /* delays for 1 second */
-webkit-transition-delay: 1s; /* for Safari & Chrome */

詳細はこちらhttp://www.w3schools.com/cssref/css3_pr_transition-delay.asp

于 2013-10-19T18:29:01.203 に答える
1

サブメニューがドロップダウンする前に 1 秒遅延するのではなく、ドロップダウンに 1 秒かかるようにしたい場合は、加速と動きを完全に制御するためのオプションの 1 つ (ファンシーにしたい場合) は、CSS アニメーションと@を使用することです。キーフレーム.

これは、CSS アニメーションの制御レベルを示すクールなデモです。

于 2013-10-19T18:39:00.310 に答える
0

を使用しているためvisibility:hidden、これはご想像のとおり移行できません...オンとオフの状態しかありません。

できることは、それを組み合わせて、opacity遷移遅延を使用して、不透明度が開始されるまで外観をオフセットすることです.

ここ。http://www.greywyvern.com/?post=337

于 2013-10-19T18:40:45.883 に答える