[JQUery] jQuery drop-down menu display when mouse hover

【goal】

Create a button that appears when the mouse hover, like below

【merit】

■ Improvement of UX ■ Improved understanding of jQUery

【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 "" and 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 "What is logolog", homes_about_path, class:'btn btn-primary' %>
    <%= link_to "Member registration", new_user_session_path, class:'btn btn-primary' %>
    <%= link_to "Contact Us", homes_inquiry_path, class:'btn btn-primary' %>
  </div>
</div>

js

• Ignite when (#open_menu) hover
• "Fade Toggle" is a method that hides and appears

hoge.js

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

that's all

[I want to read it together]

■ [jQuery] A guy that even beginners can understand well https://qiita.com/tanaka-yu3/items/a03734b248c3f2ee8461

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

■ [jpostal] jQuery address auto-fill rails Probably the easiest way https://qiita.com/tanaka-yu3/items/e5403e717e3ee3c3f64e