留言本开发记录(二)--CSS制作漂亮导航条

最新推荐文章于 2024-07-08 12:24:36 发布

diaoyan8513

最新推荐文章于 2024-07-08 12:24:36 发布

阅读量134

点赞数

文章标签：前端 xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/wyinwing/archive/2009/06/22/1508743.html

版权

在完成了留言本的基本功能制作后,发现不太美观,需要从整体的角度优化一些界面的设计,于是google了很多前端设计的文章,学到了很多很多,这里先推荐几个我觉得很好的前端个人博客: CSSRain , 冰极峰 , 彬Go , ifireyy 当然还有大型网站蓝色理想 , 无忧脚本 , 兰帕映像等.

说远了,马上回来,回到导航条的制作,可以先看看下面的例子(截图):

PS:本来想把代码贴到文章中显示的,效果更好,但是无奈博客园的默认总是把我的span去掉,不想改了,很麻烦,所以就只有上图了,想看效果的请到第6步复制代码运行(或者下载文件到本地).

上面例子都是我参考高手们的例子,修改之后而得,感谢互联网~

一. 菜单的结构

 
<ul class="blue"> 
                <li><a href="#" title="首页" id="current" οnclick="changeId('current',this)"><span></span>首页</a></li> 
                <li><a href="#" title="菜单1" οnclick="changeId('current',this)"><span></span>菜单1</a></li> 
                <li><a href="#" title="菜单2" οnclick="changeId('current',this)"><span></span>菜单2</a></li> 
                <li><a href="#" title="好长好长好长的菜单呀" οnclick="changeId('current',this)"><span></span>好长好长好长的菜单呀</a></li> 
            </ul> 
  

需要说明有2点:

1. 文字可以在span内,也可以在span外,不同的只是css的写法,导航风格2,3就是在span内.可以参考一下.

2. 一般我比较喜欢为当前菜单设置class而不是id,这里为了展示方便,添加了JS实现点击后改变当前菜单.

二. CSS部分

例子中导航条的变化主要是利用CSS改变背景图片实现,分3种状态:

1. 无触发菜单

2. 光标移到菜单

3.当前菜单

对于情况1,我们需要为 a 和 span 设置CSS(第4,5行)

对于情况2,我们再添加一个 a 和 span 中 hover 的CSS(第8,9行)

对于情况3,我们要为当前菜单独立设置CSS(第6,7行).

