CSS3 onclick activate another DIV's hide/show

问题

I'm starting in CSS3, I'm trying to make a menu like this: http://codecanyon.net/item/metro-navigation-menu/full_screen_preview/4573382

The idea is when you click the button, it hides the parent div and open the div daughter with the other buttons.

I saw this post CSS3 onclick activate another DIV's animation that points to the example http://jsfiddle.net/kevinPHPkevin/K8Hax/, code:

CSS:

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

HTML:

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

that clicking on the link, it opens the div. But I want to click the link, hide the div, open the other and then do the reverse.

I would use only CSS3

tks to help

回答1:

If you do want to use only css3 to do this you can use the Checkbox hack (http://css-tricks.com/the-checkbox-hack/).

It is far from ideal css usage however setting the boxes as radio boxes will do that quite well as each one deactivates the others. (ie you set "width:0px" by default, change to "width:200px" on check combined with "transition: width 0.5s;-webkit-transition: width 0.5s;" for a bit of animation).

In all honesty however you are better using jquery/javascript as the fallbacks for the checkbox hack are not ideal and it is not the stuff that css is really built to control.

Hope that helps, Dan

回答2:

This has been already answered you can check out:

CSS3 onclick activate another DIV's animation

This is a very simple technique using the '+' symbol only.Hope you find this useful.

来源：https://stackoverflow.com/questions/18109923/css3-onclick-activate-another-divs-hide-show

标签

css

animation