I used the link_to method to make page transitions, but I was dissatisfied with the fact that the only clickable part was the characters, so I investigated and implemented it.
Give the link_to method a class name.
When attaching class:" class name "
Style the class name with display: block; in CSS.
Furthermore, if you expand the range with padding, the clickable part will expand.
By the way, even if you margin, the part that can be clicked does not expand.
erb
<ul>
<li class="menu-list">
<%= link_to 'My page', hoge_path, class: "menu-name" %>
</li>
<li class="menu-list">
<%= link_to 'calendar', hoge_path, class: "menu-name" %>
</li>
</ul>
css
.menu-list {
margin: 30px auto;
border: black 3px solid;
padding: 0px;
}
.menu-name {
display: block;
padding: 30px;
}
display: block; and padding are the important parts.
Recommended Posts