固定ボタン CSSのみ

締切済

質問者：home321
質問日時：2017/04/25 16:43
回答数：2件

画像のようなボタンを作成したいのですが、
どのようにするのわからないです。。。

ご教示ください；；

画面右下にボタン１があり、

ボタン１をクリックすると

ボタン１の場所にボタン２がきて
ボタン２の左にボタン３
ボタン２の左上にボタン４
ボタン２の上にボタン５

を出現させたいです・・・
またこの時に、少し動きを加えたいのですが、
ボタン１クリックすると
ボタン３～５が順番に
ボタン２から飛び出てくるような感じにしたいです

できればCSSのみでの実行をしたいのです・・・
無理ならJavaScriptでの実行をご教示ください

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

忘れてました。

１クリック後に２がでたあと、
２～５のボタンをクリックする、もしくは、ページをタップしたらボタン１に切替
（戻る）ようにしたいです・・・

補足日時：2017/04/25 16:49
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： fujillin
回答日時：2017/04/26 17:32

ANo1です。

CSSはよくわかってないのですが（←しつこい（笑））、ご質問文全体を読んで、方法を決めまています。

CSSでは、スクリプトのようにclickイベントでの処理といったことができませんので:target属性を利用して実現していますが、一方で、元に戻すためにはtargetを外す必要があります。

＞２～５のボタンをクリックする、もしくは、ページ
＞をタップしたらボタン１に切替（戻る）～～
とありましたので、結局、『どこをクリックしても戻る』ものと解釈して、#closerをクリックさせることで、targetを外すようにしてあります。
実際には、#closer::beforeで画面全体を覆う透明レイヤをかけておいて、他の要素が見えていても、クリックした場合は#closerをクリックしたことになるような仕組みにしています。

＞この番号のボタン全て一体化？となってるのでしょうか？
一体化はしていません。（と言うか、「一体化」の意味がよくわかってませんが…）
CSSの指定で同じ扱いができるように、包含要素でくくったりしてはいますが、通常のHTMLの要素の構成通りです。

＞上手くリンクできない・・・
確認してはいませんが、リンクできないのは上記の#closerのレイヤーによるものと思いますので、有効化したい要素をレイヤーのカバーから外すようにしてあげれば、リンクは生きるはずと思います。（多分…）

もしも不要であるなら#closerを外してしまうという方法もあるのかもしれません。
スクリプトと違って、要素を削除してもエラーなどになることはありません。
（CSSの適応対象がなくなるだけなので…）

- 0
- 件

通報する

参考程度に

No.1

回答者： fujillin
回答日時：2017/04/26 13:53

こんにちは

CSSはよく知らないので、MDNをチラ見しながら作成してみました。
それなので、かなりテキトーですが、一応、動作はするようです。

きちんと調べたうえでの調整は、おまかせいたします。
https://developer.mozilla.org/ja/docs/Web/CSS/Re …

※ ベンダープレフィックスは省略していますので、一部のブラウザでは動作しないかも。
　（fx53.0、IE11.0で動作を確認）
※ はじめはtransitionで試したのですが、うまくいかないのでanimationにしました。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>

<style type="text/css">
html, body { height:100%; }

#hoge{
position: fixed;
width: 160px; height: 160px;
bottom: 0; right: 0;
}

#hoge a, #fuga li{
position: absolute;
width:40px; height:40px;
font-size: 36px;
color: #000;
background-color: #CEF;
border: 1px solid #6BE;
border-radius: 20px;
text-align: center;
text-decoration: none;
list-style-type: none;
background: linear-gradient(135deg, #EFF, #8CF);
top: 100px; left: 100px;
}

#fuga{ display: none; }
#fuga:target{ display: block; }
#fuga li:first-child { z-index: 990; }

#closer::before {
content: "";
display: block; position: fixed;
left: 0; top: 0;
width: 100%; height: 100%;
background-color: transparent;
z-index: 999;
}

/* アニメーション設定 */
#fuga:target li:nth-child(2){
top: 110px; left: 0px;
animation: 1.5s ease-in reverse move2;
}
#fuga:target li:nth-child(3){
top: 28px; left: 28px;
animation: 3s ease-in reverse move3;
}
#fuga:target li:nth-child(4){
top: 0px; left: 110px;
animation: 4.5s ease-in reverse move4;
}

@keyframes move2 {
to { top: 100px; left: 100px; }
}
@keyframes move3 {
50% { top: 100px; left: 100px; }
to { top: 100px; left: 100px; }
}
@keyframes move4 {
33% { top: 100px; left: 100px; }
to { top: 100px; left: 100px; }
}
</style>
</head>
<body>

<article id="hoge">
<a href="#fuga">1</a>

<div id="fuga">
<ul><li>2</li><li>3</li><li>4</li><li>5</li></ul>
<a href="#" id="closer"></a>
</div>

</article>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

ありがとうございます！！
思っている動作です！

もう１つ教えてほしいのですが、

<li>2</li＞
↓
<li><a href="http://～.com">２</a></li＞

のようにアンカータグを入れたいのですが、
この番号のボタン全て一体化？となってるのでしょうか？

上手くリンクできない・・・

通報する

お礼日時：2017/04/26 14:24

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！