様々なコンポーネントを開発するにあたってのサンプルレシピを記載します。
※この記事は、随時更新します。
トグルスイッチについて
(完成イメージ)
Index.html
<div class="switch_outer_1">
<div class="toggle_switch_1"></div>
</div>
<div class="switch_outer_2">
<div class="toggle_switch_2"></div>
</div>
Index.css
.switch_outer_1 {
width: 105px;/*120px*/
height: 50px;/*60px*/
background-color: lightgrey;
border-radius: 10px;/*四隅の枠*/
position: relative;
cursor: pointer;
transition: background-color .3s ease-in-out;/*切り替えの安海メーション*/
}
.switch_outer_1.active {
background-color: blue;
}
/*トグル内の設定*/
.toggle_switch_1 {
width: 35px;/*50px*/
height: 40px;/*50px*/
border-radius: 50%;
position: absolute;
background-color: white;
top: 0;
bottom: 0;
left: 5px;
margin: auto;
box-shadow: 1px 1px 7px #B7B7B7, -1px -1px 4px #CECECE inset;
transition: left .3s ease-in-out;
}
.toggle_switch_1.active {
left: 65px;
}
/*No.2*/
/*トグル内の設定*/
.switch_outer_2 {
width: 105px;/*120px*/
height: 50px;/*60px*/
background-color: lightgrey;
border-radius: 10px;/*四隅の枠*/
position: relative;
cursor: pointer;
transition: background-color .3s ease-in-out;/*切り替えの安海メーション*/
}
.switch_outer_2.active {
background-color: blue;
}
.toggle_switch_2 {
width: 35px;/*50px*/
height: 40px;/*50px*/
border-radius: 50%;
position: absolute;
background-color: white;
top: 0;
bottom: 0;
left: 5px;
margin: auto;
box-shadow: 1px 1px 7px #B7B7B7, -1px -1px 4px #CECECE inset;
transition: left .3s ease-in-out;
}
.toggle_switch_2.active {
left: 65px;
}
Transitionプロパティのアニメーションについて
transition: アニメーションさせたいプロパティ名 秒数 アニメーションの種類
【書き方例】
transition: background-color .3s ease-in-out
■linear（アニメーションの開始から終了まで等速にするアニメーション）
■ease-in-out（徐々に加速し、最後はスピードが緩まるアニメーション）
Index.js
//スイッチの外枠とスイッチそれぞれの各要素を取得する
const switchOuter = document.querySelector(".switch_outer_1");
const toggleSwitch = document.querySelector(".toggle_switch_1");
const switchOuter2 = document.querySelector(".switch_outer_2");
const toggleSwitch2 = document.querySelector(".toggle_switch_2");
//クリックイベントでacitveクラスを追加/削除する処理
switchOuter.addEventListener("click", () => {
switchOuter.classList.toggle("active");
toggleSwitch.classList.toggle("active");
});
switchOuter2.addEventListener("click", () => {
switchOuter2.classList.toggle("active");
toggleSwitch2.classList.toggle("active");
});
ナビゲーションバーのアコーディオンの動的制御
【完成イメージ】
(Before)
(after)
■使用したjQueryのバージョン
version 3.7.1
■参考にしたサイト
125naroom:【CSS】三角アイコンと矢印アイコンをつくる
index.html
<!DOCTYPE html>
<html>
<head>
<meata charset="UTF-8"/>
<title>アコーディオン</title>
<!--jqueryyomikomi -->
<script type="text/javascript" src="./jquery_v3.7.1.js"></script>
<link rel="stylesheet" href="./index.css" />
<script type="text/javascript" src="./index.js"></script>
</head>
<body> <!-- トリガーの部分 -->
<div class="header">
<div class="nav-open">
<a href="#" class="arrow_u"></a>
<span>ナビゲーションメニューの開閉</span>
</div>
<!-- ナビゲーションメニュー項目 -->
<nav>
<ul>
<li>
<a href="#">ラベル1</a>
<label>ラベル1</label>
</li>
<li>
<a href="#">ラベル2</a>
<label>ラベル2</label>
</li>
<br/>
<li>
<a href="#">ラベル3</a>
<label>ラベル3</label>
</li>
</ul>
</nav>
</div>
</body>
</html>
index.css
/*三角アイコン*/
body{
font-family:'メイリオ', 'Meiryo';
}
/*ナビゲーションタグの設定*/
nav{
display: none;
}
.nav-open{
padding: 15px;
color: white;
font-size: 20px;
background:blue;
position: relative;
}
ul li{
display: inline-block;/*liタグを横並び*/
}
/*ナビゲーションバーの矢印の設定*/
.arrow_u {
position: relative;
display: inline-block;
padding-left: 20px;
color: white;
text-decoration: none;
}
/*ナビゲーションメニューが閉じている場合は、下向き矢印を表示*/
.nav-open .arrow_u::before {
content: '';
width: 6px;
height: 6px;
border: 0;
border-bottom: solid 6px white;/*下矢印の色設定 solid 2px #333*/
border-right: solid 6px white;/*下矢印の色設定solid 2px #333*/
position: absolute;
top: 50%;
left: 0;
margin-top: -6px;
transform: rotate(45deg);
}
/*ナビゲーションメニューが開いている場合は、上向き矢印を表示*/
.nav-open.active .arrow_u::before {
content: '';
width: 6px;
height: 6px;
border: 0;
border-bottom: solid 6px white;/*上矢印の色設定solid 2px #333*/
border-right: solid 6px white;/*上矢印の色設定solid 2px #333*/
position: absolute;
top: 50%;
left: 0;
margin-top: -6px;
transform: rotate(220deg);
}
/*---不要な部分---*/
/*
.nav-open::before{
content: "▲";
position: absolute;
left: 20px;
}
.nav-open.active::before{
content: "▲";
}
*/
index.js
$(document).ready(function(){
accordionBtnClick();
});
function accordionBtnClick(){
//クリックで動く
$('.nav-open').click(function(){
$(this).toggleClass('active');
$(this).next('nav').slideToggle();
});
}
/*
$(function(){
//クリックで動く
$('.nav-open').click(function(){
$(this).toggleClass('active');
$(this).next('nav').slideToggle();
});
//ホバーで動く
$('.nav-open').hover(function(){
$(this).toggleClass('active');
$(this).next('nav').slideToggle();
});
});
*/