Question

我从CSS3开始，我试图制作这样的菜单： http://codecanyon.net/item/metro-navigation-menu/full_screen_preview/4573382

这个想法是当你点击按钮时，它会隐藏父div并用其他按钮打开div女儿。

我看到这篇帖子CSS3 onclick activate another DIV's animation指的是示例http://jsfiddle.net/kevinPHPkevin/K8Hax/，代码：

CSS：

#box1 {
    display:none;
}
#box1:target {
    display:block;
}

HTML：

<a href="#box1">Click Me</a>
<div id="box1">test test</div>

单击链接，它会打开div。但我想点击链接，隐藏div，打开另一个然后反过来。

我只使用CSS3

请求帮助

Answer 1

如果您只想使用css3来执行此操作，则可以使用Checkbox hack（http://css-tricks.com/the-checkbox-hack/）。

它远不是理想的css使用，但是将盒子设置为无线电盒将会很好地完成，因为每个盒子都会停用其他盒子。（即你设置＆＃34;宽度：0px＆＃34;默认情况下，更改为＆＃34;宽度：200px＆＃34;检查时结合＆＃34;过渡：宽度0.5s; -webkit-transition：width 0.5 s;＆＃34;有点动画）。

老实说，你最好使用jquery / javascript，因为复选框hack的后备并不理想，而且它不是css真正可以控制的东西。

希望有所帮助，丹

Answer 2

这已经回答你可以查看：

CSS3 onclick activate another DIV's animation

这是一种非常简单的技术，仅使用'+'符号。希望您觉得这很有用。

CSS3 onclick激活另一个DIV的隐藏/显示

2 个答案: