Databases
StackOverflow2013
Postsdbo
POJavascript Tab Menu with sIFR
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJavascript Tab Menu with sIFR
    text
    copied!<p>I am working on a two-level menu like the Dynamic Drive examples on <a href="http://www.dynamicdrive.com/dynamicindex1/ddtabmenu.htm" rel="nofollow noreferrer">this page</a>. The goal is to show a subnav layer below the main nav <code>onmouseover</code>, reverting to each page's default subnav layer after a timed interval. It works, except for a big problem: I am using sIFR on the main navigation items (<code>&lt;a&gt;</code>s inside of <code>&lt;li&gt;</code>s). The script logic doesn't work on the sIFRized items, because it targets <code>&lt;a rel=""&gt;</code> tags, which have been replaced.</p> <p>I tried changing the script to target the parent <code>&lt;li&gt;</code>s, but it just screwed up the main nav. I am not very advanced with Javascript so any advice is appreciated!</p> <p>One idea: is it possible to sIFR replace each navigation <code>&lt;a&gt;</code> instead of replacing each <code>&lt;li&gt;</code>? Or would the <code>&lt;a rel=""&gt;</code> still be unavailable to the menu script?</p> <p>I'm not married to this javascript solution, in fact I tried a few other methods of my own using simple Javascript show/hide methods. However, this script has the "reverting to default" behavior I am looking for.</p> <p>--> <a href="http://www.dynamicdrive.com/dynamicindex1/ddtabmenufiles/ddtabmenu.js" rel="nofollow noreferrer">Javascript menu source from Dynamic Drive</a></p> <p>• Main navigation source:</p> <pre><code>&lt;div id="mainNav"&gt; &lt;ul&gt; // rel="subnav1" shows the "subnav1" layer in the snippet below &lt;li class="navLi"&gt;&lt;a href="around-othello.php" rel="subnav1"&gt;Around Othello&lt;/a&gt;&lt;/li&gt; // rel="subnav2" shows the "subnav2" layer in the snippet below &lt;li class="navLi"&gt;&lt;a href="living-here.php" rel="subnav2"&gt;Living Here&lt;/a&gt;&lt;/li&gt; // rel="subnav3" shows the "subnav3" layer in the snippet below &lt;li class="navLi"&gt;&lt;a href="link-to-it.php"&gt;Link to it&lt;/a&gt;&lt;/li&gt; &lt;li class="navLi"&gt;&lt;a href="whats-new.php"&gt;What's New&lt;/a&gt;&lt;/li&gt; &lt;li class="navLi"&gt;&lt;a href="contact.php"&gt;Contact&lt;/a&gt;&lt;/li&gt; &lt;li class="navLi"&gt;&lt;a href="retail.php"&gt;Retail Hub&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>• sIFR replacement for main nav items</p> <pre><code>sIFR.replace(grotesqueMT, { selector: 'li.navLi', tuneWidth:4, forceSingleLine:true, ratios:[8, 1.3, 11, 1.21, 12, 1.2, 14, 1.19, 21, 1.16, 28, 1.13, 38, 1.12, 61, 1.11, 94, 1.1, 95, 1.09, 103, 1.1, 107, 1.09, 110, 1.1, 119, 1.09, 120, 1.1, 1.09], css: ['.sIFR-root { background-color:#5a7e92; color:#ffffff; font-size:18; }' ,'a { color:#ffffff; text-decoration:none; }' ,'a:link { color:#ffffff; text-decoration:none; }' ,'a:hover { color:#f0eed6; text-decoration:underline; }' ] }); </code></pre> <p>• Subnav source (a separate code snippet)</p> <pre><code>&lt;div id="subnav1" class="subnav"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="around-othello.php"&gt;Around Othello&lt;/a&gt;&lt;/li&gt; &lt;li class="pipe"&gt; | &lt;/li&gt; &lt;li&gt;&lt;a href="around-othello.php?p=your-big-backyard"&gt;Your Big Backyard&lt;/a&gt;&lt;/li&gt; &lt;li class="pipe"&gt; | &lt;/li&gt; &lt;li&gt;&lt;a href="around-othello.php?p=explore-the-area"&gt;Explore the Area&lt;/a&gt;&lt;/li&gt; &lt;li class="pipe"&gt; | &lt;/li&gt; &lt;li&gt;&lt;a href="communityBuzz"&gt;Community Buzz&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div id="subnav2" class="subnav"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="around-othello.php"&gt;Around Othello&lt;/a&gt;&lt;/li&gt; &lt;li class="pipe"&gt; | &lt;/li&gt; &lt;li&gt;&lt;a href="communityBuzz"&gt;Community Buzz&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div id="subnav3" class="subnav"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="living-here.php"&gt;Living Here&lt;/a&gt;&lt;/li&gt; &lt;li class="pipe"&gt; | &lt;/li&gt; &lt;li&gt;&lt;a href="living-here.php?p=living-green"&gt;Living Green&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre>
 

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