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 相关文章推荐
JavaScript 大数据相加的问题
Aug 03 Javascript
图片延迟加载的实现代码(模仿懒惰)
Mar 29 Javascript
jQuery 滑动方法slideDown向下滑动元素
Jan 16 Javascript
js打开windows上的可执行文件示例
May 27 Javascript
JS实现仿微博可关闭弹出层效果
Sep 21 Javascript
javascript发送短信验证码实现代码
Nov 12 Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
Jan 26 Javascript
jQuery获取file控件中图片的宽高与大小
Aug 04 Javascript
几种响应式文字详解
May 19 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
vue-baidu-map 进入页面自动定位的解决方案(推荐)
Apr 28 Javascript
vue使用jsonp抓取qq音乐数据的方法
Jun 21 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 curl 登录163邮箱并抓取邮箱好友列表的代码(经测试)
2011/04/07 PHP
php ckeditor上传图片文件名乱码解决方法
2013/11/15 PHP
discuz免激活同步登入代码修改方法(discuz同步登录)
2013/12/24 PHP
浅谈ThinkPHP的URL重写
2014/11/25 PHP
PHP 年月日的三级联动实例代码
2017/05/24 PHP
解决laravel上传图片之后,目录有图片,但是访问不到(404)的问题
2019/10/14 PHP
基于JQuery的抓取博客园首页RSS的代码
2011/12/01 Javascript
jquery对单选框,多选框,文本框等常见操作小结
2014/01/08 Javascript
window.location.href IE下跳转失效的解决方法
2014/03/27 Javascript
一个不错的js html页面倒计时可精确到秒
2014/10/22 Javascript
新手快速学习JavaScript免费教程资源汇总
2015/06/25 Javascript
自己动手写的javascript前端等待控件
2015/10/30 Javascript
jQuery动态生成表格及右键菜单功能示例
2017/01/13 Javascript
使用Xcache缓存器加速PHP网站的配置方法
2017/04/22 Javascript
react-router JS 控制路由跳转实例
2017/06/15 Javascript
对Vue beforeRouteEnter 的next执行时机详解
2018/08/25 Javascript
js实现多图和单图上传显示
2019/12/18 Javascript
[43:33]EG vs Spirit Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
[20:39]DOTA2-DPC中国联赛 正赛开幕式 1月18日
2021/03/11 DOTA
Python的Asyncore异步Socket模块及实现端口转发的例子
2016/06/14 Python
python 计算一个字符串中所有数字的和实例
2019/06/11 Python
Pytorch 神经网络—自定义数据集上实现教程
2020/01/07 Python
tensorflow estimator 使用hook实现finetune方式
2020/01/21 Python
解决python运行启动报错问题
2020/06/01 Python
Python脚本破解压缩文件口令实例教程(zipfile)
2020/06/14 Python
Python CategoricalDtype自定义排序实现原理解析
2020/09/11 Python
CSS3中线性颜色渐变的一些实现方法
2015/07/14 HTML / CSS
html2 canvas生成清晰的图片实现打印功能
2019/09/23 HTML / CSS
Spartoo芬兰:欧洲最大的网上鞋店
2016/08/28 全球购物
水上运动奥特莱斯:Wasterports Outlet
2018/08/08 全球购物
DELPHI面试题研发笔试试卷
2015/11/08 面试题
毕业生自我鉴定实例
2014/01/21 职场文书
爱国卫生月实施方案
2014/02/21 职场文书
竞选大队委员演讲稿
2014/04/28 职场文书
党员“一帮一”活动总结
2015/05/07 职场文书
2016年党风廉政建设承诺书
2016/03/25 职场文书