Implementing hoverIntent for Drop Down Menu (coming from click_event)
- by stormeTrooper
I've just recently started programming, I was hoping for some help.
I have a drop down menu that was originally activated by click_event, however I want to now implement hoverIntent in order to make the menu drop.
The issue I am having now is being able to use the menu, because whenever I invoke the menu now, once I leave the area that activates the menu, the menu closes. If you could explain to me like I'm five, I'd appreciate it, thanks :)
The code I am using as follows:
JavaScript:
function setupUserConfigMenu() {
$('.user_profile_btn').hoverIntent(
function (event) {
$('#user_settings_dropdown').animate({height:['toggle', 'swing']
}, 225);
},
function (event) {
$('#user_settings_dropdown').animate({height:['toggle', 'swing']
}, 225);
})
}
HTML:
<li>
<a href="<%= "#" %>" class="user_profile_btn" title="Your profile page"><%= truncate(current_user.full_name || current_user.name, :length => 28) %>
<div class="arrow_down"></div></a>
<ul id="user_settings_dropdown">
<li>
<a href="<%= current_user.get_url(true) %>">
<%= image_tag current_user.get_thumb_url, :size => "30x30" %>
<div>
<%= truncate(current_user.full_name || current_user.name, :length => 40) %>
<br>
View profile
</div>
</a>
</li>
<div class="grey_line"></div>
<li class="settings_list_item">
<%= link_to "Settings", edit_user_registration_path %>
</li>
<li class="settings_list_item">
<%= link_to "About", "/about" %>
</li>
<li class="settings_list_item">
<%= link_to "Logout", destroy_user_session_path, :method => :delete %>
</li>
</ul>
</li>
