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


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

画面収録 2020-07-17 10.09.25.mov.gif


■ Improvement of UX ■ Improved understanding of jQUery

【Development environment】

■ Mac OS catalina ■ Ruby on Rails ( ■ Virtual Box:6.1 ■ Vagrant: 2.2.7




<div id="open_menu">
  <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' %>



$(function () {
  $('#open_menu').hover(function () {

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

Recommended Posts

[JQUery] jQuery drop-down menu display when mouse hover
Switch the display screen when hovering the tab with jQuery