动画子菜单纯css

我试图做一个菜单，其中有3个菜单项和1个子项。如果我点击第二个项目，应该显示第一个子项目。但通常不会显示它。它应该动画并滑动它。我认为transition有一种方法，但我不太了解CSS3。我想要一个纯粹的CSS解决方案。动画子菜单纯css

这里我的HTML代码：

<div id="menu"> 
    <ul> 
     <li><a href="#">First</a></li> 
     <li class="active"><a href="#">Second</a> 
      <ul class="child"> 
       <li><a href="#">First child</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Third</a></li> 
    </ul> 
</div>

我创造了这个fiddle。现在，如果我点击Second菜单项，我想慢慢显示First child菜单项。

我以前做的唯一的事情是检查transition但我只是不明白。

有人可以给我一个提示吗？

干杯

来源

2013-10-17 Tyler

看到你的jsfiddle更新http://jsfiddle.net/3kEg4/3/

#menu { 
    height: auto; 
    width: auto; 
} 
#menu ul { 
    margin: 0px; 
    padding: 0px; 
    list-style-type: none; 
} 
#menu ul li { 
    float: left; 
    position: relative; 
} 
#menu ul li a { 
    line-height: 30px; 
    text-decoration: none; 
    text-align: center; 
    display: block; 
    width: 100px; 
    height: 30px; 
    border: thin solid #999; 
    color: #FFF; 
    background-color: #0CF; 
    -webkit-transition: all 1s; 
    -moz-transition: all 1s; 
    -ms-transition: all 1s; 
    -o-transition: all 1s; 
    transition: all 1s; 
} 
#menu ul li a:hover { 
    background-color: #0C3; 
} 
#menu ul li ul { 
    position: absolute; 
    -webkit-transition: height 1s linear 0s; 
    -moz-transition: height 1s linear 0s; 
    -ms-transition: height 1s linear 0s; 
    -o-transition: height 1s linear 0s; 
    transition: height 1s linear 0s; 
    height: 0px; 
    overflow:hidden; 
} 
#menu ul li:hover ul { 
    height: 100px; 
    -webkit-transition: height 1s linear 0s; 
    -moz-transition: height 1s linear 0s; 
    -ms-transition: height 1s linear 0s; 
    -o-transition: height 1s linear 0s; 
    transition: height 1s linear 0s; 
}

（从http://jsfiddle.net/ashukasama/2BqGY/启发）

来源

2013-10-17 21:49:07

这太棒了！非常感谢，那正是我在找的！你救了我的傍晚:)谢谢！ – Tyler

恩，我已经在我的电脑上测试了它（昨天我已经用它测试过了），它在悬停时起作用。你知道一个jQuery脚本，这种效果通过菜单项点击出现吗？ – Tyler

Tou可以使用复选框破解，如果你想效果出现在点击事件看到样品在这里：http：//dabblet.com/gist/1507175 –

你可以使用一些CSS3动画来实现这一效果。

#menu ul li ul{ 
    opacity:0; 
    -webkit-transition: .6s ease; 
    -moz-transition: .6s ease; 
    -ms-transition: .6s ease; 
    -o-transition: .6s ease; 
    height: 0; 
} 

#menu ul li:hover ul { 
    opacity: 1; 
    height: 100px; 
}

JSFIDDLE

无线电活动状态

JSFIDDLE Radio

Stackoverflow Q

的jQuery

$('.subMenu').on('click', function() { 
    $('.subMenu ul').slideToggle(1000); 
});

JSFIDDLE jQuery

来源

2013-10-17 21:34:25

让我给这个'ul'添加一些样式，它看起来真的很棒：p –

可以用'click'而不是'hover'来获得这个效果吗？ – Tyler

@rschweri除非您使用复选框hack，否则不能使用纯粹的CSS。如果您需要'click'事件，您将需要JS。 1+尽管如此。 –

我认为这是更好的

#menu ul li ul{ 
    visibility: hidden; 
    opacity: 0; 
    transition: visibility 0s, opacity 0.5s linear; 
    position: absolute; 
} 

#menu ul li:hover ul { 
    visibility: visible; 
    opacity: 1; 
    position: relative; 
}

也相当实用。请添加前缀。希望这可以帮助某人。

来源

2016-09-02 08:34:59 Danish

动画子菜单纯css

回答

相关问题