(续)精彩导航

对上述的导航菜单都简单浏览了一遍,挑选了几个比较喜欢用自己的方式实现了下!  
发现其实挺简单的,无非就是想法和设计不错,不过往往我们国内设计师缺的就是这些...

css 代码

 

1. /* menu Theme */  
2. @import url(basestyle.css);  
3. @import url(baseframe.css);  
4.   
5. /*Start primaryNav1 */  
6. #header-nav1{ width:760px; height:120px;background:#fff url("../images/menu/nav1-header.jpg") repeat-x left bottombottom;}  
7. #nav1{width: 530px;height:31px;padding:80px 0 9px 30px;font-family:Verdana;}  
8. #nav1 ol {float: left;}  
9. #nav1 ol li {  
10.     float: left;  
11.     margin-left:6px;  
12.     width:91px;  
13.     height:21px;  
14. }     
15.   
16. #nav1 ol li a {  
17.     display: block;  
18.     width:80px;  
19.     height:31px;  
20.     font-size:12px;  
21.     line-height:31px;  
22.     text-decoration: none;  
23.     font-weight: bold;  
24.     text-align:center;  
25.     color:#fff;  
26.     background:url("../images/menu/nav1-m.gif") no-repeat left top;  
27. }     
28.   
29. #nav1 ol li a:hover{  
30.     color:#000;  
31.     background:url("../images/menu/nav1-m.gif") no-repeat left -40px ;  
32. }  
33.   
34. #nav1 ol li.active a{     
35.     color:#000;  
36.     background:url("../images/menu/nav1-m.gif") no-repeat left -80px;  
37. }  
38.   
39. /*End primaryNav1 */      
40. /*******************************************************/  
41. /*Start primaryNav2 */  
42. #header-nav2{ height:77px;background:#000 url("../images/menu/nav2-bar-bg.gif") repeat-x left bottombottom;}  
43. #nav2{width: 530px;height:21px;padding:56px 0 0px 30px;font-family:Verdana;}  
44. #nav2 ol {float: left;}  
45. #nav2 ol li {  
46.     float: left;  
47.     margin-left:6px;  
48.     width:91px;  
49.     height:21px;  
50. }     
51.   
52. #nav2 ol li a {  
53.     display: block;  
54.     width:91px;  
55.     height:21px;  
56.     font-size:12px;  
57.     line-height:21px;  
58.     text-decoration: none;  
59.     font-weight: bold;  
60.     text-align:center;  
61.     color:#fff;  
62.     background:url("../images/menu/nav2-m.gif") no-repeat left top;  
63. }     
64.   
65. #nav2 ol li a:hover{  
66.     color:#000;  
67.     background:url("../images/menu/nav2-m.gif") no-repeat left -25px ;  
68. }  
69.   
70. #nav2 ol li.active a{     
71.     color:#000;  
72.     background:url("../images/menu/nav2-m.gif") no-repeat left -25px;  
73. }  
74.   
75. /*End primaryNav2 */      
76. /*******************************************************/  
77. /*Start primaryNav3 */  
78. #header-nav3{ height:96px;background:#000 url("../images/menu/nav3-bar-bg.gif") repeat-x left bottombottom;}  
79. #nav3{width: 530px;height:26px;padding:70px 0 0px 30px;font-family:Verdana;}  
80. #nav3 ol {float: left;}  
81. #nav3 ol li {  
82.     float: left;  
83.     margin-left:6px;  
84.     width:82px;  
85.     height:26px;  
86. }     
87.   
88. #nav3 ol li a {  
89.     display: block;  
90.     width:82px;  
91.     height:26px;  
92.     font-size:12px;  
93.     line-height:26px;  
94.     text-decoration: none;  
95.     font-weight: bold;  
96.     text-align:center;  
97.     color:#fff;  
98.     background:url("../images/menu/nav3-m.gif") no-repeat left top;  
99. }     
100.   
101. #nav3 ol li a:hover{  
102.     color:#000;  
103.     background:url("../images/menu/nav3-m.gif") no-repeat left -26px ;  
104. }  
105.   
106. #nav3 ol li.active a{     
107.     color:#000;  
108.     background:url("../images/menu/nav3-m.gif") no-repeat left -26px;  
109. }  
110.   
111. /*End primaryNav3 */      
112.   
113. /*******************************************************/  
114. /*Start primaryNav4 */  
115. #header-nav4{width:710px; padding-top:58px;background:url("../images/menu/nav4-header.jpg") no-repeat left top;}  
116. #nav4{  
117.     background:transparent url("../images/menu/nav4-bar.gif") repeat scroll 710px 100%;  
118.     display:block;  
119.     line-height:1em;  
120.     margin:0pt auto 5px;  
121.     padding:0pt;  
122.     text-align:center;  
123.     width:710px;  
124.     height:39px;  
125. }  
126. #nav4 ol {  
127.     padding-left:20px;  
128. }  
129. #nav4 ol li {  
130.     float:left;  
131.     padding:0pt 1px 10px;  
132.     margin-left:6px;  
133.       
134. }     
135.   
136. #nav4 ol li a {  
137.     display: block;  
138.     padding:10px 9px 8px 33px;  
139.     font-size:12px;  
140.     font-weight: bold;  
141.     text-align:center;  
142.     background-image:url("../images/menu/Nav4-icons.gif");  
143.     background-repeat:no-repeat;  
144.     color:#525252;  
145.   
146.       
147.   
148. }     
149.   
150. #nav4 ol li a:hover{  
151.     color:#000;  
152.     background:url("../images/menu/Nav4-icons.gif") no-repeat left -26px ;  
153. }  
154.   
155. #nav4 ol li.active{   
156.     background:transparent url("../images/menu/nav4-bar.gif") repeat scroll 50% 100%;  
157.     padding-bottom:9px;  
158. }  
159. *html #nav4 ol li.active{padding-bottom:10px;} /* for IE */  
160. #nav4 #nav4-m1 a {  
161.     background-position:11px 60%;  
162. }  
163. #nav4 #nav4-m2 a {  
164.     background-position:-590px 60%;  
165. }  
166. #nav4 #nav4-m3 a {  
167.     background-position:-2091px 60%;  
168. }  
169. #nav4 #nav4-m4 a {  
170.     background-position:-2390px 60%;  
171. }  
172. #nav4 #nav4-m5 a {  
173.     background-position:-2990px 60%;  
174. }  
175. /*End primaryNav4 */      
176. /*******************************************************/  
177. /*Start primaryNav5 */  
178. #header-nav5{ height:100px;background:url(../images/menu/nav5-bar-bg.jpg) repeat-x left top;}  
179. #nav5{width: 530px;margin: 0;padding: 66px 0 10px 30px;font-family:  Verdana;}  
180. #nav5 ol {float: left;height:24px;}  
181. #nav5 ol li {list-style: none;  
182.     float: left;  
183.     margin-left:6px;  
184.     width:80px;  
185.     height:24px;  
186. }     
187.   
188. #nav5 ol li a {  
189.     display: block;  
190.     width:80px;  
191.     height:24px;  
192.     font-size:12px;  
193.     line-height:21px;  
194.     text-decoration: none;  
195.     font-weight: bold;  
196.     color: #fff;  
197.     background:url(../images/menu/nav5-m-rightright.gif) no-repeat rightright top ;  
198. }     
199. #nav5 li a span{  
200.     display:block;  
201.     width:80px;  
202.     height:24px;  
203.     text-align:center;  
204.     background:url(../images/menu/nav5-m-left.gif) no-repeat left top;  
205. }  
206. #nav5 li a:hover{  
207.     background: url(../images/menu/nav5-m-rightright-hover.gif) no-repeat rightright top ;  
208. }  
209. #nav5 li a:hover span{  
210.   
211.     background:url(../images/menu/nav5-m-left-hover.gif) no-repeat left top;  
212. }  
213.   
214. #nav5 ol li.active a{     
215.     background:url(../images/menu/nav5-m-rightright-active.gif) no-repeat rightright top;  
216. }  
217. #nav5 ol li.active a span{    
218.     background:url(../images/menu/nav5-m-left-active.gif) no-repeat left top;  
219.     }  
220. /*End primaryNav5 */      
221. /*******************************************************/  
222. /*Start primaryNav6 */  
223. #header-nav6{ height:77px;background:url(../images/menu/nav6-header-bg.gif) repeat-x left bottombottom;}  
224. #nav6{width: 530px;margin: 0;padding: 36px 0 10px 30px;font-family:  Verdana;}  
225. #nav6 ol {float: left;height:31px;}  
226. #nav6 ol li {list-style: none;  
227.     float: left;  
228.     margin-left:6px;  
229.     width:80px;  
230.     height:31px;  
231. }     
232.   
233. #nav6 ol li a {  
234.     display: block;  
235.     width:80px;  
236.     height:31px;  
237.     font-size:12px;  
238.     line-height:31px;  
239.     text-decoration: none;  
240.     font-weight: bold;  
241.     color: #6CA300;  
242. }     
243. #nav6 li a span{  
244.     display:block;  
245.     width:80px;  
246.     height:31px;  
247.     text-align:center;  
248. }  
249. #nav6 li a:hover{  
250.     background: url(../images/menu/nav6-m-top.gif) no-repeat top left;  
251. }  
252. #nav6 li a:hover span{  
253.   
254.     background: transparent url(../images/menu/nav6-m-bottombottom.gif) no-repeat bottombottom rightright;  
255. }  
256.   
257. #nav6 ol li.active{   
258.     background: url(../images/menu/nav6-m-top.gif) no-repeat top left;  
259. }  
260. #nav6 ol li.active a{     
261.     background: url(../images/menu/nav6-m-bottombottom.gif) no-repeat bottombottom rightright;  
262.     }  
263. /*End primaryNav6 */      

