水平菜单

CSS 文件

 1 body {
 2     background-color: white;
 3     color: black;
 4 }
 5 
 6 div {
 7     margin-bottom: 10px;
 8     width: 20em;
 9     background-color: #9CF;
10     float: left;
11 }
12 
13 ul.menu {
14     display: none;
15     list-style-type: none;
16     margin: 0;
17     padding: 0;
18 }
19 
20 ul.menu li {
21     font: 1em arial, helvetica, sans-serif;
22     padding-left: 10px;
23 }
24 
25 a.menuLink, li a {
26     text-decoration: none;
27     color: #006;
28 }
29 
30 a.menuLink {
31     font-size: 1.2em;
32     font-weight: bold;
33 }
34 
35 ul.menu li a:hover {
36     background-color: #006;
37     color: white;
38     padding-right: 10px;
39 }
View Code

JS 文件

 1 window.onload = initAll;
 2 
 3 function initAll() {
 4     var allLinks = document.getElementsByTagName("a");
 5     
 6     for (var i=0; i<allLinks.length; i++) {
 7         if (allLinks[i].className.indexOf("menuLink") > -1) {
 8             allLinks[i].onmouseover = toggleMenu;
 9             allLinks[i].onclick = clickHandler;
10         }
11     }
12 }
13 
14 function clickHandler(evt) {
15     if (evt) {
16         if (typeof evt.target == "string") {
17             toggleMenu(evt,evt.target);
18         }
19         else {
20             toggleMenu(evt,evt.target.toString());
21         }
22     }
23     else {
24         toggleMenu(evt,window.event.srcElement.href);
25     }
26     return false;
27 }
28 
29 function toggleMenu(evt,currMenu) {
30     if (toggleMenu.arguments.length < 2) {
31         var currMenu = this.href;
32     }
33 
34     var startMenu = currMenu.lastIndexOf("/")+1;
35     var stopMenu = currMenu.lastIndexOf(".");
36     var thisMenuName = currMenu.substring(startMenu,stopMenu);
37 
38     var thisMenu = document.getElementById(thisMenuName);
39     thisMenu.style.display = "block";
40 
41     thisMenu.parentNode.className = thisMenuName;
42     thisMenu.parentNode.onmouseout = function() {
43         document.getElementById(this.className).style.display = "none";
44     }
45     thisMenu.parentNode.onmouseover = function() {
46         document.getElementById(this.className).style.display = "block";
47     }
48 }
View Code

HTML 文件

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 2         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 <head>
 5     <title>Shakespeare's Plays</title>
 6     <link type="text/css" rel="stylesheet" href="script03.css" />
 7     <script type="text/javascript" src="script03.js"></script>
 8 </head>
 9 <body>
10     <h1>Shakespeare's Plays</h1>
11     <div>
12         <a href="menu1.html" class="menuLink">Comedies</a>
13         <ul class="menu" id="menu1">
14             <li><a href="pg1.html">All's Well That Ends Well</a></li>
15             <li><a href="pg2.html">As You Like It</a></li>
16             <li><a href="pg3.html">Love's Labour's Lost</a></li>
17             <li><a href="pg4.html">The Comedy of Errors</a></li>
18         </ul>
19     </div>
20     <div>
21         <a href="menu2.html" class="menuLink">Tragedies</a>
22         <ul class="menu" id="menu2">
23             <li><a href="pg5.html">Anthony &amp; Cleopatra</a></li>
24             <li><a href="pg6.html">Hamlet</a></li>
25             <li><a href="pg7.html">Romeo &amp; Juliet</a></li>
26         </ul>
27     </div>
28     <div>
29         <a href="menu3.html" class="menuLink">Histories</a>
30         <ul class="menu" id="menu3">
31             <li><a href="pg8.html">Henry IV, Part 1</a></li>
32             <li><a href="pg9.html">Henry IV, Part 2</a></li>
33         </ul>
34     </div>
35 </body>
36 </html>
View Code

 

posted @ 2015-04-03 12:21  壬子木  阅读(104)  评论(0)    收藏  举报