JS实现灵巧的下拉导航效果代码


Posted in Javascript onAugust 25, 2015

本文实例讲述了JS实现灵巧的下拉导航效果代码。分享给大家供大家参考。具体如下:

这是一款基于JS实现下拉菜单,是一款灵巧的网站导航条,支持二级显示,向下滑动显示,经典的下拉菜单,JS和CSS共同编写实现,Li菜单列表风格,便于修改,兼容各大主流浏览器,相信你也会喜欢的。

运行效果截图如下:

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=utf-8" />
<title>js暗蓝色下拉导航菜单</title>
<style>
@charset "utf-8";
body{padding:0px;margin:0px;}
body{font-family:Arial, Helvetica, sans-serif;font-size:9pt;background-color:#3A4954;}
ul,li{padding:0px;margin:0px;list-style-type: none;}
* a{text-decoration: none;color:#CFE0EE;}
a:hover{color:#F09C42;}
a:hover{color:#F09C42;}
#navMenu{width:100%;height: 34px;line-height: 34px;display:block;overflow:hidden;background-image: url(images/nav_bg.jpg);background-repeat:repeat-x;background-position: left top;}
#navMenu ul{width:95%;
margin-left:16px;}
#navMenu .onelink{background-image:none;}
#navMenu li{width:90px;text-align:center;float: left;line-height: 34px;height: 34px;background-image: url(images/nav_fg.jpg);background-repeat: no-repeat;background-position: 0 center;margin-left: -2px;}
#navMenu li a{color:#6CA7C7;font-family: "宋体";padding-right: 1em;padding-left: 1em;margin-left: 2px;display: block;}
#navMenu li a:hover, #navMenu li.hover a{background-image: url(images/hover_bg.jpg);background-repeat:repeat-x;background-position: center top;text-decoration: none;color:#FF7B0E;}
.dropMenu{position:absolute;top: 0;z-index:100;width: 110px;visibility: hidden;
margin-top: -1px;margin-left:-2px;border: 1px solid #4D5B66;border-top: 0px solid #3CA2DC;background-color: #0D1C31;padding-top:6px;padding-bottom:6px;filter: Alpha(Opacity=85);}
.dropMenu li{margin-top:2px;margin-bottom:4px;padding-left:6px;}
.dropMenu li a{width: 92%;display: block;text-align:center;color: black;padding: 4px 0 4px 0px;color:#6CA7C7;border-bottom: 1px dashed #4D5B66;}
.dropMenu+li a{border-top:none;}
* html .dropMenu a{width: 100%;color:#6CA7C7;}
.dropMenu a:hover{text-decoration: underline;color:#F09C42;}
.hdo{width:100%;
height:auto;
display:block;
overflow:hidden;}
</style>
<script type='text/javascript' src='js/dropdown.js'></script>
</head>
<body>
<div id="navMenu">
<ul>
  <li class="onelink"><a href='#' target="_blank">主页</a></li>
  <li><a href='#' target="_blank">HTML+CSS模板</a></li>
  <li><a href='#' rel='dropmenu1' target="_blank">JS代码</a></li>
  <li><a href='#' rel='dropmenu2' target="_blank">电子商务</a></li>
  <li><a href='#' >SEO优化</a></li>
  <li><a href='#' rel='dropmenu3' target="_blank">建站技巧</a></li>
  <li><a href='#' target="_blank">网络营销</a></li>
  </ul>
</div>
<ul id="dropmenu1" class="dropMenu">
  <li><a href="#" target="_blank">导航菜单</a></li>
  <li><a href="#" target="_blank">焦点幻灯片</a></li>
  <li><a href="#" target="_blank">网页特效</a></li>
  <li><a href="#" target="_blank">广告代码</a></li>
</ul>
<ul id="dropmenu2" class="dropMenu">
  <li><a href="#" target="_blank">企业类网站</a></li>
  <li><a href="#" target="_blank">行业类网站</a></li>
  <li><a href="#/" target="_blank">BLOG类网站</a></li>
  <li><a href="#" target="_blank">门户类网站</a></li>
  <li><a href="#" target="_blank">商城类网站</a></li>
</ul>
<ul id="dropmenu3" class="dropMenu">
  <li><a href="#" target="_blank">HTML技巧</a></li>
  <li><a href="#" target="_blank">CSS技巧</a></li>
  <li><a href="#" target="_blank">CMS建站技巧</a></li>
  <li><a href="#" target="_blank">其他技巧</a></li>
</ul>
<script type="text/javascript">cssdropdown.startchrome("navMenu")</script> 
<!--//nav-->
</body>
</html>

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

Javascript 相关文章推荐
Javascript中的Split使用方法与技巧
Mar 09 Javascript
JavaScript初学者应注意的七个细节详细介绍
Dec 27 Javascript
jQuery ajax serialize()方法的使用以及常见问题解决
Jan 27 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
Aug 12 Javascript
JS与jQ读取xml文件的方法
Dec 08 Javascript
JS实现漂亮的时间选择框效果
Aug 20 Javascript
使用JQuery选择HTML遍历函数的方法
Sep 17 Javascript
jQuery实现遮罩层登录对话框
Dec 29 Javascript
jquery实现超简单的瀑布流布局【推荐】
Mar 08 Javascript
vue构建单页面应用实战
Apr 10 Javascript
Vue父子组件之间的通信实例详解
Sep 28 Javascript
解决微信小程序防止无法回到主页的问题
Sep 28 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
Aug 25 #Javascript
jQuery实现类似标签风格的导航菜单效果代码
Aug 25 #Javascript
jQuery下拉美化搜索表单效果代码分享
Aug 25 #Javascript
jQuery实现下滑菜单导航效果代码
Aug 25 #Javascript
Jquery 分页插件之Jquery Pagination
Aug 25 #Javascript
js实现的tab标签切换效果代码分享
Aug 25 #Javascript
JavaScript实现向右伸出的多级网页菜单效果
Aug 25 #Javascript
You might like
解析php中const与define的应用区别
2013/06/18 PHP
使用dump函数,给php加断点测试
2013/06/25 PHP
postfixadmin忘记密码后的修改密码方法详解
2016/07/20 PHP
详解php实现页面静态化原理
2017/06/21 PHP
jquery根据锚点offset值实现动画切换
2014/09/11 Javascript
利用jquery操作Radio方法小结
2014/10/20 Javascript
js实现鼠标感应向下滑动隐藏菜单的方法
2015/02/20 Javascript
jquery实现的伪分页效果代码
2015/10/29 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
2016/08/25 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
2016/09/26 Javascript
JavaScript、C# URL编码、解码总结
2017/01/21 Javascript
jQuery实现页面倒计时并刷新效果
2017/03/13 Javascript
javascript实现下雨效果
2017/03/27 Javascript
React Native中NavigatorIOS组件的简单使用详解
2018/01/27 Javascript
新手快速上手webpack4打包工具的使用详解
2019/01/28 Javascript
JSON的parse()方法介绍
2019/01/31 Javascript
JavaScript制作3D旋转相册
2020/08/02 Javascript
使用JavaScript计算前一天和后一天的思路详解
2019/12/20 Javascript
js中forEach,for in,for of循环的用法示例小结
2020/03/14 Javascript
vue@cli3项目模板怎么使用public目录下的静态文件
2020/07/07 Javascript
node.js爬虫框架node-crawler初体验
2020/10/29 Javascript
jQuery实现动态操作table行
2020/11/23 jQuery
js中实现继承的五种方法
2021/01/25 Javascript
windows系统中python使用rar命令压缩多个文件夹示例
2014/05/06 Python
python解析含有重复key的json方法
2019/01/22 Python
Python基本数据结构之字典类型dict用法分析
2019/06/08 Python
python实现文法左递归的消除方法
2020/05/22 Python
django使用graphql的实例
2020/09/02 Python
大二法英学生职业生涯规划范文
2014/02/27 职场文书
2014老师三严三实对照检查材料思想汇报
2014/09/18 职场文书
幼儿园小朋友毕业感言
2015/07/30 职场文书
《揠苗助长》教学反思
2016/02/20 职场文书
用人单位的规章制度,怎样制定才是有效的?
2019/07/09 职场文书
go语言中GOPATH GOROOT的作用和设置方式
2021/05/05 Golang
python内置进制转换函数的操作
2021/06/02 Python
详解nginx location指令
2022/01/18 Servers