适合企业使用的导航菜单
适合企业站使用的一个导航菜单，设计精美，全是用背景拼出来的，不过有一点值得借鉴，看上去这么花，实际上只用了两张背景图片，总的背景一张，菜单是一张，只不过这里是用CSS控制背景平铺的位置，也就是为背景设置像素，只取有用到的部分，这样给你处理图片也带来了好处，而且使资源不零碎，便于整理。
当前位置：编程学习 > JS >>
答案：<html>
<head>
<title>适合企业使用的导航菜单</title>
<style>
body {
background: #f1efe2;
}
#header {
margin: 0 auto 0 auto;
width: 650px;
padding: 0;
border: 5px solid #fff;
height: 120px;
background: #666 url(/jscss/demoimg/200906/header.png) no-repeat left top;
}
ul#nav {
position: relative;
top: 68px;
left: 188px;
width: 346px;
margin: 0;
height: 22px;
list-style-type: none;
overflow: hidden;
}
body#welcome ul#nav { background: transparent url(/jscss/demoimg/200906/nav_f_2.png) no-repeat 0 0; }
body#products ul#nav { background: transparent url(/jscss/demoimg/200906/nav_f_2.png) no-repeat 0 -22px; }
body#support ul#nav { background: transparent url(/jscss/demoimg/200906/nav_f_2.png) no-repeat 0 -44px; }
body#contact ul#nav { background: transparent url(/jscss/demoimg/200906/nav_f_2.png) no-repeat 0 -66px; }
ul#nav li a {
position: absolute;
top: 0;
width: 84px;
text-indent: -9000px;
text-decoration: none;
padding: 22px 0 0 0;
overflow: hidden;
height: 0px !important;
background: transparent url(/jscss/demoimg/200906/nav_f_2.png) no-repeat;
}
body#welcome li#wel a { background-position: 0 0; width: 94px; left: 0; }
body#welcome li#wel a:hover { background-position: 0 0; }
body#welcome li#pro a { background-position: -94px -88px; left: 94px; }
body#welcome li#pro a:hover { background-position: -94px 0px; }
body#welcome li#sup a { background-position: -178px -88px; left: 178px; }
body#welcome li#sup a:hover { background-position: -178px 0; }
body#welcome li#con a { background-position: -262px -88px; left: 262px; }
body#welcome li#con a:hover { background-position: -262px 0; }
body#products li#wel a { background-position: 0 -110px; width: 94px; left: 0; }
body#products li#wel a:hover { background-position: 0 -22px; }
body#products li#pro a { background-position: -94px -22px; left: 94px; }
body#products li#pro a:hover { background-position: -94px -22px; }
body#products li#sup a { background-position: -178px -88px; left: 178px; }
body#products li#sup a:hover { background-position: -178px 0; }
body#products li#con a { background-position: -262px -88px; left: 262px; }
body#products li#con a:hover { background-position: -262px 0; }
body#support li#wel a { background-position: 0 -88px; width: 94px; left: 0; }
body#support li#wel a:hover { background-position: 0 -44px; }
body#support li#pro a { background-position: -94px -110px; left: 94px; }
body#support li#pro a:hover { background-position: -94px -44px; }
body#support li#sup a { background-position: -178px -44px; left: 178px; }
body#support li#sup a:hover { background-position: -178px -44px; }
body#support li#con a { background-position: -262px -88px; left: 262px; }
body#support li#con a:hover { background-position: -262px 0; }
body#contact li#wel a { background-position: 0 -88px; width: 94px; left: 0px; }
body#contact li#wel a:hover { background-position: 0 -44px; }
body#contact li#pro a { background-position: -94px -88px; left: 94px; }
body#contact li#pro a:hover { background-position: -94px 0; }
body#contact li#sup a { background-position: -178px -110px; left: 178px; }
body#contact li#sup a:hover { background-position: -178px -66px; }
body#contact li#con a { background-position: -262px -66px; left: 262px; }
body#contact li#con a:hover { background-position: -262px -66px; }
p { text-align: center; }
p a { color: #666; text-decoration: none; font: 11px/1.5 tahoma, arial, verdana, sans-serif; }
p a em { font-style: normal; border-bottom: 1px solid #999; }
p a:hover em { color: #333; border-bottom: 0; }
</style>
</head>
<body id="products">
<div id="header">
<ul id="nav">
<li id="wel"><a href="#">welcome</a></li>
<li id="pro"><a href="#">products</a></li>
<li id="sup"><a href="#">support</a></li>
<li id="con"><a href="#">contact</a></li>
</ul>
</div>
</body>
</html>
- 更多JS疑问解答：
- 几个验证11位手机号码格式的js代码
- js把图片转换成 base64代码
- js把base代码转换成图片
- JS 将 base64编码的图片转化为图片文件
- js中的定时器
- js如何获得FCKeditor控件的值
- 用js限制投票的cookie .目前设置的为：<input type="" class="" onclick="'window.location...
- JS验证，这块“牛皮”反复修改都不能实现
- 在JS中使用DOM模型
- 如何用JS 获取本地文件夹的文件列表
- js中new 了两个Object数组。怎么样将数组内容合并，重复的内容？
- 求实现自动生成图片缩略图的JS代码
- JS脚本网页问题
- js，代码中"object"和"Object"区别？
- js+flash实现网页图片切换效果，出现边框，单击激活此控件。