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 相关文章推荐
js动态移动滚动条至底部示例代码
Apr 24 Javascript
让checkbox不选中即将选中的checkbox不选中
Jul 11 Javascript
jQuery层级选择器用法分析
Feb 10 Javascript
总结JavaScript设计模式编程中的享元模式使用
May 21 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
Aug 08 Javascript
JS字符串按逗号和回车分隔的方法
Apr 25 Javascript
AngularJS实现的锚点楼层跳转功能示例
Jan 02 Javascript
解决Angular.js中使用Swiper插件不能滑动的问题
Feb 26 Javascript
基于Vue+element-ui 的Table二次封装的实现
Jul 20 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
Dec 21 Javascript
vue组件创建的三种方式小结
Feb 03 Javascript
Node.js API详解之 net模块实例分析
May 18 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
mysql 字段类型说明
2007/04/27 PHP
Joomla下利用configuration.php存储简单数据
2010/05/19 PHP
php中使用Imagick实现图像直方图的实现代码
2011/08/30 PHP
用PHP编写和读取XML的几种方式
2013/01/12 PHP
Yii框架分页实现方法详解
2017/05/20 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
PHP5.6.8连接SQL Server 2008 R2数据库常用技巧分析总结
2019/05/06 PHP
event对象获取方法总结在google浏览器下测试
2013/11/03 Javascript
JS中多种方式创建对象详解
2016/03/22 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
2016/05/17 Javascript
微信小程序 下拉列表的实现实例代码
2017/03/08 Javascript
js+html获取系统当前时间
2017/11/10 Javascript
微信小程序日期选择器实例代码
2018/07/18 Javascript
jQuery实现上下滚动公告栏详细代码
2018/11/21 jQuery
javascript实现移动端触屏拖拽功能
2020/07/29 Javascript
python二分法实现实例
2013/11/21 Python
Python文件处理
2016/02/29 Python
轻松理解Python 中的 descriptor
2017/09/15 Python
python使用selenium登录QQ邮箱(附带滑动解锁)
2019/01/23 Python
Python绘制频率分布直方图的示例
2019/07/08 Python
Python实现简单的列表冒泡排序和反转列表操作示例
2019/07/10 Python
python自动化unittest yaml使用过程解析
2020/02/03 Python
pycharm 设置项目的根目录教程
2020/02/12 Python
scrapy结合selenium解析动态页面的实现
2020/09/28 Python
Python爬取微信小程序通用方法代码实例详解
2020/09/29 Python
Python机器学习工具scikit-learn的使用笔记
2021/01/28 Python
澳大利亚一站式数码相机商店:CameraPro
2020/03/09 全球购物
Crabtree & Evelyn欧盟:豪华洗浴、身体和护发
2021/03/09 全球购物
英国发展最快的在线超市之一:Click Marketplace
2021/02/15 全球购物
基督教婚礼主持词
2014/03/14 职场文书
2014年两会学习心得范例
2014/03/17 职场文书
《特殊的葬礼》教学反思
2014/04/27 职场文书
2015年十一国庆节演讲稿
2015/03/20 职场文书
2015年度企业工作总结
2015/05/21 职场文书
校园广播站开场白
2015/06/01 职场文书
餐厅如何利用“营销策略”扭转亏本局面
2019/10/15 职场文书