Scale + Fade Menu
ホバーでスケール＋フェードするメニューアイテム。
HTML
<ul class="sf-menu"> <li><a href="javascript:void(0)">Dashboard</a></li> <li><a href="javascript:void(0)">Analytics</a></li> <li><a href="javascript:void(0)">Settings</a></li> </ul>
CSS
.sf-menu {
list-style: none;
display: flex;
flex-direction: column;
gap: 2px;
}
.sf-menu a {
display: block;
padding: 10px 16px;
color: #666;
text-decoration: none;
font-size: 14px;
font-weight: 500;
border-radius: 8px;
transition: all .2s ease;
}
.sf-menu a:hover {
background: #f5f5f5;
color: #1a1a1a;
transform: scale(1.02);
}