[Java] [JQUery] jQuery drop-down menu display at mouse hover

less than 1 minute read

##【goal】 Create a button that will be displayed when the mouse hovers over, as shown below

![Screen capture 2020-07-17 10.09.25.mov.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620689/29e21725-3c67-adda-(80c1-1f4703e2cd91.gif)

##【merit】 ■ UX improvement ■Improved understanding of jQUey

##【Development environment】 ■ Mac OS catalina ■ Ruby on Rails (5.2.4.2) ■ Virtual Box:6.1 ■ Vagrant: 2.2.7

##【Implementation】

html

*Add “id=”open_menu”” *Add “id=”menu””, hide with “style=”display: none;””

html:hoge.html.erb


<div id="open_menu">
  <h2>logolog</h2><br>
  <div id="menu" style="display: none;">
    <%= link_to "logolog is", homes_about_path, class:'btn btn-primary' %>
    <%= link_to "Member registration", new_user_session_path, class:'btn btn-primary' %>
    <%= link_to "contact", homes_inquiry_path, class:'btn btn-primary' %>
  </div>
</div>

js

  • Fired when (#open_menu) hovers
  • “FadeToggle” is a method that hides or appears

hoge.js


$(function () {
  $('#open_menu').hover(function () {
    $('#menu').fadeToggle();
  });
});

that’s all

[I want to read it together]

■ [jQuery] The one that even a beginner could understand well https://qiita.com/tanaka-yu3/items/a03734b248c3f2ee8461

■ [jQuery] scroll I started the one that comes up when scrolling. https://qiita.com/tanaka-yu3/items/9a66c4c0e058291694dd

■ [jpostal] jQuery automatic address input rails Probably the easiest method https://qiita.com/tanaka-yu3/items/e5403e717e3ee3c3f64e