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下拉菜单转换效果

回答

相关问题