ブログトップ

CSSで作る開閉で向きが変わる矢印付きアコーディオン(レスポンシブ対応)

cssで作る開閉で向きが変わる矢印付きアコーディオン!!!(タイトルママ

こちらのサイト様の合わせ技です。
ありがとうございます😭😭

とはいえやっと人様に還元できるようなコードが書けたよ。

右端に矢印Ver

デモ

「バー」を押すとアコーディオンが開いて、矢印の向きが変わるよ。
バーや内容にimgを指定することもできる。

HTML

inputのid名とlabel名を連動させるのがポイント。
つまり3つ目を増やすときはcssにmenu_bar03を追加する。

<div class="menu">
  <input type="checkbox" id="menu_bar01" />
  <label for="menu_bar01">バー01</label>
  <ul id="links01">
    <li>内容01-A</li>
    <li>内容01-B</li>
    <li>内容01-C</li>
  </ul>
  <input type="checkbox" id="menu_bar02" />
  <label for="menu_bar02">バー02</label>
  <ul id="links02">
    <li>内容02-A</li>
    <li>内容02-B</li>
    <li>内容02-C</li>
  </ul>
</div>

CSS

アニメーションを矢印のcssに追加すると、矢印がクルっとなってたのしい。

/*アコーディオン全体*/
.menu {
	width: 100%;
	padding: 10px 10px 20px;
}
.menu input {
	display: none; /*チェックボックスを隠す*/
}

/*バー部分*/
.menu label {
	cursor :pointer;
	display: block;
	text-decoration: none;
	color: #fff;
	line-height: 1;
	position: relative;
	margin: 0 0 10px;
	padding: 10px;
	background-color: #333;
}

/*開いたときに表示される部分*/
.menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
	margin-bottom: 1px;
}
.menu li {
	max-height: 0;
	overflow-y: hidden;
	-webkit-transition: all 0.5s; /*閉じるときのアニメーション*/
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}
#menu_bar01:checked ~ #links01 li,
#menu_bar02:checked ~ #links02 li {
	max-height: 30px; /*開いたときに表示されるliの高さ*/
	opacity: 1;
	-webkit-transition: all 0.5s; /*開くときのアニメーション*/
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}
 /*開いたときの下の余白*/
#menu_bar01:checked ~ #links01 li:last-child,
#menu_bar02:checked ~ #links02 li:last-child {
	margin-bottom: 20px;
}

/*閉じた状態の矢印描画*/
.menu label:after{
	content:"";
	display:block;
	width:8px;
	height:8px;
	border-top: #fff 2px solid;
	border-right: #fff 2px solid;
	-webkit-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
	transform: rotate(135deg);
	position:absolute;
	right: 2%;
	top: 0;
	bottom: 15%;
	margin:auto;
}
/*開いた状態の矢印描画*/
.menu input[type=checkbox]:checked + label:after{
	content:"";
	display:block;
	width:8px;
	height:8px;
	border-top: #fff 2px solid;
	border-right: #fff 2px solid;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	position:absolute;
	right: 2%;
	top: 7%;
	bottom: 0;
	margin:auto;
}

こちらは左に>の矢印Verで、さらにめちゃくちゃ勉強になるサイト様🗽

レッドビーシュリンプはかわいいので正義

あ~あこがれの~レッドビーシュリンプ!!!🦐🦐🦐

