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 实现密码框的显示与隐藏示例代码
Sep 18 Javascript
javascript实现一个数值加法函数
Jun 26 Javascript
Css3制作变形与动画效果
Jul 24 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
Jan 23 Javascript
javascript数组去重小结
Mar 07 Javascript
jQuery表单对象属性过滤选择器实例详解
Sep 13 Javascript
利用node.js本地搭建HTTP服务器
Apr 19 Javascript
JavaScript你不知道的一些数组方法
Aug 18 Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
Jul 31 Javascript
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
vue从一个页面跳转到另一个页面并携带参数的解决方法
Aug 12 Javascript
js实现上传图片到服务器
Apr 11 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
Yii使用find findAll查找出指定字段的实现方法
2014/09/05 PHP
smarty内置函数section的用法
2015/01/22 PHP
php打印一个边长为N的实心和空心菱型的方法
2015/03/02 PHP
Zend Framework入门教程之Zend_Config组件用法详解
2016/12/09 PHP
php简单处理XML数据的方法示例
2017/05/19 PHP
PHP排序算法之基数排序(Radix Sort)实例详解
2018/04/21 PHP
jquery通过visible来判断标签是否显示或隐藏
2014/05/08 Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
2016/07/22 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
2016/08/05 Javascript
JS冒泡事件与事件捕获实例详解
2016/11/25 Javascript
简单谈谈require模块化jquery和angular的问题
2017/06/23 jQuery
angularJs的ng-class切换class
2017/06/23 Javascript
Popup弹出框添加数据实现方法
2017/10/27 Javascript
vue中,在本地缓存中读写数据的方法
2018/09/21 Javascript
vuex如何重置所有state(可定制)
2019/01/17 Javascript
layui使用表格渲染获取行数据的例子
2019/09/13 Javascript
JavaScript直接调用函数与call调用的区别实例分析
2020/05/22 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
2020/09/17 Javascript
python抓取网页中的图片示例
2014/02/28 Python
python实现通过shelve修改对象实例
2014/09/26 Python
详解Python里使用正则表达式的ASCII模式
2017/11/02 Python
python如何为创建大量实例节省内存
2018/03/20 Python
python 获取毫秒数,计算调用时长的方法
2019/02/20 Python
浅谈Python3 numpy.ptp()最大值与最小值的差
2019/08/24 Python
6行Python代码实现进度条效果(Progress、tqdm、alive-progress​​​​​​​和PySimpleGUI库)
2020/01/06 Python
浅谈Python里面None True False之间的区别
2020/07/09 Python
golang/python实现归并排序实例代码
2020/08/30 Python
python爬取抖音视频的实例分析
2021/01/19 Python
使用CSS3代码绘制可爱的Hello Kitty猫
2016/08/03 HTML / CSS
英国空调、除湿机和通风设备排名第一:Air Con Centre
2019/02/25 全球购物
大学毕业自我鉴定范文
2014/02/03 职场文书
小班上学期评语
2014/05/05 职场文书
安全施工标语
2014/06/07 职场文书
焦裕禄精神心得体会
2014/09/02 职场文书
怎样写离婚协议书
2014/09/10 职场文书
nginx前后端同域名配置的方法实现
2021/03/31 Servers