djlebarron
13 Apr 2009, 10:09 PM
Through trial and error, I've discovered a way to automatically display the top level of my CSS drop-down menu WITHOUT a link if a user's IE 5 and/or IE6 has scripting enabled, and WITH a link if a user's IE 5 and/or IE6 has scripting disabled. In everything except (scripting disabled) IE 5 and 6, it displays with no link.
I don't want a link on the top level of my CSS drop-down menu unless it's absolutely necessary. IE5 and IE6 need scripting enabled for the DDM to work so I alternately provide the lower level links via a page refresh and a php include for IE5 & IE6 scripting disabled users. But I think having the top level displayed with a link for other browsers and later IE versions looks redundent, sloppy and just creates confusion.
I've tried it in IE 5.5, 6, 7, and (7 emulated) 8 and also in Opera, Safari, Firefox and Chrome. Seems to work great. The code is below.
What do you think?
<ul>
<li style="border: 1px solid black;"><!--[if lt IE 7]><SCRIPT type="text/javascript"> document.write("<a>States</a>") </SCRIPT><![endif]-->
<noscript><!--[if lt IE 7]><a href="index.php?i=statemenu">States</a><![endif]--></noscript>
<!--[if !(lt IE 7)]><a>States</a><![endif]-->
<![if !IE]><a>States</a><![endif]>
<ul>
<li><a href="#">Alabama</a>
<a href="#">Alaska</a>
<a href="#" title="US Territory">American Samoa</a>
<a href="#">Arizona</a>
<a href="#">Arkansas</a>
<a href="#">California</a></li>
</ul>
</li>
</ul>
I don't want a link on the top level of my CSS drop-down menu unless it's absolutely necessary. IE5 and IE6 need scripting enabled for the DDM to work so I alternately provide the lower level links via a page refresh and a php include for IE5 & IE6 scripting disabled users. But I think having the top level displayed with a link for other browsers and later IE versions looks redundent, sloppy and just creates confusion.
I've tried it in IE 5.5, 6, 7, and (7 emulated) 8 and also in Opera, Safari, Firefox and Chrome. Seems to work great. The code is below.
What do you think?
<ul>
<li style="border: 1px solid black;"><!--[if lt IE 7]><SCRIPT type="text/javascript"> document.write("<a>States</a>") </SCRIPT><![endif]-->
<noscript><!--[if lt IE 7]><a href="index.php?i=statemenu">States</a><![endif]--></noscript>
<!--[if !(lt IE 7)]><a>States</a><![endif]-->
<![if !IE]><a>States</a><![endif]>
<ul>
<li><a href="#">Alabama</a>
<a href="#">Alaska</a>
<a href="#" title="US Territory">American Samoa</a>
<a href="#">Arizona</a>
<a href="#">Arkansas</a>
<a href="#">California</a></li>
</ul>
</li>
</ul>