かわいい~!!!☺️💕💕💕💕💕💕
でも1匹500円…お高い…🦐
でもモスと浮草も入ってた…ウィローモスなのかはなぞだけど巻き付けといた…
モサモサするといいな~(:3ꇤ[▓▓]

P-CUTキッスがなくて代わりの使ったら茶ゴケが発生した
P-CUTキッス入れたら生えなくなった…P-CUTキッスはすごい👏👏👏

これは壁紙変えたやつ🙋‍♀️

お誕生日だったよ🍰🎊
桃のぷるぷるレアチーズケーキにロウソクぶっさす暴挙👏👏👏😊

お花ももろたよ💐

手帳会議2019夏

ほぼ日の2020発売予定のお知らせが来ましたね!📨
わいは来年もほぼ日avecの予定やで🙋‍♀️

夏のラジオ体操のように出社したらスタンプを押す…🙋‍♀️

あとカレンダーの日にちがないとこにマステ貼っとくと個人的に見やすい😊
なんか長い期間あるときは細いマステ!🎀
すっげーわかりやすくなる👏👏
予定が混むとごちゃっとなるけどごちゃごちゃ好き勢としてはウェルカムウェルカム👏👏👏

これはおまけのレモンちゃん🍋

ちなみにこのブログのサブタイでもあるフィキサチーフというのはデッサンとかがかすれないよう保存するためのいわゆる定着液のことだよ✏️
ブログの名前にぴったりだよね💁‍♀️実際使ったことはないけど🤗

最近のわが家は南国おめでとう👏🌴🌴🌴

カッフェじゃなくてカフェだって知ってるよ言わせんな恥ずかしい

俺ティー27巻まだキンドルドルで出ない🥺
電子書籍って遅いんだね…😞🌧

これは恒例のサイト更新のお礼にもらったやつ!
こちらこそいつもありがとう😭💕
レモンちゃんシールとか尊すぎる…ありがたやありがたや…🙏🙏🙏

これは連休で猫カッフェに行ったやつ🙋‍♀️
猫天国👼🐈🐈🐈

猫釣り師1級わい!!!!👏👏👏👏

でも1時間半くらいでくしゃみ出だしたからわいやはりアレルギー疑惑…😢

あとはベンジャミン(鳥かごの右下)がハゲ散らかってしまった最近のわが家🏠

ソファ欲しいな〜〜そしてもう少し背の高いカッフェテーブル…
そしたらPC作業しやすくなりそう…🥰
でも床生活の人生だから悩みどころ🤔
つーか先立つものがないわ…💸
ノートPCが宙に浮きました✌️💻

休日は風呂が嫌いすぎて頭からおっさんのにおいがする🛁

水槽のコケがやっときれいに!【P-CUT Kiss】

苔がむしむしで、1週間に1〜2回くらいはコケ掃除をしないといけなかったミニ水槽。
水槽のガラス面や流木、水草にまで緑髭ゴケがモサモサ…
さらに最近は黒髭ゴケまで生えてくる始末でした😞

せめて緑のコケだけでも…と期待して、コケ取り生体で有名なオトシンクルスやエビも入れましたが、ほぼ効果はありませんでした(エビはフィルターについているスポンジをピカピカにしてくれました笑)。

コケ除去効果のある添加剤を混ぜたりもしましたが、これもダメ🙅‍♀️

それならと常時水槽に設置するタイプをダメ元で使ってみたところなんと…!
これが奇跡の大当たり!!!
1週間たってもピカピカ〜〜〜〜😭✨✨

使ったのはこちら!!

寿工芸 P・カットキッス

新品価格
¥315から
(2019/5/13 14:13時点)

こちらは30~40cmの小型水槽用です。
大きい水槽用もあるみたいです!

使い方は、水槽や外掛けフィルター内に製品付属のキスゴムでくっつけるだけ!
わが家は外かけフィルターに設置しました。

白いモコモコ(ろ材)の後ろにあります。水に浸かるように設置します。
これだけでピカピカです!!!✨✨✨

気をつける点は、設置前に苔は大体取り除いておく必要があるのと、活性炭と併用すると効果が薄くなる場合があることです。
外掛けフィルターのろ材は活性炭と一体になっているものもあるので注意が必要です。
うちはちょうど活性炭のものからバクテリアのものに変えた時期だったのでちょうどよかったです!

あとは、まれに茎をもたない葉のみの水草などにも影響が出る場合があるので、その際は使用を中止してくださいとのことです。

いや〜水槽がピカピカなのは気持ちがいいな〜〜〜☺️🎶

しかしこのフィルターのろ材がなかなか売ってなくて、活性炭とバクテリアの2種類あるんだけど、バクテリアの方は本当にお店でみかけない…😞
ネットで買うしかないかな〜
ちなこれ👇👇👇

ジェックス スリムフィルター交換バクテリアマット3個-N

新品価格
¥436から
(2019/5/13 14:12時点)

お得な6個入りもありますね!

ジェックス バクテリアスリムマット6個入 スリムフィルター用交換ろ過材

新品価格
¥741から
(2019/5/13 14:09時点)

ということで最後ろ材の話になりましたが笑
P-CUT Kiss、水槽のコケにお悩みの方はぜひぜひ使ってみてください!!

現場からは以上です🙋‍♀️