留言本开发记录(二)--CSS制作漂亮导航条
在完成了留言本的基本功能制作后,发现不太美观,需要从整体的角度优化一些界面的设计,于是google了很多前端设计的文章,学到了很多很多,这里先推荐几个我觉得很好的前端个人博客: CSSRain , 冰极峰 , 彬Go , ifireyy 当然还有大型网站 蓝色理想 , 无忧脚本 , 兰帕映像 等.
说远了,马上回来,回到导航条的制作,可以先看看下面的例子(截图):
PS:本来想把代码贴到文章中显示的,效果更好,但是无奈博客园的默认总是把我的span去掉,不想改了,很麻烦,所以就只有上图了,想看效果的请到第6步复制代码运行(或者下载文件到本地).
上面例子都是我参考高手们的例子,修改之后而得,感谢互联网~
一. 菜单的结构
1: <ul class="blue">
2: <li><a href="#" title="首页" id="current" onclick="changeId('current',this)"><span></span>首页</a></li>
3: <li><a href="#" title="菜单1" onclick="changeId('current',this)"><span></span>菜单1</a></li>
4: <li><a href="#" title="菜单2" onclick="changeId('current',this)"><span></span>菜单2</a></li>
5: <li><a href="#" title="好长好长好长的菜单呀" onclick="changeId('current',this)"><span></span>好长好长好长的菜单呀</a></li>
6: </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: /*导航1*/
2: ul.blue {padding: 5px;list-style: none;background-color: #fff;border-bottom: 1px solid #e7e7e7;float: left;clear: left;}
3: ul.blue li {float: left;}
4: 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;}
5: ul.blue li a span {float: left;padding-right: 15px;display: block;margin-top: -4px;height: 24px;}
6: #current{color: #0d5f83;background: url(images/blue.png) no-repeat top right;}
7: #current span{background: url(images/blue.png) no-repeat top left;}
8: ul.blue li a:hover{color: #0d5f83;background: url(images/pink.png) no-repeat top right;}
9: 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" onclick="changeId('curNavDemo',this)"><span></span>首页</a></li>
<li><a href="#" title="菜单1" onclick="changeId('curNavDemo',this)"><span></span>菜单1</a></li>
<li><a href="#" title="菜单2" onclick="changeId('curNavDemo',this)"><span></span>菜单2</a></li>
<li><a href="#" title="好长好长的菜单呀" onclick="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" onclick="changeId('curNavDemo2',this)"><span>首页</span></a><div></div></li>
<li><a href="#" class="nav" onclick="changeId('curNavDemo2',this)"><span>菜单1</span></a><div></div></li>
<li><a href="#" class="nav" onclick="changeId('curNavDemo2',this)"><span>菜单2</span></a><div></div></li>
<li><a href="#" class="nav" onclick="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" onclick="changeId('curNavDemo3',this)"><span>首页</span></a><div></div></li>
<li><a href="#" class="nav" onclick="changeId('curNavDemo3',this)"><span>菜单1</span></a><div></div></li>
<li><a href="#" class="nav" onclick="changeId('curNavDemo3',this)"><span>菜单2</span></a><div></div></li>
<li><a href="#" class="nav" onclick="changeId('curNavDemo3',this)"><span>好长好长的菜单呀</span></a><div></div></li>
</ul>
</div>
</body>
</html>
六. 通过测试代码框看效果
终于想了一个折冲的方法看效果,避开span无效,我添加了冰极峰 的一个代码执行框,大家之需要把代码第五部分的代码复制到框内运行即可.
