非常漂亮的导航菜单 -

mrstanglu

浏览: 39784 次
性别:
来自: 郑州

最近访客更多访客>>

文思涌动

wh880812

二流程序员

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

非常漂亮的导航菜单

博客分类：

Div+Css

JavaScript XHTML CSS HTML

实际效果图：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
#nav{background-image:url(images/navM.gif);}
#nav div{
background-image:url(images/nav_S.gif);
float:left;
width:4px;
height:34px;
font-size:0px;
margin:0px 4px;
background-repeat:no-repeat;
background-position:top;
background-repeat:no-repeat;
}
a.nav{
display:block; float:left; padding-left:12px; font-weight:bold; color:#fff; height:34px; font-size:14px; text-decoration:none; cursor:pointer;
}
a.nav span{
display:block; float:left; padding-right:12px; font-weight:bold; height:24px; padding-top:10px;
}
a.nav:hover{
display:block; float:left; padding-left:12px; font-weight:bold; color:#fff; height:34px; font-size:14px; background-image:url(images/nav_Over_L.gif); background-position:left center; background-repeat:no-repeat; text-decoration:none;
}
a.nav:hover span{
display:block; float:left; padding-right:12px; font-weight:bold; height:24px; padding-top:10px;background-image:url(images/nav_Over_R.gif); background-position:right center; background-repeat:no-repeat;
}
#curTab{
display:block; float:left; padding-left:12px; font-weight:bold; color:#f00; height:34px; font-size:14px;background-image:url(images/nav_On_L.gif); background-position:left center; background-repeat:no-repeat;
}
#curTab span{
display:block; float:left; padding-right:12px; font-weight:bold;height:24px; padding-top:10px;background-image:url(images/nav_On_R.gif);background-position:right center; background-repeat:no-repeat;
}

</style>
<script language="javascript">
function $(objId){
return document.getElementById(objId);
}
function changeId(idName,obj){
$(idName).id="";
obj.id=idName;
obj.blur();
}
</script>
</head>

<body>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td width="3"><img src="images/navL.gif" width="3" height="34" /></td>
        <td id="nav">
    <table width="960" border="0" align="center" cellpadding="0" cellspacing="0">
     <tr>
     <td>
    <a href="#" id="curTab" class="nav" onclick="changeId('curTab',this)"><span>首页</span></a>
    <div></div>
    <a href="#" class="nav" onclick="changeId('curTab',this)"><span>网站建设</span></a>
    <div></div>
    <a href="#" class="nav" onclick="changeId('curTab',this)"><span>软件开发</span></a>
    <div></div>
    <a href="#" class="nav" onclick="changeId('curTab',this)"><span>虚拟主机</span></a>
    <div></div>
    <a href="#" class="nav" onclick="changeId('curTab',this)"><span>域名注册</span></a>
    <div></div>
    <a href="#" class="nav" onclick="changeId('curTab',this)"><span>企业信息化</span></a>
    <div></div>
    <a href="#" class="nav" onclick="changeId('curTab',this)"><span>成功案例</span></a>
    <div></div>
    <a href="#" class="nav" onclick="changeId('curTab',this)"><span>在线留言</span></a>
    <div></div>
    <a href="#" class="nav" onclick="changeId('curTab',this)"><span>关于我们</span></a>
</td>
     </tr>
    </table>
   </td>
        <td width="3"><img src="images/navR.gif" width="3" height="34" /></td>
      </tr>
</table>
</body>
</html>

images文件夹里的图片有：