隐藏导航 

  1 <head>
  2 <script language="javascript" type="text/javascript" src="../../../教学/HTML部分/0327/jquery-1.4.2.min.js"></script>
  3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4 <title>无标题文档</title>
  5 <style>
  6 *
  7 {
  8     margin:0px;
  9     padding:0px;}
 10 .a
 11 {
 12     height:60px;
 13     width:120px;
 14     font-size:24px;
 15     text-align:center;
 16     line-height:60px;
 17     background-color:#0FF;
 18     overflow:hidden;
 19     top:200px;
 20     left:500px;
 21     position:fixed;}
 22 .aa
 23 {
 24     height:60px;
 25     width:120px;
 26     font-size:24px;
 27     color:#000;
 28     text-align:center;
 29     line-height:60px;
 30     overflow:hidden;
 31     position:relative;
 32     }
 33 .aaa
 34 {
 35     top:-60px;
 36     left:120px;
 37     position:relative;}
 38 .aaa1
 39 {
 40     top:-60px;
 41     left:-360px;
 42     position:relative;}
 43 /*#menu
 44 {
 45     display:none;}*/
 46 </style>
 47 </head>
 48 
 49 <body>
 50 <!--<nav id="menu">-->
 51 <div class="a" id="b" onmouseover="over()" onmouseout="out()">订餐
 52 <div class="aa" id="b1" onmouseover="over1()" onmouseout="out1()" style="background-color:#0F0" >西餐
 53 <div class="aaa">
 54 <table height="60" width="360" border="0" cellpadding="0" cellspacing="0" style="text-align:center; vertical-align:middle;" >
 55 <tr>
 56 <td bgcolor="#30F0C0">肯德基</td>
 57 <td bgcolor="#30F0C0">麦当劳</td>
 58 <td bgcolor="#30F0C0">披萨</td>
 59 </tr></table></div>
 60 </div>
 61 <div class="aa" id="b2" onmouseover="over2()" onmouseout="out2()" style="background-color:#CF0">中餐
 62 <div class="aaa1">
 63 <table height="60" width="360" border="0" cellpadding="0" cellspacing="0" style="text-align:center; vertical-align:middle;" >
 64 <tr>
 65 <td bgcolor="#C0F0C0">面条</td>
 66 <td bgcolor="#C0F0C0">水饺</td>
 67 <td bgcolor="#C0F0C0">米饭</td>
 68 </tr></table></div></div>
 69 <div class="aa" id="b3" onmouseover="over3()" onmouseout="out3()" style="background-color:#C00">零食
 70 <div class="aaa">
 71 <table height="60" width="360" border="0" cellpadding="0" cellspacing="0" style="text-align:center; vertical-align:middle;" >
 72 <tr>
 73 <td bgcolor="#F000C0">薯片</td>
 74 <td bgcolor="#F000C0">虾条</td>
 75 <td bgcolor="#F000C0">方便面</td>
 76 </tr></table></div></div>
 77 </div>
 78 <!--</nav>-->
 79 <br />
 80 <br />
 81 <br />
 82 <br />
 83 <br />
 84 <br />
 85 <br />
 86 <br />
 87 <br />
 88 <br />
 89 <br />
 90 <br />
 91 <br />
 92 <br />
 93 <br />
 94 <br />
 95 <br />
 96 <br />
 97 <br />
 98 <br />
 99 <br />
100 <br />
101 <br />
102 <br />
103 <br />
104 <br />
105 <br />
106 <br />
107 <br />
108 <br />
109 <br />
110 <br />
111 <br />
112 <br />
113 <br />
114 <br />
115 <br />
116 <br />
117 <br />
118 <br />
119 <br />
120 <br />
121 <br />
122 <br />
123 <br />
124 <br />
125 <br />
126 <br />
127 <br />
128 
129 </body>
130 </html>
131 <script>
132 /*function menuvisible ()
133 {
134     $("nav").slideToggle(1000);}*/
135 function over ()
136 {
137     var a1=document.getElementById("b");
138     a1.setAttribute("style","overflow:visible;background-color:#00C;")}
139 function out ()
140 {
141     var a2=document.getElementById("b");
142     a2.setAttribute("style","overflow:hidden;background-color:#0FF;")}
143 function over1 ()
144 {
145     var a3=document.getElementById("b1");
146     a3.setAttribute("style","overflow:visible;background-color:#30F0C0;")}
147 function out1 ()
148 {
149     var a4=document.getElementById("b1");
150     a4.setAttribute("style","overflow:hidden;background-color:#0F0;")}
151 function over2 ()
152 {
153     var a5=document.getElementById("b2");
154     a5.setAttribute("style","overflow:visible;background-color:#C0F0C0;")}
155 function out2 ()
156 {
157     var a6=document.getElementById("b2");
158     a6.setAttribute("style","overflow:hidden;background-color:#CF0;")}
159 function over3 ()
160 {
161     var a7=document.getElementById("b3");
162     a7.setAttribute("style","overflow:visible;background-color:#F000C0;")}
163 function out3 ()
164 {
165     var a8=document.getElementById("b3");
166     a8.setAttribute("style","overflow:hidden;background-color:#C00;")}
167 </script>

 

posted @ 2016-03-29 08:26  一枚小兵  阅读(1168)  评论(0)    收藏  举报