最后再加上ul ,li 的横向排列CSS(第2,3行),组成了我们需要的8行CSS.

 
/*导航1*/ 
ul.blue {padding: 5px;list-style: none;background-color: #fff;border-bottom: 1px solid #e7e7e7;float: left;clear: left;} 
    ul.blue li {float: left;} 
        ul.blue li a {float: left;text-decoration: none;color: #ccc;padding: 4px 15px 0 0;margin-right: 8px;font: 900 14px "Arial", Helvetica, sans-serif;} 
            ul.blue li a span {float: left;padding-right: 15px;display: block;margin-top: -4px;height: 24px;} 
        #current{color: #0d5f83;background: url(images/blue.png) no-repeat top right;} 
            #current span{background: url(images/blue.png) no-repeat top left;} 
        ul.blue li a:hover{color: #0d5f83;background: url(images/pink.png) no-repeat top right;} 
            ul.blue li a:hover span{background: url(images/pink.png) no-repeat top left;} 
  

三. 利用 a 和 span 标签+图片实现圆角效果

如果菜单长度都是基本一致的,我们可以不需要这么麻烦,直接一个 a 标签就完事了,但是如果菜单长度未知,就需要span配合一下,可以从下图理解一下:

span标签占据了左边的空位,宽15px. 而a标签主要要加padding-right:15px就可以对称了,同时他们各自占据了图片blue.png的左右两边,得到的效果就如上所示.

四. 待改进的地方

由于我也是初学者,对CSS的了解不是很深入,难免有描述不清甚至错误的情况~

目前的图片都是分散的,加载和显示都不是很好,需要合成一张图片,用CSS Script显示,正在摸索中…(PS不到家呀)

五. 全部代码下载

 
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
   <html xmlns="http://www.w3.org/1999/xhtml"> 
   <head> 
       <title>无标题页</title> 
   </head> 
   <body> 
   <style type="text/css"> 
   #navigatorDemo{height:230px;width:500px;background:white;margin:0 auto;} 
       /*导航栏CSS*/ 
       /*导航1*/ 
       ul.blue {padding: 5px;list-style: none;background-color: #fff;border-bottom: 1px solid #e7e7e7;float: left;clear: left;} 
           ul.blue li {float: left;} 
               ul.blue li a {float: left;text-decoration: none;color: #ccc;padding: 4px 15px 0 0;margin-right: 8px;font: 900 14px "Arial", Helvetica, sans-serif;} 
                   ul.blue li a span {float: left;padding-right: 15px;display: block;margin-top: -4px;height: 24px;} 
               #curNavDemo{color: #0d5f83;background: url(http://www.cnblogs.com/images/cnblogs_com/wyinwing/196666/o_blue.png) no-repeat top right;} 
                   #curNavDemo span{background: url(http://www.cnblogs.com/images/cnblogs_com/wyinwing/196666/o_blue.png) no-repeat top left;} 
               ul.blue li a:hover{color: #0d5f83;background: url(http://www.cnblogs.com/images/cnblogs_com/wyinwing/196666/o_pink.png) no-repeat top right;} 
                   ul.blue li a:hover span{background: url(http://www.cnblogs.com/images/cnblogs_com/wyinwing/196666/o_pink.png) no-repeat top left;} 
       /*导航2*/ 
       ul.navigator2{list-style: none;float: left;clear: left;width:460px;background-image:url(http://www.cnblogs.com/images/cnblogs_com/wyinwing/196666/o_navBorder2.gif);} 
           ul.navigator2 li {float: left;background-image:url(http://www.cnblogs.com/images/cnblogs_com/wyinwing/196666/o_navM.gif);} 
               ul.navigator2 li div{background-image:url(http://www.cnblogs.com/images/cnblogs_com/wyinwing/196666/o_nav_S.gif);float:left;width:4px;height:34px;font-size:0px;margin:0px 4px;background-repeat:no-repeat; background-position:top; } 
               ul.navigator2 li a.nav{display:block; float:left; padding-left:12px; font-weight:bold; color:#fff; height:34px; font-size:14px; text-decoration:none; cursor:pointer;} 
                   ul.navigator2 li a.nav span{display:block; float:left; padding-right:12px; font-weight:bold; height:24px; padding-top:10px;} 
               ul.navigator2 li a.nav:hover{display:block; float:left; padding-left:12px; font-weight:bold; color:#fff; height:34px; font-size:14px; background-image:url(http://www.cnblogs.com/images/cnblogs_com/wyinwing/196666/o_nav_Over_L.gif); background-position:left center; background-repeat:no-repeat; text-decoration:none;} 
                   ul.navigator2 li a.nav:hover span{display:block; float:left; padding-right:12px; font-weight:bold; height:24px; padding-top:10px;background-image:url(http://www.cnblogs.com/images/cnblogs_com/wyinwing/196666/o_nav_Over_R.gif); background-position:right center; background-repeat:no-repeat;} 
               #curNavDemo2{display:block; float:left; padding-left:12px; font-weight:bold; color:#f00; height:34px; font-size:14px;background-image:url(http://www.cnblogs.com/images/cnblogs_com/wyinwing/196666/o_nav_On_L.gif); background-position:left center; background-repeat:no-repeat;} 
                   #curNavDemo2 span{display:block; float:left; padding-right:12px; font-weight:bold;height:24px; padding-top:10px;background-image:url(http://www.cnblogs.com/images/cnblogs_com/wyinwing/196666/o_nav_On_R.gif);background-position:right center; background-repeat:no-repeat;} 
       /*导航3*/ 
       ul.navigator3{list-style: none;float: left;clear: left;width:460px;background-image:url(http://www.cnblogs.com/images/cnblogs_com/wyinwing/196666/o_navM.gif);} 
           ul.navigator3 li {float: left;} 
           ul.navigator3 li div{background-image:url(http://www.cnblogs.com/images/cnblogs_com/wyinwing/196666/o_nav_S.gif);float:left;width:4px;height:34px;font-size:0px;margin:0px 4px;background-repeat:no-repeat; background-position:top; } 
           ul.navigator3 li a.nav{display:block; float:left; padding-left:12px; font-weight:bold; color:#fff; height:34px; font-size:14px; text-decoration:none; cursor:pointer;} 
               ul.navigator3 li a.nav span{display:block; float:left; padding-right:12px; font-weight:bold; height:24px; padding-top:10px;} 
           ul.navigator3 li a.nav:hover{display:block; float:left; padding-left:12px; font-weight:bold; color:#fff; height:34px; font-size:14px; background-image:url(http://www.cnblogs.com/images/cnblogs_com/wyinwing/196666/o_nav_Over_L.gif); background-position:left center; background-repeat:no-repeat; text-decoration:none;} 
               ul.navigator3 li a.nav:hover span{display:block; float:left; padding-right:12px; font-weight:bold; height:24px; padding-top:10px;background-image:url(http://www.cnblogs.com/images/cnblogs_com/wyinwing/196666/o_nav_Over_R.gif); background-position:right center; background-repeat:no-repeat;} 
           #curNavDemo3{display:block; float:left; padding-left:12px; font-weight:bold; color:#f00; height:34px; font-size:14px;background-image:url(http://www.cnblogs.com/images/cnblogs_com/wyinwing/196666/o_nav_On_L.gif); background-position:left center; background-repeat:no-repeat;} 
               #curNavDemo3 span{display:block; float:left; padding-right:12px; font-weight:bold;height:24px; padding-top:10px;background-image:url(http://www.cnblogs.com/images/cnblogs_com/wyinwing/196666/o_nav_On_R.gif);background-position:right center; background-repeat:no-repeat;} 
   </style> 
   <script type="text/javascript" language="javascript"> 
       function $(objId){ 
           return document.getElementById(objId); 
       } 
       function changeId(idName,obj){ 
           $(idName).id=""; 
           obj.id=idName; 
           obj.blur(); 
       } 
   </script> 
   <div id="navigatorDemo"> 
       <div>导航风格1</div> 
       <ul class="blue"> 
           <li><a href="#" title="首页" id="curNavDemo" οnclick="changeId('curNavDemo',this)"><span></span>首页</a></li> 
           <li><a href="#" title="菜单1" οnclick="changeId('curNavDemo',this)"><span></span>菜单1</a></li> 
           <li><a href="#" title="菜单2" οnclick="changeId('curNavDemo',this)"><span></span>菜单2</a></li> 
           <li><a href="#" title="好长好长的菜单呀" οnclick="changeId('curNavDemo',this)"><span></span>好长好长的菜单呀</a></li> 
       </ul> 
       <div style="height:5px;clear:both;"></div> 
       <div>导航风格2</div> 
       <ul class="navigator2"> 
           <li><div></div></li> 
           <li><a href="#" id="curNavDemo2" class="nav" οnclick="changeId('curNavDemo2',this)"><span>首页</span></a><div></div></li> 
           <li><a href="#" class="nav" οnclick="changeId('curNavDemo2',this)"><span>菜单1</span></a><div></div></li> 
           <li><a href="#" class="nav" οnclick="changeId('curNavDemo2',this)"><span>菜单2</span></a><div></div></li> 
           <li><a href="#" class="nav" οnclick="changeId('curNavDemo2',this)"><span>好长好长的菜单呀</span></a><div></div></li> 
       </ul> 
       <div style="clear:both;height:15px;margin-top:5px;">导航风格3</div> 
       <ul class="navigator3"> 
           <li><div></div></li> 
           <li><a href="#" id="curNavDemo3" class="nav" οnclick="changeId('curNavDemo3',this)"><span>首页</span></a><div></div></li> 
           <li><a href="#" class="nav" οnclick="changeId('curNavDemo3',this)"><span>菜单1</span></a><div></div></li> 
           <li><a href="#" class="nav" οnclick="changeId('curNavDemo3',this)"><span>菜单2</span></a><div></div></li> 
           <li><a href="#" class="nav" οnclick="changeId('curNavDemo3',this)"><span>好长好长的菜单呀</span></a><div></div></li> 
       </ul> 
   </div> 
   </body> 
   </html> 
  

六. 通过测试代码框看效果

终于想了一个折冲的方法看效果,避开span无效,我添加了冰极峰的一个代码执行框,大家之需要把代码第五部分的代码复制到框内运行即可.

转载于:https://www.cnblogs.com/wyinwing/archive/2009/06/22/1508743.html

diaoyan8513

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
留言本开发记录(二)--CSS制作漂亮导航条

在完成了留言本的基本功能制作后,发现不太美观,需要从整体的角度优化一些界面的设计,于是google了很多前端设计的文章,学到了很多很多,这里先推荐几个我觉得很好的前端个人博客: CSSRain , 冰极峰 , 彬Go , ifireyy 当然还有大型网站蓝色理想 , 无忧脚本 , 兰帕映像等. 说远了,马上回来,回到导航条的制作,可以先看看下面的例子(截图):...
复制链接

扫一扫