cssで作る開閉で向きが変わる矢印付きアコーディオン！！！（タイトルママ
こちらのサイト様の合わせ技です。
ありがとうございます🙇♀️🙇♀️
web/EC業界に強い転職。正社員・派遣求人情報 ウェブタント
1 User
2 Pockets
矢印付きのメニューをつくろう
あけましておめでとうございます。フリーのマークアップエンジニア草野です。 ちょっと間が空いてしまいましたが、第三回のテーマは「矢印付きのメニューをつくろう」です。 今回はP...
とはいえやっと人様に還元できるようなコードが書けたよ。
右端に矢印Ver
デモ
「バー」を押すとアコーディオンが開いて、矢印の向きが変わるよ。
バーや内容にimgを指定することもできる。
HTML
バーを1つずつ開閉させるには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 {
height: 0;
overflow-y: hidden;
transition: padding-bottom 0.5s, padding-top 0.5s; /*閉じるときのアニメーション*/
-webkit-transition: padding-bottom 0.5s, padding-top 0.5s;
-moz-transition: padding-bottom 0.5s, padding-top 0.5s;
-ms-transition: padding-bottom 0.5s, padding-top 0.5s;
-o-transition: padding-bottom 0.5s, padding-top 0.5s;
}
#menu_bar01:checked ~ #links01 li,
#menu_bar02:checked ~ #links02 li {
height: auto; /*開いたときに表示されるliの高さ*/
opacity: 1;
background: #f1f1f1;
padding: 10px;
}
/*開いたときの下の余白*/
#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;
}開いて表示させる部分にpaddingをつけると「transition: all 0.5s;」だと文頭も動いてしまうので、上下のみアニメーションさせたい場合は「transition: padding-bottom 0.5s, padding-top 0.5s;」とする🙋♀️
さらに仕組みがめちゃくちゃわかりやすいサイト様🙆♀️
サルワカ | サルでも分かる図解説明マガジン
98 Users
200 Pockets
ページが見つかりませんでした
