一个精彩的JS+CSS精彩导航实例

最新推荐文章于 2021-11-04 15:08:46 发布
最新推荐文章于 2021-11-04 15:08:46 发布
阅读量413 收藏 1
点赞数
分类专栏： 网页技巧大全 文章标签： css class div url xhtml javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hbqjzx/article/details/4525585
版权

<!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-Language" content="zh-cn" />

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title> 一个精彩的JS+CSS精彩导航实例</title>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<style type="text/css">

h4,div,ul,li,span{ padding:0px; margin:0px}

/* 最外面DIV的样式 */

#slidingBlock {

width:980px;

over-flow:hidden;

margin:auto;

height:60px;

border:#ccc solid 1px;

background-image: url(http://www.lanrentuku.com/images/uppic/200812180856440.jpg);

background-repeat: repeat-x;

background-position: top;

}

#nav_box{

height:33px;

width:958px;

text-align:center;

margin-left: 11px;

}

#slidingBlock a{ color:#000;

}

#slidingBlock h4 {

float:left;

width:78px;

height:33px;

line-height:33px;

text-align:center;

font-size:12px;

over-flow:hidden;

float:left;

background-image: url(http://www.lanrentuku.com/images/uppic/200812180856440.jpg);

background-repeat: repeat-x;

}

#slidingBlock h4.menuNo {

font-weight:normal;

color: #fff;

}

#slidingBlock h4.menuOn {

background-image: url(http://www.lanrentuku.com/images/uppic/200812180857440.jpg);

background-repeat: no-repeat;

background-position: 6px bottom;

color:#1368c2

}

#line{ width:2px; height:33px;

background-image: url(http://www.lanrentuku.com/images/uppic/200812180858210.jpg);

background-repeat: no-repeat;

 float:left

}

#slidingBlock DIV.slidingList_none {

    display:none

}

#slidingBlock DIV.slidingList {

width:auto;

margin:0px;

padding:0px;

height:27px;

clear:both;

background-image: url(http://www.lanrentuku.com/images/uppic/200812180858590.jpg);

background-repeat: repeat-x;

line-height:27px

}

#slidingBlock DIV.slidingList ul {

    margin:0px;padding:0px; list-style:none;

}

#slidingBlock DIV.slidingList li {

float:left;

height:20px;

line-height:20px;

font-size:12px;

text-indent:20px;

}

</style>

</head>

<body>

<div id="slidingBlock">

<script language="javascript">

  function switchmodTag(modtag,modcontent,modk) {

    for(i=1; i <13; i++) {

      if (i==modk) {

        document.getElementById(modtag+i).className="menuOn";document.getElementById(modcontent+i).className="slidingList";}

      else {

        document.getElementById(modtag+i).className="menuNo";document.getElementById(modcontent+i).className="slidingList_none";}

    }

  }

</script><div id="nav_box">

<h4 class="menuOn" id="mod1" οnmοuseοver="switchmodTag('mod','slidingList','1');this.blur();">

法规政策</h4><div id="line"></div>

<h4 class="menuNo" id="mod2" οnmοuseοver="switchmodTag('mod','slidingList','2');this.blur();">

政策标准</h4><div id="line"></div>

<h4 class="menuNo" id="mod3" οnmοuseοver="switchmodTag('mod','slidingList','3');this.blur();">

环保规划</h4><div id="line"></div>

<h4 class="menuNo" id="mod4" οnmοuseοver="switchmodTag('mod','slidingList','4');this.blur();">

环境评价</h4><div id="line"></div>

<h4 class="menuNo" id="mod5" οnmοuseοver="switchmodTag('mod','slidingList','5');this.blur();">

环保工程</h4><div id="line"></div>

<h4 class="menuNo" id="mod6" οnmοuseοver="switchmodTag('mod','slidingList','6');this.blur();">

环境监测</h4><div id="line"></div>

<h4 class="menuNo" id="mod7" οnmοuseοver="switchmodTag('mod','slidingList','7');this.blur();">

环保考试</h4><div id="line"></div>

<h4 class="menuNo" id="mod8" οnmοuseοver="switchmodTag('mod','slidingList','8');this.blur();">

环境论文</h4><div id="line"></div>

<h4 class="menuNo" id="mod9" οnmοuseοver="switchmodTag('mod','slidingList','9');this.blur();">

环境导航</h4><div id="line"></div>

<h4 class="menuNo" id="mod10" οnmοuseοver="switchmodTag('mod','slidingList','10');this.blur();">

求职招聘</h4><div id="line"></div>

<h4 class="menuNo" id="mod11" οnmοuseοver="switchmodTag('mod','slidingList','11');this.blur();">

供求信息</h4><div id="line"></div>

<h4 class="menuNo" id="mod12" οnmοuseοver="switchmodTag('mod','slidingList','12');this.blur();">

环保论坛</h4></div>

<div class="slidingList" id="slidingList1">

<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="slidingList_none" id="slidingList2">

<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>

<li  > <a href="/">第二个的</a></li>

<li  > <a href="/">第二个的</a></li>

</ul>

</div>

<div class="slidingList_none" id="slidingList3">

<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>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

</ul>

</div>

<div class="slidingList_none" id="slidingList4">

<ul>

<li> <a href="/">第4个的</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="/">第4个的</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="slidingList_none" id="slidingList5">

<ul>

<li> <a href="/">第5个的</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="/">第5个的</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="slidingList_none" id="slidingList6">

<ul>

<li> <a href="/">第5个的</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="/">第5个</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="slidingList_none" id="slidingList7">

<ul>

<li> <a href="/">第5个的</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="/">第5个的</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="slidingList_none" id="slidingList8">

<ul>

