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是怎么继承的介绍
Jan 05 Javascript
JavaScript cookie的设置获取删除详解
Feb 11 Javascript
JavaScript调用ajax获取文本文件内容实现代码
Mar 28 Javascript
JavaScript中的Math.sin()方法使用详解
Jun 15 Javascript
对js eval()函数的一些见解
Aug 15 Javascript
JS实现的DIV块来回滚动效果示例
Feb 07 Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 jQuery
JavaScript中的遍历详解(多种遍历)
Apr 07 Javascript
Node.js学习之地址解析模块URL的使用详解
Sep 28 Javascript
vue2.0 和 animate.css的结合使用
Dec 12 Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
Jan 07 Javascript
详解Vue template 如何支持多个根结点
Feb 10 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安装全攻略:APACHE
2006/10/09 PHP
追求程序速度,而不是编程的速度
2008/04/23 PHP
php中记录用户访问过的产品,在cookie记录产品id,id取得产品信息
2011/05/04 PHP
php inc文件使用的风险和注意事项
2013/11/12 PHP
filemanage功能中用到的lib.js
2007/04/08 Javascript
JavaScript 无符号右移赋值操作
2009/04/17 Javascript
Javascript延迟执行实现方法(setTimeout)
2010/12/30 Javascript
js 函数调用模式小结
2011/12/26 Javascript
js时间戳格式化成日期格式的多种方法
2013/11/11 Javascript
jQuery中:text选择器用法实例
2015/01/03 Javascript
javascript常用方法总结
2015/05/14 Javascript
javascript实现简单的分页特效
2015/08/12 Javascript
JS Array创建及concat()split()slice()的使用方法
2016/06/03 Javascript
Angular2下使用pdf插件的方法详解
2017/04/29 Javascript
详解webpack分包及异步加载套路
2017/06/29 Javascript
移动端效果之Swiper详解
2017/10/09 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
2017/10/09 Javascript
Python中实现两个字典(dict)合并的方法
2014/09/23 Python
利用python程序生成word和PDF文档的方法
2017/02/14 Python
python的dataframe和matrix的互换方法
2018/04/11 Python
python用plt画图时,cmp设置方法
2018/12/13 Python
python十进制转二进制的详解
2020/02/07 Python
HTML5调用手机摄像头拍照的实现思路及代码
2014/06/15 HTML / CSS
意大利独特而优质的家居用品:Fazzini
2018/12/05 全球购物
个人找工作的自我评价
2013/10/17 职场文书
大学毕业生个人自荐信范文
2014/01/08 职场文书
2014三八妇女节活动总结
2014/03/01 职场文书
贷款承诺书范文
2014/05/19 职场文书
高一学年自我鉴定范文(3篇)
2014/09/26 职场文书
2014年第四季度入党积极分子思想汇报(十八届四中全会)
2014/11/03 职场文书
2014年行政人事工作总结
2014/12/09 职场文书
公司市场部岗位职责
2015/04/15 职场文书
PyCharm 安装与使用配置教程(windows,mac通用)
2021/05/12 Python
关于springboot配置druid数据源不生效问题(踩坑记)
2021/09/25 Java/Android
Nginx 安装SSL证书完成HTTPS部署
2022/04/28 Servers
六个好看实用的 HTML + CSS 后台登录入口页面
2022/04/28 HTML / CSS