【问题标题】:Animate Wordpress site navigation menu动画 Wordpress 网站导航菜单
【发布时间】:2014-06-05 03:35:56
【问题描述】:

我有这个网站:http://bit.ly/1p1Dr9W

这个导航看起来有点空白。我很想给它添加css动画。我尝试使用不透明度,但它没有按预期工作。我做错了什么?

我在每个导航元素上添加了悬停动画,效果很好,但我想为整个导航菜单添加动画,所以子菜单元素的整个列表会打开一些动画(例如缓慢不透明度为 1) .

这是我得到的:

#menu-menyy li ul {
background-color: transparent; }

#menu-menyy li ul:hover {
background-color: #00a3fc !important; 
-o-transition:.8s;
-ms-transition:.8s;
-moz-transition:.8s;
-webkit-transition:.8s;
transition:.8s;}

但是整个导航菜单仍然只是弹出打开,当我将鼠标移到实际菜单上时,我看到了背景中的过渡。这可以在 CSS 中完成还是使用 jquery 完成?

【问题讨论】:

    标签: css wordpress animation navigation


    【解决方案1】:

    把css改成

    #menu-menyy li ul {
    opacity: 0; }
    
    #menu-menyy li:hover ul {
    background-color: #00a3fc !important;
    opacity: 1.0;
      -o-transition: opacity .8s;
      -ms-transition: opacity .8s;
      -moz-transition: opacity .8s;
      -webkit-transition: opacity .8s;
      transition: opacity .8s;
    }
    

    【讨论】:

    • 已编辑:更改它以便在悬停时影响不透明度
    • 谢谢!呃,这么简单的解决方案.. :)
    • 我使用相同的解决方案将此动画添加到二级菜单元素,但现在第二个元素的动画下方显示了该死的箭头图标.. 有没有办法只在第一级显示该箭头级别导航菜单?我的意思是:.sf-menu li ul { width: 190px;背景: url('images/header_submenu_arrow.png') 20px 30px no-repeat;填充顶部:38px; }
    • 使用另一个选择器选择 sub sub ul 元素,并将它们的背景设置为无:ul.sub-menu ul.sub-menu { background: none;}
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-02-08
    • 1970-01-01
    相关资源
    最近更新 更多