Css下拉菜單轉換效果

現在我正在構建一個網站，現在我正在製作菜單欄。幸運的是，我在互聯網上找到了一個很好的教程，到目前爲止，我已經成功實現了它。教程和源代碼可以在這裏找到： source code of the menubar 而這樣的結果可以在這裏找到：Live Demo site 其實，我想添加一個過渡效果到我的下拉菜單。我想要達到以下效果：當我將鼠標移動到某個菜單欄時，下拉菜單將顯示一個「淡入」效果，改變不透明度（如果我沒有弄錯，淡入效果被連接以改變不透明度）。如果我用鼠標移動到另一個位置，則下拉緩慢返回，將不透明度從1更改爲0.Css下拉菜單轉換效果

不用說，我已經嘗試過不同的解決方案，但它們都沒有工作： \我最後的嘗試是以下，但它沒有正常工作。我看到了效果，但整個菜單欄都搞砸了。

.dropdown_1column, 
.dropdown_2columns, 
.dropdown_3columns, 
.dropdown_4columns, 
.dropdown_5columns { 
visibility:visible!important; 
opacity:0; 
transition:opacity 0.4s ease-in-out; 
-moz-transition:opacity 0.4s ease-in-out; 
-webkit-transition:opacity 0.4s ease-in-out; 
-o-transition:opacity 0.4s ease-in-out; 
...

我希望你能幫助我，我將不勝感激，提前致謝！

來源

2015-01-31 mirind4

謝謝提前，我期待它;） – mirind4 2015-01-31 21:36:41

沒關係，隨意簡化！但稍後它會對漸變也很好嗎？ :) – mirind4 2015-01-31 21:51:41

我們可以使用一點jQuery嗎？動畫頂部鏈接和父母在一起有點模糊... – KARC 2015-01-31 22:58:05

我們可以用這個動畫下拉：

$('#menu li').mouseenter(function() { 
     $(this).find('[class^="dropdown"]').stop(); 
     $(this).find('[class^="dropdown"]').css({'overflow':'visible','max-height': '1000px'}); 
     console.log($(this).children('ul')); 
    }).mouseleave(function() { 
     $(this).find('[class^="dropdown"]').delay(400).queue(function (next) { 
      /*********************************** 0.4s in css ***************/ 
      $(this).css({'overflow':'hidden','max-height': '0'}); 
      next(); 
     }); 
    });

我們不能動畫的頂級菜單項，因爲它有一個梯度：CSS3漸變仍然不能進行轉換。

在這裏你去：http://jsfiddle.net/kLfp1o6k/7/

和工程witouth邊界好一點：http://jsfiddle.net/kLfp1o6k/8/ ---用箱陰影

我很高興更換，以便能夠幫助你：d

來源

2015-02-02 14:06:26 KARC

太棒了！它越來越好，我非常感謝你的幫助，謝謝！我將「延遲」改爲200，這樣，菜單欄就快準備好了:)你的意見是什麼，當我們用鼠標移出時，爲什麼下拉菜單會跳轉到左上角的某些像素？ – mirind4 2015-02-02 14:09:23

即時通訊工作;） – KARC 2015-02-02 14:15:46

我非常感謝你:) – mirind4 2015-02-02 14:20:11

Css下拉菜單轉換效果

回答

相關問題