xml 代码

 

1. <body  >  
2. <div>  
3.     <!--start nav1-->  
4.     <div id="header-nav1">  
5.   
6.         <div id="nav1">  
7.             <ol >  
8.                 <li class="active"><a href="#">Home</a></li>  
9.                 <li><a href="#">Project</a></li>  
10.                 <li ><a href="#">Program</a></li>  
11.                 <li ><a href="#">Blog</a></li>  
12.                 <li ><a href="#">Others</a></li>  
13.             </ol>  
14.         </div>  
15.         <div class="clear"></div>  
16.     </div>  
17.     <!--end nav1-->  
18.       
19.     <div class="space-portlet"></div>  
20.   
21.     <!--start nav2-->  
22.     <div id="header-nav2">  
23.   
24.         <div id="nav2">  
25.             <ol >  
26.                 <li class="active"><a href="#">Home</a></li>  
27.                 <li><a href="#">Project</a></li>  
28.                 <li ><a href="#">Program</a></li>  
29.                 <li ><a href="#">Blog</a></li>  
30.                 <li ><a href="#">Others</a></li>  
31.             </ol>  
32.         </div>  
33.         <div class="clear"></div>  
34.     </div>  
35.     <!--end nav2-->  
36.       
37.     <div class="space-portlet"></div>  
38.       
39.     <!--start nav3-->  
40.     <div id="header-nav3">  
41.   
42.         <div id="nav3">  
43.             <ol >  
44.                 <li class="active"><a href="#">Home</a></li>  
45.                 <li><a href="#">Project</a></li>  
46.                 <li ><a href="#">Program</a></li>  
47.                 <li ><a href="#">Blog</a></li>  
48.                 <li ><a href="#">Others</a>