<li> <a href="/">第5个的</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="/">第5个的</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="slidingList_none" id="slidingList9">

<ul>

<li> <a href="/">第5个的</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="/">第5个的</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="slidingList_none" id="slidingList10">

<ul>

<li> <a href="/">第5个的</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="/">第5个的</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="slidingList_none" id="slidingList11">

<ul>

<li> <a href="/">第5个的</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="/">第5个的</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="slidingList_none" id="slidingList12">

<ul>

<li> <a href="/">第5个的</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="/">第5个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

</ul>

</div>

</div>

<br />

</body>

</html>

hbqjzx
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
HTML/CSS/JS之---导航条案例
qq_35164169的博客
07-19 870
该文章是一个运用HTML/CSS javascript制作的导航条小案例，非常简单，但是可以给初学者提供一个学习如何将javascript运用到网页制作中来的小案例。
JS+CSS组合的精彩漂亮的导航菜单代码
weixin_33698043的博客
06-05 94
代码简介：JS+CSS组合的精彩漂亮的导航菜单代码 代码内容: <!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/1...
一个精彩的JS+CSS精彩导航实例特效代码
03-20
【标题】"一个精彩的JS+CSS精彩导航实例特效代码"主要涵盖了JavaScript（JS）和CSS在网页导航设计中的应用，这是一种常见的网页交互效果实现方法。JS是JavaScript的缩写，是一种轻量级的脚本语言，常用于网页的动态...
一个精彩的JS CSS精彩导航实例.rar
07-04
这个“一个精彩的JS CSS精彩导航实例”是一个很好的学习资源，它展示了如何结合这两种技术来构建一个功能强大且视觉上引人入胜的导航系统。 首先，我们来探讨JavaScript在菜单导航中的作用。JavaScript主要负责交互...
daohang.rar_c js_js+css
最新发布
09-22
结合文件名称列表中的“一个精彩的JS+CSS精彩导航实例.html”，我们可以推测这个HTML文件是实例的主展示页面，它使用JS和CSS创建了一个动态且吸引人的导航菜单。 下面，我们将深入探讨JS和CSS在创建导航栏时的关键...
一段比较实用的JS导航条显隐例子
我的世界我的梦
05-16 3262
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" c
CSS 经典导航
houyanhua1的专栏
10-30 340
new document body,ul,li{ margin:0px; padding:0px;border:0px;} body{background:url(bg.jpg) no-repeat top center;} /* 背景图不居中的话，背景会随页面的大小改变 */ ul,li{list-style:none;} .nav{ width:980px;
几个经典的导航条，css+div+js写的，个人收集
05-07
几个经典的导航条，css+div+js写的，个人收集
前端作业(二)——网站导航栏案例
笨笨的博客
11-04 798
大家好。今天上课我们老师布置了两道作业——网站导航栏案例，我跟着老师的思路就敲了出来。虽然对很多大佬来说很简单，但正是这些简单的练习的积累，才能成就许许多多的前端大佬。我们能完整的写出一个项目，不都是从小白过来的吗？废话不多说了，直接放效果图和代码 一、网站导航栏案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equi.
javascript实现导航栏
liufuwu1的博客
11-11 2034
HTML代码： 衬衫 短袖衬衫 长袖衬衫 短袖T恤 长袖T恤 卫衣
常见案例---菜单导航
简桐
03-04 729
我们学习前端知识的目的就是去完成客户的一切合理需求。 那么今天我们就来看看常见的菜单导航有哪些小技巧和小坑需要注意的。 现在我们随便进那个网站都可以看到的就是一个分类导航栏 像这种分类菜单栏在现在是非常非常常见的，所以我们对于这种的原生js的实现一定要熟练。 那么这种导航栏需要注意的有哪些呢？ 切记切记不要一个小菜单一个方法 这样会使你的代码非常臃肿，我们一定要养成一个尽量一个功能一个封装的习惯...
20个优秀的Javascript导航菜单实现技巧及实例
10-23 2946
javascript能实现丰富的导航效果，使用Javascript可以使你的网站更加具有趣味性，能使得用户体验更好以及更加具有视觉性。这里推 荐20个优秀的Javascript导航技术及实例(20 Excellent JavaScript Navigation Techniques and Examples)，了解如何使用Javascript制作交互性强体验好的导航菜单，并深入了解各种导航的实现原
个人学习日记—CSS复合选择器、背景、三大特性
zh_hunan的博客
10-15 224
CSS复合选择器 目的是为了可以选择更准确更精细的目标元素标签。 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的 后代选择器（重点） 概念： 后代选择器又称为包含选择器 作用： 用来选择元素或元素组的子孙后代 其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。 语法： .class h3{color:red;font-size:16px;} 当标签发生嵌套时...
原生js+css3 实现3D导航栏实例
qiufengwuxiu的博客
04-09 802
&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="Generator" content="EditPlus®"&gt; &lt;meta name="Author"
22款经典UI设计二级下拉菜单导航系列
weixin_30755393的博客
11-24 251
1、干净漂亮的多级下拉菜单导航 下载地址：http://www.lanrenzhijia.com/nav/1523.html 预览地址：http://www.lanrenzhijia.com/demo/1109/nav/ 2、jquery动感下拉导航菜单 下载地址：http://www.lanrenzhijia.com/nav/1527.html 预览地址：http://www....
JS+CSS碰撞缓冲竖向导航条实例与代码
本篇文章详细介绍了如何通过JavaScript (JS) 和 CSS 实现一个具有碰撞缓冲效果的竖向导航栏。这种导航条的特点在于滑块在移动过程中会模拟出弹性振动的效果，为用户的交互体验增添了一种动态的触感。作者分享的是一...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

hbqjzx

你的鼓励将是我分享的最大动力！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值