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入门教程(1) 什么是JS
Jan 31 Javascript
javascript事件问题
Sep 05 Javascript
javascript 嵌套的函数(作用域链)
Mar 15 Javascript
web前端开发也需要日志
Dec 09 Javascript
2种jQuery 实现刮刮卡效果
Feb 01 Javascript
Sortable.js拖拽排序使用方法解析
Nov 04 Javascript
bootstrap轮播模板使用方法详解
Nov 17 Javascript
360doc网站不登录就无法复制内容的解决方法
Jan 27 Javascript
javascript匿名函数中的'return function()'作用
Oct 15 Javascript
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
D3.js 实现带伸缩时间轴拓扑图的示例代码
Jan 20 Javascript
详解vue3.0 的 Composition API 的一种使用方法
Oct 26 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
人工智能开始玩《星际争霸2》 你的操作跟得上吗?
2017/08/11 星际争霸
Zend Studio去除编辑器的语法警告设置方法
2012/10/24 PHP
浅谈PHP接收POST数据方式
2015/06/05 PHP
PHP基于自定义函数生成笛卡尔积的方法示例
2017/09/30 PHP
PHP校验15位和18位身份证号的类封装
2018/11/07 PHP
php中yar框架实例用法讲解
2020/12/27 PHP
EasyUI实现第二层弹出框的方法
2015/03/01 Javascript
JavaScript使用function定义对象并调用的方法
2015/03/23 Javascript
Jquery注册事件实现方法
2015/05/18 Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
2015/09/09 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
2015/12/08 Javascript
jQuery动画效果实现图片无缝连续滚动
2016/01/12 Javascript
Vue.js 中的 $watch使用方法
2017/05/25 Javascript
React + webpack 环境配置的方法步骤
2017/09/07 Javascript
js实现简单选项卡功能
2020/03/23 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
2020/08/11 Javascript
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
2020/11/09 jQuery
实例说明Python中比较运算符的使用
2015/05/13 Python
Python+Selenium自动化实现分页(pagination)处理
2017/03/31 Python
Python数据结构与算法之图的广度优先与深度优先搜索算法示例
2017/12/14 Python
Tensorflow的可视化工具Tensorboard的初步使用详解
2018/02/11 Python
对python中词典的values值的修改或新增KEY详解
2019/01/20 Python
python 连续不等式语法糖实例
2020/04/15 Python
Python调用JavaScript代码的方法
2020/10/27 Python
Python+unittest+requests+excel实现接口自动化测试框架
2020/12/23 Python
python爬虫爬取图片的简单代码
2021/01/18 Python
ziaja齐叶雅官方海外旗舰店:来自波兰的天然护肤品牌
2017/01/02 全球购物
SQL Server面试题
2016/10/17 面试题
九年级物理教学反思
2014/01/29 职场文书
活动总结书
2014/05/08 职场文书
建设工程授权委托书
2014/09/22 职场文书
房屋维修协议书范本
2014/09/25 职场文书
新兵入伍决心书
2015/09/22 职场文书
导游词之黄果树瀑布
2019/09/20 职场文书
mongodb的安装和开机自启动详细讲解
2021/08/02 MongoDB
MySQL连接控制插件介绍
2021/09/25 MySQL