类似门户网站的CSS双行导航菜单
类似门户网站的导航效果，双行排列，完全基于CSS代码实现，单个菜单像按钮，组合成一块效果就更精致了，用到3张背景图片，不要忘记下载。
当前位置：编程学习 > JS >>
答案：<!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>
<style type="text/css">
<!--
a:link, a:visited { color: #0F0CBF; }
a:hover { color: #F00; text-decoration: underline; }
body { color: #003366; font-size: 12px; margin: 0px; padding: 0px; }
img { border:0px; }
li { list-style-type: none;}
.nav { height: 74px; width: 670px; }
#nav1 .menu, #nav2 .menu { float: left; width: 670px; }
#nav1 .menu_tab, #nav2 .menu_tab { float: left; height: 74px; width: 35px; }
#nav1 .menu .left { background-image: url(/jscss/demoimg/200907/menu_art_side.gif); background-position: 0px 0px; background-repeat: no-repeat; float: left; height: 74px; width: 5px; }
#nav1 .menu .middle { background-image: url(/jscss/demoimg/200907/menu_art_bg.gif); background-repeat: repeat-x; float: left; height: 74px; width: 933px; }
#nav1 .menu .right { background-image: url(/jscss/demoimg/200907/menu_art_side.gif); background-position: -5px 0px; background-repeat: no-repeat; float: right; height: 74px; width: 7px; }
#nav1 .menu li a { background-image: url(/jscss/demoimg/200907/menu_art_01.gif); height: 24px; width: 68px; line-height: 24px; background-repeat: no-repeat; float: left; text-align: center; text-decoration: none; color: #003366; background-position: 0px 0px;}
#nav1 .menu li a:hover { color: #006699; background-position: 0px -24px; }
#nav1 .menu li, #nav2 .menu li { float: left; margin-bottom: 2px; margin-left: 3px; margin-right: 0px; margin-top: 6px; }
#nav1 .menu ul, #nav2 .menu ul { margin-bottom: 0px; margin-left: 2px; margin-right: 0px; margin-top: 4px; }
#nav2 .menu .left { background-image: url(/jscss/demoimg/200907/menu_art_side.gif); background-position: 0px 0px; background-repeat: no-repeat; float: left; height: 74px; width: 5px; }
#nav2 .menu .middle { background-image: url(/jscss/demoimg/200907/menu_art_bg.gif); background-repeat: repeat-x; float: left; height: 74px; width: 933px; }
#nav2 .menu .right { background-image: url(/jscss/demoimg/200907/menu_art_side.gif); background-position: -5px 0px; background-repeat: no-repeat; float: right; height: 74px; width: 7px; }
#nav2 .menu li a { background-image: url(/jscss/demoimg/200907/menu_art_01.gif); height: 24px; width: 68px; line-height: 24px; background-repeat: no-repeat; float: left; text-align: center; text-decoration: none; color: #555555; background-position: 0px 0px; }
#nav2 .menu li a:hover { color: #0066cc; background-position: 0px -24px; }
-->
</style>
<script type="text/javascript">
function area_nav(index){
for(var i=1;i<=2;i++)
{
if( document.getElementById("nav"+i.toString()) != null )
{
document.getElementById("nav"+i.toString()).style.display = 'none';
}
}
document.getElementById("nav"+index.toString()).style.display = 'block';
}
</script>
</head>
<body>
<div id="nav1" class="nav">
<div class="menu">
<div class="middle" style="width: 670px; height: 74px">
<ul>
<li>
<a href="#" target="_top"><b style="color:#FF0000">源码首页</b></a>
</li>
<li>
<a href="#" target="_top">最新更新</a>
</li>
<li>
<a href="#" target="_top">源码分类</a>
</li>
<li>
<a href="#" target="_top">下载排行</a>
</li>
<li>
<a href="#" target="_top">ASP源码</a>
</li>
<li>
<a href="#" target="_blank"><b style="color:#FF0000">PHP源码</b></a>
</li>
<li>
<a href="#" target="_top">Ajax源码</a>
</li>
<li>
<a href="#" target="_top">Delphi源码</a>
</li>
<li>
<a href="#" target="_top">VC++源码</a>
</li>
<li>
<a href="#" target="_top">网页特效</a>
</li>
<li>
<a href="#" target="_top">菜单导航</a>
</li>
<li>
<a href="#" target="_top">层和布局</a>
</li>
<li>
<a href="#" target="_top"><b style="color:#330099">文字链接</b></a>
</li>
<li>
<a href="#" target="_top"><b style="color:#FF0000">图片特效</b></a>
</li>
<li>
<a href="#" target="_top"><b style="color:#FF0000">表单按钮</b></a>
</li>
<li>
<a href="" target="_top">游戏娱乐</a>
</li>
<li>
<a href="" target="_top">计算转换</a>
</li>
<li>
<a href="" target="_top">广告特效</a>
</li>
</ul>
</div>
</div>
</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实现网页图片切换效果，出现边框，单击激活此控件。