소개

머리글 막대에 마우스를 올릴 때 나타나는 슬라이드 메뉴를 만듭니다.
(자신의 비망록으로 적습니다)

완성 이미지

환경

MacOS 10.15.7
루비 2.6.5
Ruby on Rails 6.0.0

전제 조건

jQuery의 도입이 완료된 것.

일하자!

①html 작성

html.erb

<%# ログインユーザーの名前・アイコン表示 %>
      <div class="loginUser">
        <div class="loginUserInfo">
          <div class="loginUserInfo__Avatar">
            <%= image_tag current_user.image.url, class: "loginUserInfo__Avatar--image" %>
          </div>
          <span class=loginUserName>
            <%= current_user.name %>
          </span>
          <i class="fas fa-caret-down"></i>
        </div>
        <%# スライドメニューバー（マウスオーバー時出現） %>
        <ul class="dropDownMenu">
          <li>
            <i class="fas fa-user"></i>
            <%= link_to "マイページ", "/users/#{current_user.id}", class:"loginMenu" %>
          </li>
          <li>
            <i class="fas fa-plus-square"></i>
            <%= link_to  "投稿する", new_post_path, class: "loginMenu" %>
          </li>
          <li>
            <i class="fas fa-sign-out-alt"></i>
            <%= link_to "ログアウト", destroy_user_session_path, class:"loginMenu", method: :delete %>
          </li>
        </ul>
      </div>

scss는 다음과 같습니다.

scss

// ログインユーザーのアイコン・名前
.loginUser {
  width: 200px;
  height: 50px;
  margin-left: 5%;
}
.loginUserInfo {
  display: flex;
  align-items: center;
  &__Avatar {
    width: 40px;
    height: 40px;
    &--image {
      height: 100%;
      width: 100%;
      border-radius: 50%;
    }
  }
}
.loginUserName {
  font-size: 0.7em;
  margin-right: 5px;
}

.dropDownMenu {
  width: 200px;
  display: none;
  margin-left: -5px;
  margin-top: 5px;
  padding: 0;
  text-align: center;
  background-color: rgba($color: #222222, $alpha: 0.95);
}
.dropDownMenu li {
  cursor: pointer;
  width: 100%;
  padding: 2vh 0;
}
.dropDownMenu li a:hover {
  text-decoration: none;
  color: #00bfff;
}

이상입니다.

②js 파일에 jQuery로 처리를 기술

usermenu.js라는 새 파일을 만들고 슬라이더 처리를 작성합니다.

usermenu.js

$(function() {
  // loginUser上にオンマウスした時に発動するイベント
  $(".loginUser").hover(function(){
    //slideToggleメソッドを使ってスライドメニューを表示させる。
    $(this).children(".dropDownMenu").stop().slideToggle();
  });
});

hover 메소드를 사용해, loginUser 클래스상에 마우스가 탈 때, slideToggle 메소드를 사용해,
슬라이드 메뉴(.dropDownMenu)를 호출합니다.

stop 메소드는 hover할 때마다 같은 처리가 발동하지 않게 하기 위한 기술이 됩니다.

이상이 됩니다!