Books
in black and white
Main menu
Share a book About us Home
Books
Biology Business Chemistry Computers Culture Economics Fiction Games Guide History Management Mathematical Medicine Mental Fitnes Physics Psychology Scince Sport Technics
Ads

Javascript for dummies 4th edition - Veer E.V

Veer E.V Javascript for dummies 4th edition - Wiley publishing , 2004. - 387 p.
ISBN: 0-7645-7659-3
Download (direct link): javascriptfordummies2005.pdf
Previous << 1 .. 60 61 62 63 64 65 < 66 > 67 68 69 70 71 72 .. 118 >> Next

(continued)
188 Part III: Making Your Site Easy for Visitors to Navigate and Use
Listing 9-2 (continued)
.menu (position:absolute; font:12px arial, helvetica, sans-serif; background-color:#CCCCCC; layer-background-color:#CCCCCC; top:-90px}
#resMenu (left:10px; width:130px}
#bookMenu (left:145px; width:160px}
A (text-decoration:none; color:#000000}
A:hover (background-color:pink; color:blue}
</STYLE>
</HEAD>
<BODY BGCOLOR="white">
// Associating the call to displayMenul) with the onMouseOver and onMouseOut // event handlers.
<div id=”resMenu” class="menu" onMouseOver=''displayMenu('resMenu',-5)'' onMouseOut=”displayMenu('resMenu',-90)”><br />
<a href="jhttp://channels.netscape.com/ns/browsers/default.jsp">JavaScript doc (Nav)</a><br />
<a href="http://www.microsoft.com/windows/ie/default.htm">JavaScript doc (IE)</a><br />
<a href="http://www.mozilla.org/docs/dom/domref/dom_shortTOC.html">DOM (Nav)</a><br />
<a
href="http://msdn.microsoft.com/workshop/author/dhtml/reference/ob jects.asp”>DOM (IE)</a><br />
<a href="http://www.scriptsearch.com/JavaScript">ScriptSearch</a><br />
<b><a href="javascript:displayMenu('resMenu')">JavaScript Resources</a></b>
</div>
// Associating the call to displayMenu() with the onMouseOver and onMouseOut // event handlers.
<div id="bookMenu" class="menu" onMouseOver=”displayMenu('bookMenu',-5)” onMouseOut=”displayMenu('bookMenu',-90)”><br />
<a href="http://www.dummies.com">Dummies</a><br />
<a href="http://www.powells.com">Powells</a><br />
<a href="http://www.amazon.com">Amazon</a><br />
<a href="http://www.ebay.com">eBay</a><br />
<a href="http://www.bn.com">Barnes & Noble</a><br />
<b><a href="javascript:displayMenu('bookMenu')">JavaScript Books</a></b>
</div>
</BODY>
</HTML>
Chapter 9: Creating Menus 189
Sliding menus rely heavily on three items:
Cascading style sheets: When you create a sliding menu, you use a style sheet to define such display characteristics as how you want the browser to display the menu before a user mouses over it and after a user mouses over it and what color you want the hyperlinks to be.
Display screen (monitor) properties: You use screen properties to specify where you want the browser to display the menu initially, as well as after a user mouses over the menu.
JavaScript: You use JavaScript to tie the menu display (the first bullet in this list) and positioning (the second bullet) to the onMouseOver and onMouseOut event handlers associated with the menu options. When users mouse over a menu option, as shown in Figure 9-3, the menu automatically appears — and then disappears after the mouse pointer moves away.
As you examine the code shown in Listing 9-2, pay special attention to the following three callouts, which implement the preceding three points:
The custom JavaScript function displayMenu(). The displayMenu() function accepts up to two parameters: currentPosition and nextPosition. The JavaScript code uses these parameters to determine where on the screen to display the menu. If only one parameter was sent to the displayMenu() function, the code calculates the value of the second parameter by determining whether the menu is currently expanded or contracted — and then the code displays it the opposite way.
The style sheet definition describing how the browser should display menus. All the code between the <STYLE> and </STYLE> tags constitutes the cascading style sheet definition:
• Display characteristics common to both menus appear next to the .menu keyword.
• Display characteristics specific to the Resources menu appear next to the #resMenu keyword.
• Display characterstics specific to the Books menu appear next to the #bookMenu keyword.
• Display characteristics for the hyperlink menu items — as well as the hyperlinks when a mouse is positioned over them — appear next to the A and A:hover keywords, respectively.
190 Part III: Making Your Site Easy for Visitors to Navigate and Use
The JavaScript calls to displayMenu() associated with the onMouseOut and onMouseOver event handlers. The HTML <div> and </div> tags specify how the browser is to display the Resources and Books menus initially — but it’s the JavaScript calls to the displayMenu() function, associated with both the Resource hyperlink’s onMouseOut and onMouseOver event handlers and the Books hyperlink’s onMouseOut and onMouseOver event handlers, that cause the menus to slide open and closed.
Taking Advantage of Third-Party DHTML Menu Components
As you might notice if you peruse Listings 9-1 and 9-2, creating DHTML menus from scratch takes quite a bit of programming savvy, not just with respect to JavaScript but to HTML and cascading style sheets, as well. If you don’t want to invest the time and trouble in coding DHTML menus by hand (and not everyone does), you’re in luck: Several companies offer tools that you can use to get cool menu effects with a minimum of effort. The following list represents just a handful of the products available. (Many are low cost or offer free trial versions.)
Previous << 1 .. 60 61 62 63 64 65 < 66 > 67 68 69 70 71 72 .. 118 >> Next