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 相关文章推荐
基于jquery的页面划词搜索JS
Sep 14 Javascript
node在两个div之间移动,用ztree实现
Mar 06 Javascript
jquery批量控制form禁用的代码
Aug 06 Javascript
javascript实现tab切换的四种方法
Nov 05 Javascript
莱鸟介绍window.print()方法
Jan 06 Javascript
js实现消息滚动效果
Jan 18 Javascript
AngularJS实现使用路由切换视图的方法
Jan 24 Javascript
微信小程序 动态传参实例详解
Apr 27 Javascript
vue.js简单配置axios的方法详解
Dec 13 Javascript
小程序实现搜索框功能
Mar 26 Javascript
JavaScript适配器模式原理与用法实例详解
Mar 09 Javascript
eslint+prettier统一代码风格的实现方法
Jul 22 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中调用JAVA
2006/10/09 PHP
浅析PHP的ASCII码转换类
2013/07/05 PHP
2个自定义的PHP in_array 函数,解决大量数据判断in_array的效率问题
2014/04/08 PHP
php中静态类与静态变量用法的区别分析
2015/01/15 PHP
微信API接口大全
2015/04/15 PHP
PHP制作用户注册系统
2015/10/23 PHP
php中上传文件的的解决方案
2018/09/25 PHP
Laravel如何实现适合Api的异常处理响应格式
2020/06/14 PHP
PHP $O00OO0=urldecode &amp; eval 解密,记一次商业源码的去后门
2020/09/13 PHP
JavaScript 私有成员分析
2009/01/13 Javascript
利用onresize使得div可以随着屏幕大小而自适应的代码
2010/01/15 Javascript
javaScript call 函数的用法说明
2010/04/09 Javascript
javascript复制对象使用说明
2011/06/28 Javascript
利用JS延迟加载百度分享代码,提高网页速度
2013/07/01 Javascript
js点击选择文本的方法
2015/02/09 Javascript
jQuery选择器源码解读(二):select方法
2015/03/31 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
2015/06/25 Javascript
Bootstrap3 模态框使用实例
2017/02/22 Javascript
深入探究node之Transform
2017/07/20 Javascript
vue中子组件的methods中获取到props中的值方法
2018/08/27 Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
2020/03/31 Javascript
[00:38]TI珍贵瞬间系列(二):笑
2020/08/26 DOTA
让python的Cookie.py模块支持冒号做key的方法
2010/12/28 Python
Python的迭代器和生成器使用实例
2015/01/14 Python
python操作excel让工作自动化
2019/08/09 Python
tensorflow 获取checkpoint中的变量列表实例
2020/02/11 Python
python日期与时间戳的各种转换示例
2020/02/12 Python
python用WxPython库实现无边框窗体和透明窗体实现方法详解
2020/02/21 Python
通过自学python能找到工作吗
2020/06/21 Python
使用python求斐波那契数列中第n个数的值示例代码
2020/07/26 Python
python爬取代理ip的示例
2020/12/18 Python
物业管理应届生求职信
2013/10/28 职场文书
纪念九一八事变演讲稿:勿忘国耻
2014/09/14 职场文书
2014年信息中心工作总结
2014/12/17 职场文书
茶花女读书笔记
2015/06/29 职场文书
安装pytorch时报sslerror错误的解决方案
2021/05/17 Python