<section class="contentBody">
<button type="button" class="menu" data-button="menu">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-menu" aria-label="メニュー"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 8l16 0" /><path d="M4 16l16 0" /></svg>
<span class="menu__text">メニュー</span>
</button>
</section>
<section class="contentBody">
<p class="result" data-view="result"></p>
</section>
body{
margin: 0;
padding: 0;
}
.contentBody{
padding: 20px;
}
.menu{
display: flex;
align-items: center;
justify-content: center;
background: #333;
color: #fff;
border-radius: 100%;
width: 60px;
height: 60px;
}
.menu__text{
display: none;
}
.result{
padding: 5px;
background: #eee;
border: #ccc 1px solid;
border-radius: 8px;
min-height: 1.5rem;
}
// data-buttonを取得
const menuButton = document.querySelector('[data-button="menu"]');
// data-viewを取得
const resultView = document.querySelector('[data-view="result"]');
// クリックイベントを設定
menuButton.addEventListener('click', () => {
// メニューがクリックされたら、結果を表示
resultView.textContent = 'メニューがクリックされました';
});
// hoverイベントを設定
menuButton.addEventListener('mouseover', () => {
// マウスが乗ったら、テキストを表示
resultView.textContent = 'メニューにマウスが乗りました';
});
// マウスが外れたら、テキストを非表示
menuButton.addEventListener('mouseout', () => {
resultView.textContent = '';
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.