Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>This isn't perfect, but should give you an idea:</p> <pre><code>jQuery("div.subMenu div").hide(); jQuery("div.mainMenu div.menuItem").mouseleave(function () { jQuery("div.subMenu div").hide(); }).mouseenter(function () { var linkText = jQuery("a", this).text(); jQuery("div.subMenu div").each(function (n) { var hdrText = jQuery("h2", this).text(); if (linkText == hdrText) { jQuery(this).show(); } else { jQuery(this).hide(); } }); }); // update: keep the submenu open jQuery("div.subMenu div").mouseleave(function () { jQuery(this).hide(); }).mouseenter(function () { jQuery(this).show(); }); </code></pre> <p>I am presuming that there is a <code>div</code> under the <code>subMenu</code> for each menu item, eg.</p> <pre><code>&lt;div class="subMenu"&gt; &lt;div id="new"&gt; &lt;h2&gt;I'm New&lt;/h2&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit&lt;/p&gt; &lt;/div&gt; &lt;div&gt; &lt;h2&gt;Ministries&lt;/h2&gt; &lt;p&gt;sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/p&gt; &lt;/div&gt; &lt;div&gt; &lt;h2&gt;Beleifs+Mission&lt;/h2&gt; &lt;p&gt;Ut enim ad minim veniam, quis nostrud exercitation ullamco&lt;/p&gt; &lt;/div&gt; &lt;div&gt; &lt;h2&gt;Listen&lt;/h2&gt; &lt;p&gt;laboris nisi ut aliquip ex ea commodo consequat.&lt;/p&gt; &lt;/div&gt; &lt;div&gt; &lt;h2&gt;Connect&lt;/h2&gt; &lt;p&gt;Duis aute irure dolor in reprehenderit in voluptate velit&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>Explanation:</p> <ol> <li>Start off by hiding all the <code>div</code>'s inside <code>subMenu</code>.</li> <li>The <code>mouseleave</code> on all the menu items unconditionally hides all the <code>div</code>'s inside <code>subMenu</code>, even if they are already hidden.</li> <li>The <code>mouseenter</code> on all the menu items hides all those same <code>div</code>'s, except it shows the one that has <em>identical text</em> inside the menu item's link and the submenu's <code>h2</code> header. (There are <em>definitely</em> better ways to do this, but you need some way to correlate the menu item and the submenu. If you have any say about the <code>id</code>'s, you might be able to use a naming convention that expresses the connections.)</li> </ol> <p>Update: Note that there's a lot of unconditional <code>hide()</code> going on. For instance, the submenu will go away when the mouse leaves the menu item. To keep the submenu visible while the mouse is on it, add <code>mouseleave</code> and <code>mouseenter</code> handlers for <code>"div.subMenu div"</code> as well. To avoid flicker, you might need to keep track of the state of each submenu.</p> <p>Update 2: I've added a couple of lines to keep the submenu open while the mouse is in it. YMMV on flicker. This works for me without any change to the tables (it just ignores them). However, the submenu <code>div</code>'s need to be positioned right against the menu item, so that the mouse can travel from the menu item to the submenu without it disappearing. In my test code, I set the following to make sure it would work:</p> <pre><code>div.mainMenu div.menuItem, div.subMenu div, div.subMenu div h2 { margin-top: 0; margin-bottom: 0; } </code></pre> <p>If this bunches up the text too much, you can add padding in lieu of margin.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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