应用的效果可以看我的BLOG页面导航条.(最上面)
效果非常好.一共是23个导航菜单.提供下载和使用方法

下载地址: http://www.orbitfiles.com/download/id553566683

这是部分菜单的预览图.

预览2.jpg

预览1.jpg



使用的方法:

用记事本或者网页编辑软件打开压缩包中的menus(menus1)文件.看其中的代码.

代码分两部分.CSS 和 DIV部分.

选择要使用的导航条.从两部分代码中分别找到与你要使用的导航条相关的代码.


e.g.以我的导航条为例: Tab Menu 8

找到css中的这部分.这是Tab Menu 8
在这里可以做一些微调,我就再下面这段代码里面给大家注上了..
请在压缩包中找到和你需要的导航条所对用的背景图片.比如menu8的对应图片是tabright8和taleft8
把他们上传到网上..在我下面标注的位置修改..

/* - Menu Tabs 8---------------------------  */

    #tabs8 
{
      float
: left ;   /*导航菜单位置左或者右*/
      width
: 100% ;
      background
: #FCF1F6 ;   /*菜单背景颜色,如果不要就删掉这行*/
      font-size
: 93% ;
      line-height
: normal ;
      border-bottom
: 1px solid #E276A7 ;   /*菜单边框颜色,不要边框删掉这行*/
      
}
    #tabs8 ul 
{
      margin
: 0 ;
      padding
: 10px 10px 0 50px ;  /*导航菜单与上-右-下-左的距离*/
      list-style
: none ;
      
}
    #tabs8 li 
{
      display
: inline ;
      margin
: 0 ;
      padding
: 0 ;
      
}
    #tabs8 a 
{
      float
: left ;   /*如果上面改成了右.这里也改右*/
      background
: url("tableft8.gif") no-repeat left top ; /*按钮左面背景(你刚刚上传的背景图)*/
      margin
: 0 ;
      padding
: 0 0 0 4px ;
      text-decoration
: none ;
      
}
    #tabs8 a span 
{
      float
: left ;
      display
: block ;
      background
: url("tabright8.gif") no-repeat right top ; /*按钮右面背景(你刚刚上传的背景图)*/
      padding
: 5px 15px 4px 6px ;
      color
: #333 ;
      
}
    
/*  Commented Backslash Hack hides rule from IE5-Mac \ */
    #tabs8 a span 
{ float : none ; }
    
/*  End IE5-Mac hack  */
    #tabs8 a:hover span 
{
      color
: #591333 ;
      
}
    #tabs8 a:hover 
{
      background-position
: 0% -42px ;
      
}
    #tabs8 a:hover span 
{
      background-position
: 100% -42px ;
      
}




如果不要再定义导航条的字体.那以下的这部分就不用使用了

    body  {
    margin
: 0 ;
    padding
: 0 ;
    font
:  bold 11px/1.5em Verdana ;
}

h2 
{
    font
:  14px Verdana, Arial, Helvetica, sans-serif ;
    color
:  #000 ;
    margin
:  0px ;
    padding
:  0px 0px 0px 15px ;
}

img 
{
border
:  none ;
}  


之后找到div部分里面的<h2>Tab Menu 8</h2> 里面的以下部分

< div  id ="tabs8" >
  
< ul >
    
< li >< href ="#"  title ="Link 1" >< span > Link 1 </ span ></ a ></ li >
    
< li >< href ="#"  title ="Link 2" >< span > Link 2 </ span ></ a ></ li >
    
< li >< href ="#"  title ="Link 3" >< span > Link 3 </ span ></ a ></ li >
    
< li >< href ="#"  title ="Longer Link Text" >< span > Longer Link Text </ span ></ a ></ li >
    
< li >< href ="#"  title ="Link 5" >< span > Link 5 </ span ></ a ></ li >
    
< li >< href ="#"  title ="Link 6" >< span > Link 6 </ span ></ a ></ li >
    
< li >< href ="#"  title ="Link 7" >< span > Link 7 </ span ></ a ></ li >
  
</ ul >
</ div >

对这部分进行修改. 例如我修改后的内容是:

