クリックアクションでボックスを生成する

Question

初投稿のwebデザイン初心者です。何卒よろしくお願いいたします。

wordpressでの制作を中心に行っており、実現したいデザインで今躓いております。

中心にロゴを置き、そのロゴをクリックすることで、そこから3本の線が（それぞれ左、下、右に）延びていき、ロゴの下に3つの並んだボックスが出現するようなデザインを組むことができないかどうか調べています。

こちらはJavascriptを使用するのでしょうか？またはCSSにて作るのでしょうか？
全く見当もつかない段階での質問で大変恐縮ですが、
どのような方法で実装できるか、ヒントでも構いませんので教えて頂きたいです。

よろしくお願いいたします。

Answer 1

初めまして！
動的なWEBサイトを作るのにはJavascriptが必要です。まったく無関係ではないですがCSSは深くかかわるわけではありません。

Javascriptで有名な「クリックイベント」を調べていただければ納得頂けると思います。

Comments

[Kiccchooon]

初めまして！
コメントありがとうございます！
クリックイベント調べてみます！

[takato]

Kiccchooon様
調べればすぐわかると思いますがボタンを押すと起動するスイッチのようなものを作る簡単なJS（Javascript）です。
是非お試しください。

Answer 2

ごめんなさいコメントするところ間違えました・・・

Answer 3

http://liginc.co.jp/web/tool/other-tool/70516

具体的なアニメーションのイメージがわからないですが、アニメーションの複雑さによってはアニメーションgifで対応するのもありかと思います。

クリックしたらアニメーションgifに切り替わる処理はjavascriptになりますが。

Comments

[Kiccchooon]

ご返信ありがとうございます！
GIFアニメを使用するのですね！
大変お手数ですが、
そのjavascriptの処理についても詳しくお聞きすることはできますでしょうか？

また、3つのボックスにそれぞれリンクをつけてメニューの様にしたいのですが、その場合は複数のアニメーションGIFを作る感じでしょうか？

イメージのつきづらいものですみませんm(_ _)m
何卒よろしくお願いいたします。