30余个CSS导航菜单效果

好久没发贴了,发个近乎无关的东西送给大家,有发过的话PM我.

===================华丽分割==================

具体怎么用我就不说了.代码都在里面..

[ 本帖最后由 TaRot! 于 2007-6-14 12:43 编辑 ]

支持！

怎么用啊  楼主能说说吗`````

支持，上次下了一个背景图片不显示。导航正常。这次再试一下

可不可以给个详细的教程啊。下是下下来了。可是不会用

原帖由 狗天下 于 2007-6-14 12:50 发表
可不可以给个详细的教程啊。下是下下来了。可是不会用

????????????????????????????????

支持好的作品~！`

里面的每个htm就是代码,其他的只是图片.
打个比方,

1. /*- Menu Tabs J--------------------------- */
   
2. 
   
3.     #tabsJ {
   
4.       float:left;
   
5.       width:100%;
   
6.       background:#F4F4F4;
   
7.       font-size:93%;
   
8.       line-height:normal;
   
9.           border-bottom:1px solid #24618E;
   
10.       }
    
11.     #tabsJ ul {
    
12.         margin:0;
    
13.         padding:10px 10px 0 50px;
    
14.         list-style:none;
    
15.       }
    
16.     #tabsJ li {
    
17.       display:inline;
    
18.       margin:0;
    
19.       padding:0;
    
20.       }
    
21.     #tabsJ a {
    
22.       float:left;
    
23.       background:url("tableftJ.gif") no-repeat left top;
    
24.       margin:0;
    
25.       padding:0 0 0 5px;
    
26.       text-decoration:none;
    
27.       }
    
28.     #tabsJ a span {
    
29.       float:left;
    
30.       display:block;
    
31.       background:url("tabrightJ.gif") no-repeat right top;
    
32.       padding:5px 15px 4px 6px;
    
33.       color:#24618E;
    
34.       }
    
35.     /* Commented Backslash Hack hides rule from IE5-Mac \*/
    
36.     #tabsJ a span {float:none;}
    
37.     /* End IE5-Mac hack */
    
38.     #tabsJ a:hover span {
    
39.       color:#FFF;
    
40.       }
    
41.     #tabsJ a:hover {
    
42.       background-position:0% -42px;
    
43.       }
    
44.     #tabsJ a:hover span {
    
45.       background-position:100% -42px;
    
46.       }

复制代码

是Menu Tabs J的CSS代码,而下面的

1. <h2>Tab Menu J</h2>
   
2. <div id="tabsJ">
   
3.   <ul>
   
4.     <li><a href="#" title="Link 1"><span>Link 1</span></a></li>
   
5.     <li><a href="#" title="Link 2"><span>Link 2</span></a></li>
   
6.     <li><a href="#" title="Link 3"><span>Link 3</span></a></li>
   
7.     <li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>
   
8.     <li><a href="#" title="Link 5"><span>Link 5</span></a></li>
   
9.     <li><a href="#" title="Link 6"><span>Link 6</span></a></li>
   
10.         <li><a href="#" title="Link 7"><span>Link 7</span></a></li>
    
11.   </ul>
    
12. </div>

复制代码

即为显示效果.其中的文字都是可更改的,只要<div id="tabsJ">div的ID和上面CSS的对应即可.

增加按纽在ul里增加li标示即可.

[ 本帖最后由 TaRot! 于 2007-6-14 12:56 编辑 ]

简单的演示可以看下此贴:https://discuz.dismall.com/thread-649452-1-2.html

那怎么替换 论坛里面的导航  该把代码放那个目录   请楼主 再详细、点可以吗 谢谢