< div  id ="tabs8" >
< ul >
< li >< href ="http://www.cnweblog.com/enbby/admin"  title ="后台管理" >< span > 后台管理 </ span ></ a ></ li >
< li >< href ="http://www.cnweblog.com/enbby/Rss.aspx"  title ="RSS聚合" >< span > RSS聚合 </ span ></ a ></ li >
< li >< href ="http://www.cnweblog.com/enbby/contact.aspx"  title ="联系" >< span > 联系 </ span ></ a ></ li >
< li >< href ="http://enbby.gbaopan.com/"  title ="珍藏分享" >< span > 珍藏分享 </ span ></ a ></ li >
< li >< href ="http://www.orbitfiles.com/download/enby"  title ="美化工具" >< span > 素材下载 </ span ></ a ></ li >
< li >< href ="http://rainisun.photo.163.com"  title ="图片库" >< span > 图片库 </ span ></ a ></ li >
< li >< href ="http://www.cnweblog.com/enbby/"  title ="首页" >< span > 首页 </ span ></ a ></ li >
</ ul >
</ div >

#对应链接网址 蓝色Link对应链接名称 黑色link对应显示在导航菜单上的文字

修改好这部分基本就完工啦~!

请将你修改好的css代码部分(不要包括<style type="text/css"> </style>)复制到通过CSS定制页面栏里面
将修改好的div部分复制到页首Html代码栏..
保存设置

好了...你的导航菜单出来了.看看吧..



         Dream Away。

posted on 2006-07-29 05:06 暖暖 阅读(1183) 评论(8)  编辑  收藏 所属分类: Technology

评论:
# re: BLOG碎碎念之5°┆◆非常漂亮的CSS导航菜单°(严重推荐) 2006-07-29 16:04 | Enbyの格格
狂晕.....

我写的不算太复杂吧....  回复  更多评论
  
# re: BLOG碎碎念之5°┆◆非常漂亮的CSS导航菜单°(严重推荐) 2006-07-30 15:48 | jimmyleo
jimmy学会了 格格姐 呵呵
可是怎么把原来的“管理”项去掉啊?  回复  更多评论
  
# re: BLOG碎碎念之5°┆◆非常漂亮的CSS导航菜单°(严重推荐) 2006-07-30 15:58 | Enbyの格格
把管理项的语句去掉就行了。

<li>< a href ="http://www.cnweblog.com/enbby/admin" title ="后台管理" >< span > 后台管理 </ span ></ a ></ li>

直接删掉  回复  更多评论
  
# re: BLOG碎碎念之5°┆◆非常漂亮的CSS导航菜单°(严重推荐) 2006-07-30 16:47 | jimmyleo
格格姐误会我的意思了,我的意思是原来模板里的“管理”项。
就是“首页”“聚合”之类的,这些可以不要了。
但是“管理”弄不掉啊。
谢谢指导^_^


还有那个模版的事。
我真是个问题小孩啊~
为什么那个文章的线会超过分割线到SIDEBAR里啊。  回复  更多评论
  
# re: BLOG碎碎念之5°┆◆非常漂亮的CSS导航菜单°(严重推荐) 2006-07-30 20:47 | Enbyの格格
把nav项目填写一个

display:none;

就可以隐藏了

线超过是因为图片过大..

可以加一个table-layout:fixed;

但是这样大图会被挤到最下面..我还没想到好办法解决..

本来想给图片新建层..但是效果不好...

等有办法再告诉你吧...  回复  更多评论
  
# re: BLOG碎碎念之5°┆◆非常漂亮的CSS导航菜单°(严重推荐) 2006-07-31 16:15 | jimmyleo
那先谢谢拉^_^  回复  更多评论
  
# re: BLOG碎碎念之5°┆◆非常漂亮的CSS导航菜单°(严重推荐) 2006-07-31 19:46 | Enbyの格格
:)不客气  回复  更多评论
  
# re: BLOG碎碎念之5°┆◆非常漂亮的CSS导航菜单°(严重推荐) 2007-02-16 16:16 | 我们在这个世界上终究会变成孤儿!
我很想努力的看看。学学。
可是。我看到那些我就范晕了。你的耐心无敌了!

赞……  回复  更多评论