分层导航 

  1 <head>
  2 <script language="javascript" type="text/javascript" src="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 #apDiv1 {    
  7       position:fixed;/*fixed;left:auto;top:auto用来实现悬浮的效果*/
  8       left: auto;      
  9       top: auto;     
 10       bottom:auto;      
 11       width: 237px;      
 12       height:auto;     
 13       z-index: 2;    
 14       margin-top:-8px;     
 15       margin-left:40px;     
 16       text-align:center;     
 17       font-size:16px;     
 18       font-family:"黑体";     
 19       color:#965D28;     
 20       background-image:url(../img/bg.png);     
 21 } 
 22 #menu{     
 23     display:none; 
 24 }
 25 .daohang div{     
 26     height: 30px;     
 27     z-index: 2;    
 28     margin:0 auto;     
 29     text-align:center;     
 30     padding-top:5px;     
 31     overflow:hidden;    
 32     padding-top:10px;     
 33     color:965D28; 
 34 } 
 35 .daohang div:hover{    
 36     height:30px;     
 37     z-index:2;     
 38     margin:0 auto;     
 39     background-image:url(../img/menu-hover.png);    
 40     text-align:center;    
 41     overflow:visible;     
 42     color:#fff; 
 43 }
 44 .daohang li{    
 45     margin-left:237px;     
 46     list-style-type:none;    
 47     background-color:#D3A23A;     
 48     width:160px;     
 49     line-height:30px;     
 50     color:#422B1D;     
 51     position:relative;     
 52     top:-40px;    
 53     background-image:url(../img/bg.jpg);     
 54     border:solid thin;     
 55     border-color:#965D28;     
 56     z-index:1;    
 57 }
 58 .daohang li:hover{     
 59     margin-left:237px;     
 60     list-style-type:none;    
 61     background-color:#D3A23A;    
 62     width:160px;    
 63     line-height:50px;     
 64     color:#fff;    
 65     position:relative;    
 66     top:-40px;    
 67     border:solid thin;     
 68     border-color:#965D28;     
 69     background-image:url(../img/bg.png);     
 70     z-index:1;    
 71 }
 72 .daohang a:link,a:visited{    
 73     text-decoration:none;     
 74     color:#965D28; }
 75 .daohang a:hover{     
 76     text-decoration:none;     
 77     color:#fff; 
 78 }
 79 
 80 </style>
 81 
 82 
 83 
 84 </head>
 85 
 86 <body>
 87 <script> 　　
 88 function menuvisible() 
 89 { 　　
 90     $("nav").slideToggle(1400);/*开关*/　　
 91 }    
 92 </script>
 93 
 94 <div id="apDiv1" >
 95 <img src="" />   
 96 <nav id="menu">  
 97 <div class="daohang" style=" background-color:#630">       
 98 <a href="index.html">
 99 <div style=" background-color:#FC0; color:#fff">首页
100 </div>
101 </a>       
102 <a href="about us.html" target="_blank"><div>关于我们
103 </div>
104 </a>       
105       
106 <a href="services.html" target="_blank"><div>咖啡文化
107 </div></a>      
108 <a href="price list.html" target="_blank"><div>价格清单
109 </div>
110 </a>     
111 <a href="contact.html" target="_blank"><div>联系我们
112 </div></a> 
113 </div>   
114 </nav>  
115 <div style="color:#fff;line-height:35px; background-image:url(img/menu-hover.png); border:solid medium #965D28; margin-top:3px;" onclick="menuvisible()">  
116 <input style="color:#fff; border:none; width:100%; background-color:#630; font-family:'黑体'; font-size:16px; height:100%; line-height:35px;"type="button" value="<--MENU-->" />
117 </div> 
118 <div style="background-image:url(img/bg.png)"><a href="#top"style="text-decoration:none; color:#965D28;line-height:30px;">TOP
119 </a>
120 </div> 
121 </div>
122 <br />
123 <br />
124 <br />
125 <br />
126 <br />
127 <br />
128 <br />
129 <br />
130 <br />
131 <br />
132 <br />
133 <br />
134 <br />
135 <br />
136 <br />
137 <br />
138 <br />
139 <br />
140 <br />
141 <br />
142 <br />
143 <br />
144 <br />
145 <br />
146 <br />
147 <br />
148 <br />
149 <br />
150 <br />
151 <br />
152 <br />
153 <br />
154 <br />
155 <br />
156 <br />
157 <br />
158 <br />
159 <br />
160 <br />
161 <br />
162 <br />
163 <br />
164 <br />
165 <br />
166 <br />
167 <br />
168 <br />
169 <br />
170 <br />
171 <br />
172 <br />
173 <br />
174 <br />
175 <br />
176 <br />
177 <br />
178 <br />
179 <br />
180 <br />
181 <br />
182 <br />
183 <br />
184 <br />
185 <br />
186 咖啡
187 
188 </body>

 

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