👋

【jQuery】変数を使ってホバー時にサイドバーを動かす方法

2022/09/03に公開約1,300字

変数とは

変数は様々な情報を入れるための箱のような存在です。
名前のついた箱を用意し、その中に値が変化するモノを入れておくことでいつでも取り出せる便利な箱になります。
変数を用いれば変更・修正する際にその1箇所だけを変更すればいいので楽です。

要素の横のバーを動かす

ホバーした際に黒のバーをホバーした要素の横に移動させます。
ホバーしていない時は一番上にバーがある上程です。

HTML
<div class="sidebar">
        <ul class="sidebar_links">
          <li><a href="#"><span>サイドメニュー01</span></a></li>
          <li><a href="#"><span>サイドメニュー02</span></a></li>
          <li><a href="#"><span>サイドメニュー03</span></a></li>
          <li><a href="#"><span>サイドメニュー04</span></a></li>
        </ul>
        <div class="sidebar_links_bar"></div>
      </div>
CSS
.sidebar {
  position: relative;
  width: 200px;
}

.sidebar_links_bar {
  background-color: #000;
  height: 80px;
  right: 0;
  position: absolute;
  top: 0;
  width: 10px;
}

.sidebar_links > li {
  border-top: 1px solid #000;
}

.sidebar_links > li > a {
  align-items: center;
  background-color: #fff;
  display: flex;
  height: 79px;
  padding: 0 30px;
}
jQuery
$('.sidebar_links > li').hover(function() {
  var slideIndex = $('.sidebar_links > li ').index(this);
  $('.sidebar_links_bar').stop().animate({'top': slideIndex * 80}, 300);
},function() {
  $('.sidebar_links__bar').stop().animate({'top': 0});
});

Discussion

ログインするとコメントできます