| home / programming / javascript / jf / column10 / 1 |   [next] |
|
|
|
Last week, we covered Form Validation and JavaScript Image Rollovers. This week completes the series. Topics covered today are Drop-down Navigation Selections, DHTML Menus, Proprietary Alternatives, Document.all, and innerHTML. [Ed. note.]
Drop-down select menus have often been used to redirect readers when they select an option from the drop-down menu. Here is an example of the misuse of a select menu:
<script type="text/javascript"><!--
function redir(sel){
document.location = sel.options[sel.options.selectedIndex].value;
}
//--></script>
<form action="" method="get"><fieldset>
<label>
<select size="1" name="selObj"
onchange="redir(this)">
<option value="index.html">Home</option>
<option value="about.html">About</option>
<option value="history.html">History</option>
<option value="music.html">Music</option>
<option value="contact.html">Contact</option>
</select>
</label>
</fieldset></form>
There isn’t a big problem with the JavaScript – it works, doesn’t
it? This is correct, however, just as the FONT tag will work in a Strict DTD
even though it is not supposed to, the deprecated “document.location”
property may work but that’s not it’s purpose. An official
resource says that “Location is not a property of the
document object; its equivalent is the document.URL
property. The document.location property, which is a synonym for
document.URL, is deprecated.” Instead, the “location.href”
or “window.location.href” property should be used.
Most of the problems with this classical script are in the HTML. First, there is no “action” for the form to access. This means that users without JavaScript won’t be able to use the form. They can’t use it for navigation, so what good is it to them? You might think we should hide it from them altogether, but that is not correct. Although it’s a wise decision not to rely on this kind of menu for your primary navigation, suppose this was the only logical way you could have a navigation menu. We should make this form do the requested action, regardless of the presence of JavaScript.
<script type="text/javascript"><!--
function redir(sel){
location.href = sel.options[sel.options.selectedIndex].value;
}
//--></script>
<form action="some-script.pl" method="get"><fieldset>
<label>
<select size="1" name="selObj"
onchange="redir(this)">
<option value="index.html">Home</option>
<option value="about.html">About</option>
<option value="history.html">History</option>
<option value="music.html">Music</option>
<option value="contact.html">Contact</option>
</select>
</label>
<label>
<input type="submit" value="Go!">
</label>
</fieldset></form>
The new JavaScript uses “location.href” instead of the deprecated “document.location” property. You’ll notice that there is now an action available, which goes to “some-script.pl.” This would be a Perl script by definition. Also a submit button was added. Now, users without JavaScript can select a page name, click “Go!” and be redirected to the page they selected. That is, if and only if the “some-script.pl” script is written to interpret the request properly. Make sure you provide a server-side alternative that will work without JavaScript.
As you’ve been reading, you might be thinking that there’s no way that you can build a menu and make it accessible. You have to use NOSCRIPT tags or something else, don’t you? The NOSCRIPT tag is always an available alternative, but it is not always the best way to solve a problem. If you’re already using a menu script that requires JavaScript, it’s useful to provide a list of some kind that shows up in the NOSCRIPT tags. If you want to make a DHTML menu without JavaScript, read on.
“Wait, you mean a JavaScript-free cascading menu? You’re kidding, right?” To be frank, Leonardo da Vinci wasn’t the most popular guy around in his day either. He was an amazing, innovative person, but ridiculed for his ideas. “Man will never fly,” he was told. Although he never grasped the basics of flight, which he was most interested in, he did know it was possible. “Birds fly; they are our example,” he thought. The example that birds provide is not applicable to us as humans, but the concept is. Airplanes do not flap their wings and humans do not have hollow bones, but birds both flap their wings and have hollow bones.
In contrast, we’re going to study an example of a CSS-powered menu that is applicable and can replace any JavaScript-powered menu. It loads and runs faster, due to less browser processing. One warning in advance: The CSS-powered menu requires JavaScript for Internet Explorer, which does not understand the “hover” pseudo-class in CSS for elements other than A tags. In other words, for this to work in Internet Explorer, we must use an MSIE-only CSS property to import a small JavaScript file that will allow Internet Explorer to use our menu. This will result in invalid CSS but not invalid HTML – if you’re concerned that your CSS will be invalid, you can try a different technique. Invalid CSS is not a problem if you know why it’s invalid and the result of its invalidity. In this case, there are no reproaches to using an MSIE-only CSS property since only MSIE will be affected and the property is used positively.
Let’s begin with a preview of the menu. It works well for me and it’s very fast. Here’s the HTML for the menu:
<div id="nav">
<ul class="root">
<li class="hassub"><a href="#">Item 1</a>
<ul class="sub1">
<li class="hassub"><a
href="#">Item 1.1</a>
<ul class="sub2">
<li><a
href="#">Item 1.1.1</a></li>
<li
class="hassub"><a href="#">Item 1.1.2</a>
<ul
class="sub3">
<li><a
href="#">Item 1.1.2.1</a></li>
<li><a
href="#">Item 1.1.2.2</a></li>
<li><a
href="#">Item 1.1.2.3</a></li>
</ul></li>
<li><a
href="#">Item 1.1.3</a></li>
</ul></li>
<li><a
href="#">Item 1.2</a></li>
<li><a
href="#">Item 1.3</a></li>
<li><a
href="#">Item 1.4</a></li>
<li><a
href="#">Item 1.5</a></li>
<li><a
href="#">Item 1.6</a></li>
</ul></li>
<li class="hassub"><a href="#">Item 2</a>
<ul class="sub1">
<li><a
href="#">Item 2.1</a></li>
<li><a
href="#">Item 2.2</a></li>
<li><a
href="#">Item 2.3</a></li>
<li><a
href="#">Item 2.4</a></li>
<li><a
href="#">Item 2.5</a></li>
<li><a
href="#">Item 2.6</a></li>
</ul></li>
<li class="hassub"><a href="#">Item 3</a>
<ul class="sub1">
<li><a
href="#">Item 3.1</a></li>
<li><a
href="#">Item 3.2</a></li>
<li><a
href="#">Item 3.3</a></li>
<li><a
href="#">Item 3.4</a></li>
<li><a
href="#">Item 3.5</a></li>
<li><a
href="#">Item 3.6</a></li>
</ul></li>
<li class="hassub"><a href="#">Item 4</a>
<ul class="sub1">
<li><a
href="#">Item 4.1</a></li>
<li><a
href="#">Item 4.2</a></li>
<li><a
href="#">Item 4.3</a></li>
<li><a
href="#">Item 4.4</a></li>
<li><a
href="#">Item 4.5</a></li>
<li><a
href="#">Item 4.6</a></li>
</ul></li>
</ul>
</div>
| home / programming / javascript / jf / column10 / 1 | [next] |
Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers
URL: http://webreference.com/programming/javascript/Jf/column10/1
