js实现适用于素材网站的黑色多级菜单导航条效果


Posted in Javascript onAugust 24, 2015

本文实例讲述了js实现适用于素材网站的黑色多级菜单导航条效果。分享给大家供大家参考。具体如下:

这是一款适用于素材网站的黑色多级菜单导航条,无需jQuery,采用CSS+javaScript来实现,整体效果非常棒,用来学习CSS也是很不错的。

运行效果截图如下:

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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css+js打造超酷黑灰色二级横向下拉导航菜单</title>
<style>
body{margin:0;padding:0;color:#000;}
#mainHeader{width:100%;z-index:3020;position:relative;}
#mainHeader ul,#mainHeader li{position:relative;margin:0;padding:0;list-style:none;z-index:3020;}
#headerTop{background:#222;background:linear-gradient(bottom,#171717 0,#222 10%);background:-moz-linear-gradient(bottom,#171717 0,#222 10%);background:-webkit-gradient(linear,left bottom,left top,color-stop(0,#171717),color-stop(10%,#222));z-index:3020;height:52px;}
#headerBottom{border-top:1px solid #4f4f4f;border-bottom:1px solid #000;position:relative;height:34px;background:#2c2c2c;background:linear-gradient(top,#3c3c3c 0,#1d1d1d 100%);background:-moz-linear-gradient(top,#3c3c3c 0,#1d1d1d 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#3c3c3c),color-stop(100%,#1d1d1d));z-index:3010;}
#navmenu{width:900px;margin:0 auto;position:relative;font-size:14px;}
#navmenu li{display:block;position:relative;float:left;border-top:0;border-left:1px solid #454545;border-bottom:0;border-right:1px solid #151515;xheight:18px;}
#navmenu li a{text-shadow:1px 1px 1px black;display:block;padding:8px 18px;color:#fff;text-decoration:none;white-space:nowrap;}
#navmenu li a:hover{padding-top:5px;border-top:3px solid #ff0000;}
.newSash{position:relative;}
.newSash .newSashSpan{background:url(images/newSashRed.gif) top left no-repeat;width:26px;height:26px;position:absolute;top:-1px;right:0;}
.downArrow{display:block;border-color:#fff transparent transparent transparent;border-style:solid;border-width:3px;height:0;width:0;position:absolute;top:16px;right:8px;_border:none;}
#navmenu div{position: absolute;visibility: hidden; padding: 0;margin-left:-1px;margin-top:2px; background: #313131;border:1px solid #222;}
#navmenudiv a{position: relative;display: block;margin: 0;padding: 8px 10px;border-bottom:1px solid #fff;width: auto;white-space: nowrap;text-align: left;text-decoration: none;background: #666;color: #fff;}
#navmenu div a:hover{background: #222;border-top:none;border-left:3px solid #ff0000;color: #FFF;padding: 8px 10px;}
</style>
<script type="text/javascript">
var timeout  = 500;
var closetimer  = 0;
var ddmenuitem = 0;
function mopen(id)
{
 mcancelclosetime();
 if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
 ddmenuitem = document.getElementById(id);
 ddmenuitem.style.visibility = 'visible';
}
function mclose()
{
 if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
function mclosetime()
{
 closetimer = window.setTimeout(mclose, timeout);
}
function mcancelclosetime()
{
 if(closetimer)
 {
  window.clearTimeout(closetimer);
  closetimer = null;
 }
}
document.onclick = mclose;
</script>
</head>
<body style="text-align:center">
<div id="mainHeader" >
<div id="headerTop"></div>
<div id="headerBottom">
<ul id="navmenu">
 <li><a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">网站首页<span class="downArrow"></span></a>
  <div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
  <a href="#">三水点靠木</a>
  <a href="#">电子商务</a>
  <a href="#">网络营销人才</a>
  <a href="#">导航条代码</a>
  <a href="#">网站营销</a>  </div>
 </li>
 <li><a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()">导航条代码<span class="downArrow"></span></a>
  <div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
  <a href="#">三水点靠木</a>
  <a href="#">电子商务</a>
  <a href="#">网络营销人才</a>
  <a href="#">导航条代码</a>
  <a href="#">网站营销</a>  </div>
 </li>
 <li><a href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()">网页素材<span class="downArrow"></span></a>
  <div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
  <a href="#">三水点靠木</a>
  <a href="#">电子商务</a>
  <a href="#">网络营销人才</a>
  <a href="#">导航条代码</a>
  <a href="#">网站营销</a>  </div>
 </li>
 <li class="newSash"><a href="#">三水点靠木</a><span class="newSashSpan"></span>
 </li>
 <li><a href="#" onmouseover="mopen('m4')" onmouseout="mclosetime()">开源源码<span class="downArrow"></span></a>
  <div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
  <a href="#">三水点靠木</a>
  <a href="#">电子商务</a>
  <a href="#">网络营销人才</a>
  <a href="#">导航条代码</a>
  <a href="#">网站营销</a> </div>
 </li>
 <li><a href="#">网站营销</a>
 </li>
 <li><a href="#">网站建设</a>
 </li>
</ul>
</div>
</div>
</div>
<br><br><br><br>
<p><p>非常小巧的JS下拉菜单代码,兼容:IE6+, Firefox 1.5+, Opera 8+, Safari 3+, Chrome 0.2+</p></p>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
jquery实现网站超链接和图片提示效果
Mar 21 Javascript
在IE8上JS实现combobox支持拼音检索功能
May 23 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
May 24 Javascript
js创建对象几种方式的优缺点对比
Sep 28 Javascript
BootstrapValidator超详细教程(推荐)
Dec 07 Javascript
JS实现一个简单的日历
Feb 22 Javascript
JS验证全角与半角及相互转化的介绍
May 18 Javascript
jQuery实现滚动效果
Nov 17 jQuery
如何实现一个webpack模块解析器
Oct 24 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
Mar 04 Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
Jul 25 Javascript
微信小程序:报错(in promise) MiniProgramError
Oct 30 Javascript
如何屏蔽防止别的网站嵌入框架代码
Aug 24 #Javascript
纯css实现窗户玻璃雨滴逼真效果
Aug 23 #Javascript
简单纯js实现点击切换TAB标签实例
Aug 23 #Javascript
基于jquery实现导航菜单高亮显示(两种方法)
Aug 23 #Javascript
CSS javascript 结合实现悬浮固定菜单效果
Aug 23 #Javascript
微信JSSDK上传图片
Aug 23 #Javascript
基于jquery实现人物头像跟随鼠标转动
Aug 23 #Javascript
You might like
php实现的XML操作(读取)封装类完整实例
2017/02/23 PHP
JS实现距离上次刷新已过多少秒示例
2014/05/23 Javascript
JavaScript中的类(Class)详细介绍
2014/12/30 Javascript
NodeJS学习笔记之MongoDB模块
2015/01/13 NodeJs
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
2015/04/01 Javascript
JavaScript实现打字效果的方法
2015/07/10 Javascript
一篇文章掌握RequireJS常用知识
2016/01/26 Javascript
JS 数字转换为大写金额的简单实例
2016/08/04 Javascript
JS中with的替代方法与String中的正则方法详解
2016/12/23 Javascript
JavaScript之创意时钟项目(实例讲解)
2017/10/23 Javascript
d3.js实现自定义多y轴折线图的示例代码
2018/05/30 Javascript
layer.open关闭父窗口 以及调用父页面的方法
2018/08/17 Javascript
前端天气插件tpwidget使用方法详解
2019/06/24 Javascript
JavaScript中Object、map、weakmap的区别分析
2020/12/15 Javascript
用Python实现服务器中只重载被修改的进程的方法
2015/04/30 Python
python实现比较两段文本不同之处的方法
2015/05/30 Python
Python多进程分块读取超大文件的方法
2016/04/13 Python
使用Python判断质数(素数)的简单方法讲解
2016/05/05 Python
Python使用迭代器打印螺旋矩阵的思路及代码示例
2016/07/02 Python
python 图片去噪的方法示例
2019/07/09 Python
python实现的生成word文档功能示例
2019/08/23 Python
基于Tensorflow高阶读写教程
2020/02/10 Python
python如何实现单链表的反转
2020/02/10 Python
CSS3 实现雷达扫描图的示例代码
2020/09/21 HTML / CSS
Alba Moda德国网上商店:意大利时尚女装销售
2016/11/14 全球购物
北京-环亚运商测试题.net程序员初步测试题
2013/05/28 面试题
互联网创业计划书的书写步骤
2014/01/28 职场文书
驾驶员培训方案
2014/05/01 职场文书
党员先锋岗事迹材料
2014/05/08 职场文书
感恩节活动策划方案
2014/05/16 职场文书
大学新闻系应届生求职信
2014/06/02 职场文书
房展策划方案
2014/06/07 职场文书
离婚财产处理协议书
2014/09/30 职场文书
2014年高校辅导员工作总结
2014/12/09 职场文书
mysql 如何获取两个集合的交集/差集/并集
2021/06/08 MySQL
HTML基础详解(上)
2021/10/16 HTML / CSS