“五一”不能闲着，看有什么东东就整理一下吧。
老了，脑袋什么也记不住了，写下来，想不起来的时候也有个参考：（
这是抄来的“中国站长站”的导航栏，记下，说不定什么时候用到。
看着人家的代码，我基本上是手写了一遍，不过还是有一点点点的收获的：）
不过也有不足，导航的大类和小类之间的线不知道怎么除去，难道只能用图片了吗：（
PS：5.2晚上没睡的时候想了想，修改了一下CSS，线除去了，呵呵，也算小小的收获：）
<html>
<head>
<title> 仿chinaz导航 </title>
<script type="text/javascript" src="myjs.js">
</script>
<style type="text/css">
.global_nav{
margin:0;
border:1px solid #ccc;
width:750px;
height:60px;
/*overflow:hidden;*/
}
.nav_main{
width:720px;
height:30px;
margin:0px 0px 0px 15px;
overflow:hidden;
}
.nav_main ul{
margin:0px;
}
.nav_main li{
float:left;
text-align:center;
list-style:none;
}
.nav_current{
border-top:1px solid black;
border-left:1px solid black;
border-right:1px solid black;
display:block;
font-size:14px;
font-weight:bold;
color:green;
width:90px;
height:28px;/*5.2修改*/
margin:4px 0 0px 0;
padding:5px 0 3px 0;
text-decoration:none;
background-color:#e6e6e6;
overflow:hidden;
}
.nav_link{
border-bottom:1px solid black;
font-size:14px;
width:90px;
height:26px;/*5.2修改*/
padding:5px 0 2px 0;
margin:4px 0 0 0;
text-decoration:none;
}
.nav_sub{
height:30px;
text-align:left;
font-size:12px;
margin:0 0 0 15px;
}
.sub_box{
float:left;
width:720px;
height:30px;
margin:0 0 0 0;
border-left:1px solid black;/*5.2修改*/
border-right:1px solid black;/*5.2修改*/
border-bottom:1px solid black;/*5.2修改*/
background-color:#E6E6E6;
}
.nav_sub li{
float:left;
display:inline;
height:20px;
margin:0;
padding:0px 5px 0px 5px;
list-style:none;
}
.nav_sub ul{
margin:10px 0 0 0;
}
.dis{
display:block;
}
.undis{
display:none;
}
.nav_current a:link{
color:green;
text-decoration:none;
}
.nav_current a:visited{
color:green;
text-decoration:none;
}
.nav_current a:hover{
color:red;
text-decoration:none;
}
.nav_link a:link,.nav_link a:visited,.nav_link a:hover{
color:blue;
text-decoration:none;
}
.nav_sub li a:link,.nav_sub li a:visited,{
color:blue;
text-decoration:none;
}
.nav_sub li a:hover{
color:blue;
text-decoration:none;
/*background-color:red;*/
}
</style>
</head>
<body>
<a href="#">link</a>
<div class="global_nav">
<div class="nav_main">
<ul>
<li><span id="nav1" class="nav_current" onmouseover="doClick(this);"><a href="#">首 页</a></span></li>
<li><span id="nav2" class="nav_link" onmouseover="doClick(this);"><a href="#">站长在线</a></span></li>
<li><span id="nav3" class="nav_link" onmouseover="doClick(this);"><a href="#">网站运营</a></span></li>
<li><span id="nav4" class="nav_link" onmouseover="doClick(this);"><a href="#">联盟资讯</a></span></li>
<li><span id="nav5" class="nav_link" onmouseover="doClick(this);"><a href="#">新闻资讯</a></span></li>
<li><span id="nav6" class="nav_link" onmouseover="doClick(this);"><a href="#">设计在线</a></span></li>
<li><span id="nav7" class="nav_link" onmouseover="doClick(this);"><a href="#">网络编程</a></span></li>
<li><span id="nav8" class="nav_link" onmouseover="doClick(this);"><a href="#">服 务 器</a></span></li>
</ul>
</div>
<div class="nav_sub">
<div class="sub_box dis" id="sub1">
<ul>
<li><strong>热点通告：</strong></li>
</ul>
</div>
<div class="sub_box undis" id="sub2">
<ul>
<li><a href="#">好站推荐</a> | </li>
<li><a href="#">站长聚会</a> | </li>
<li><a href="#">站长访谈</a> | </li>
<li><a href="#">站长茶馆</a> | </li>
<li><a href="#">网站排行</a> </li>
</ul>
</div>
<div class="sub_box undis" id="sub3">
<ul>
<li><a href="#">建站经验</a> | </li>
<li><a href="#">策划盈利</a> | </li>
<li><a href="#">搜索优化</a> | </li>
<li><a href="#">网站推广</a> | </li>
<li><a href="#">免费资源</a> </li>
</ul>
</div>
<div class="sub_box undis" id="sub4">
<ul>
<li><a href="#">联盟新闻</a> | </li>
<li><a href="#">联盟介绍</a> | </li>
<li><a href="#">联盟点评</a> | </li>
<li><a href="#">网赚技巧</a> </li>
</ul>
</div>
<div class="sub_box undis" id="sub5">
<ul>
<li><a href="#">业界动态</a> | </li>
<li><a href="#">收购融资</a> | </li>
<li><a href="#">门户动态</a> | </li>
<li><a href="#">搜索引擎</a> | </li>
<li><a href="#">网络游戏</a> | </li>
<li><a href="#">电子商务</a> | </li>
<li><a href="#">广告传媒</a> | </li>
<li><a href="#">厂商开发</a> </li>
</ul>
</div>
<div class="sub_box undis" id="sub6">
<ul>
<li><a href="#">酷站推荐</a> | </li>
<li><a href="#">网页设计</a> | </li>
<li><a href="#">WEB标准</a> | </li>
<li><a href="#">视频处理</a> | </li>
<li><a href="#">设计活动</a> </li>
</ul>
</div>
<div class="sub_box undis" id="sub7">
<ul>
<li><a href="#">Asp编程</a> | </li>
<li><a href="#">Php编程</a> | </li>
<li><a href="#">.Net编程</a> | </li>
<li><a href="#">Xml编程</a> | </li>
<li><a href="#">Access</a> | </li>
<li><a href="#">Mssql</a> | </li>
<li><a href="#">Mysql</a> </li>
</ul>
</div>
<div class="sub_box undis" id="sub8">
<ul>
<li><a href="#">Web服务器</a> | </li>
<li><a href="#">Ftp服务器</a> | </li>
<li><a href="#">Mail服务器</a> | </li>
<li><a href="#">Dns服务器</a> | </li>
<li><a href="#">Win服务器</a> | </li>
<li><a href="#">Linux服务器</a> | </li>
<li><a href="#">安全防护</a> </li>
</ul>
</div>
</div>
</div>
</body>
</html>
myjs.js文件
function doClick(o){
//变量o指向触发monseover事件的对象，这里是<span/>元素
//修改<span/>元素的class属性
o.className="nav_current";
var j;
var id;
var e;
for(var i=1;i<=8;i++){
id ="nav"+i;
//取得元素
j = document.getElementById(id);
//取得子栏目的元素
e = document.getElementById("sub"+i);
//循环，如果id值与当前<span/>元素的id属性值不同，就修改对应元素的class属性值，同时把对应的sub栏目的可见性设置为none
if(id != o.id){
j.className="nav_link";
e.style.display = "none";
}else{
e.style.display = "block";
}
}
}
分享到：
相关推荐
"自适应横排导航"意味着无论用户是在大屏幕的桌面设备还是小屏幕的移动设备上访问，导航栏都能自动调整布局，保持水平排列。这种自适应性是响应式网页设计的核心，确保了在各种设备上的兼容性和一致性。在移动设备上...
Flexbox提供了一种灵活的方式来排列和对齐元素，特别适合创建动态的、响应式的导航菜单。在横排布局中，父容器设置为`display: flex`，可以轻松地让子元素水平排列，并在空间不足时自动换行。 3. **下拉菜单**：...
在本资源包中，你可能会发现各种动态效果，如鼠标悬停时的下拉菜单、平滑过渡的滑块以及渐变色彩变化等，这些都可以使横向导航栏更具吸引力。 其次，竖向折叠导航栏，又称侧边栏或抽屉式导航，常用于空间有限或者...
jquery 网站导航菜单 横排下拉菜单 竖排下拉菜单
jquery 网站导航菜单 横排下拉菜单 竖排下拉菜单
在本主题中，我们将深入探讨“横排CSS动态导航条”的实现方式，以及如何将其应用到实际项目中。横排布局是网页设计中最常见的导航条样式，因为它简洁且易于阅读。同时，动态效果可以增加用户体验的互动性和吸引力。 ...
在网页设计中，导航栏是页面布局的重要组成部分，它帮助用户快速访问网站的不同部分。本教程将详述如何使用HTML的`<div>`、`<ul>`和`<li>`标签，结合CSS来创建一个简洁且清晰的横向导航栏。这种方法既简单又实用，...
"仿美食天下橙色jQuery横排二级导航菜单"是一个专为网站设计的交互式菜单，其特点是采用jQuery库来实现二级菜单的动态效果，特别是在鼠标滑过时，二级菜单会以横排的方式显示，并带有渐出渐入的视觉效果，提升了用户...
"jQuery自适应横排下拉菜单导航代码"提供了一个高效且美观的解决方案，尤其适合那些希望提升用户体验的开发者。这个代码利用jQuery库实现，能够根据屏幕尺寸自动调整布局，确保在各种设备上都能良好地展示。 首先，...
4. **导航栏（Header Navigation）**：网站头部的导航菜单通常包含主要的页面链接，方便用户快速访问网站的不同部分。良好的导航设计应直观易用，且在不同设备上都能有效工作。 5. **CSS样式**：创建简洁大气的界面...
两款仿Flash效果的动感导航菜单，横排布局的导航条，同样采用了jQuery提供的动画生成功能。 菜单加入了漂亮的鼠标动作，当鼠标滑过导航条中的某个菜单项时，该项的背景会动画出现，本示例页中含有两款菜单，形式略...
"超漂亮的导航下载，横排竖排的都有"这个标题揭示了一个资源集合，其中包含多种风格的导航栏设计，包括横向和纵向布局。这些设计可能适用于各种类型的网站，旨在提供美观且实用的用户体验。 描述中的"有横排竖排的...
本文将深入探讨如何使用CSS（层叠样式表）和DIV（division，分块元素）来创建灵活且响应式的导航栏，包括横排和竖排两种布局方式。 首先，我们从基础开始。CSS是一种样式表语言，用于描述HTML或XML（包括如SVG、...
"jQuery自适应横排下拉导航代码"是一个专门用于创建高效、美观且响应式的水平导航栏的解决方案。这个代码库利用了JavaScript库jQuery的强大功能，为用户提供了一种直观的交互方式，特别是对于内容丰富的网站，下拉...
《jQuery自适应横排下拉菜单导航代码详解》 在网页设计中，导航菜单是必不可少的部分，它为用户提供直观的页面跳转路径。jQuery作为一款轻量级的JavaScript库，因其简洁的API和丰富的功能，常被用于创建交互性强的...
在【描述】中提到的“横排美化”，意味着论坛的导航菜单、板块列表和其他元素将横向展示，这通常能够提供更宽广的视觉效果，使页面看起来更加现代化。相比于传统的竖直布局，横排设计有时能更好地利用屏幕空间，尤其...
下拉导航菜单的基本结构通常包括一个主菜单栏和一系列子菜单项。当用户鼠标悬停在主菜单项上时，相应的子菜单就会滑出，显示更多的链接选项。在jQuery中，我们可以利用`hover()`函数来监听鼠标悬停事件，然后通过`...
总的来说，`jQuery`提供了一种简洁且高效的方式来创建动态网站导航菜单，无论是横排还是竖排的下拉菜单。通过熟练掌握`jQuery`的API，我们可以轻松实现各种复杂的交互效果，提升网站的可用性和吸引力。对于初学者，...
`HorizontalSubmenu`这个源码示例就是关于如何使用Asp.net菜单控件并结合CSS来实现一种常见的设计模式：横排子菜单。这种布局方式常用于网站顶部导航，使用户能够快速浏览和访问多个层次的页面。 首先，Asp.net菜单...