Databases
StackOverflow2013
Postsdbo
POActivate JQuery menu on Hover or Click
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POActivate JQuery menu on Hover or Click
    primarykey
    data
    text
    <p>My goal is to animate a JQuery menu to respond when hovered or clicked. Using the HoverIntent plugin the following code is working as intended to hover. But how do I add a click event while maintaining a user friendly menu? While planning how to write this I have considered adding a delay to the hover event when a menu item is clicked, however I am unsure how practical that implementation would be. How would I add the click event to the following code?</p> <pre><code>&lt;script type="text/javascript"&gt; $(document).ready(function() { function show() { var menu = $(this); menu.children(".options").slideDown(); } function hide() { var menu = $(this); menu.children(".options").slideUp(); } $(".menuHeader").hoverIntent({ sensitivity: 3, interval: 50, over: show, timeout: 300, out: hide }); }); </code></pre> <p></p> <pre><code>&lt;div id="SideMenu"&gt; &lt;div id="aMenu" class="menuHeader"&gt; &lt;h2&gt;Menu A&lt;/h2&gt; &lt;ul class="options" &gt; &lt;li&gt;&lt;a href=""&gt;Option a1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;Option a2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;Option a3&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div id="bMenu" class="menuHeader"&gt; &lt;h2&gt;Menu B&lt;/h2&gt; &lt;ul class="options" &gt; &lt;li&gt;&lt;a href=""&gt;Option b1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;Option b2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;Option b3&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div id="cMenu" class="menuHeader"&gt; &lt;h2&gt;Menu C&lt;/h2&gt; &lt;ul class="options" &gt; &lt;li&gt;&lt;a href=""&gt;Option c1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;Option c2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;Option c3&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>Sorry about the formatting of the code, and thank you for your help.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USenigmaspade
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COWhat is it you want to be clickable? If it's the same menuHeader then do you want it to be clickable to override the timeout? (So the user doesn't have to wait when they hover over things?)
      singulars
      1. POActivate JQuery menu on Hover or Click
      1. USJasoon
    2. COI don't know if you're thinking of adding click handling because of mobile devices, but on my websites a hover event allows mobile users to touch the menu and have it appear - no click event needed in the code. Just a thought, not sure why you want the click event as well.
      singulars
      1. POActivate JQuery menu on Hover or Click
      1. This table or related slice is empty.
    3. COThe problem was handed to me in an effort to further my grasp of JQuery, I don't see the result ever being used. Personally if tasked to create a user friendly menu I would have a hover event change the text color of links but not expand the menu unless clicked. Seems like a more user-friendly approach. Nevertheless I am trying to figure out how to make this work with the following intent: Menu expands when user hovers with currently a half second delay, I need to change the code to expand also on click. But without some sort of pause on the hover effect I agree with you both, seems pointless.
      singulars
      1. POActivate JQuery menu on Hover or Click
      1. USenigmaspade
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload