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函数、方法、对象代码
Oct 29 Javascript
jQuery实现仿美橙互联两级导航菜单的方法
Mar 09 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
Jun 17 Javascript
在JavaScript中访问字符串的子串
Jul 07 Javascript
js实现内容显示并使用json传输数据
Mar 16 Javascript
Javascript 事件冒泡机制详细介绍
Oct 10 Javascript
javascript中的后退和刷新实现方法
Nov 10 Javascript
深入理解js中的加载事件
Feb 08 Javascript
微信小程序上传多图到服务器并获取返回的路径
May 05 Javascript
使用express获取微信小程序二维码小记
May 21 Javascript
Vue 401配合Vuex防止多次弹框的案例
Nov 11 Javascript
详解Vue中的自定义指令
Dec 07 Vue.js
基于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
基于JQuery+PHP编写砸金蛋中奖程序
2015/09/08 PHP
简单理解PHP的面向对象编程方式
2016/05/17 PHP
PHP严重致命错误处理:php Fatal error: Cannot redeclare class or function
2017/02/05 PHP
PHP如何获取当前主机、域名、网址、路径、端口等参数
2017/06/09 PHP
PHP实现用户登录的案例代码
2018/05/10 PHP
直接生成打开窗口代码,不必下载
2008/05/14 Javascript
JS 创建对象(常见的几种方法)
2008/11/03 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
2014/03/20 Javascript
Underscore源码分析
2015/12/30 Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
2016/02/25 Javascript
浅析jquery unbind()方法移除元素绑定的事件
2016/05/24 Javascript
jQuery简单实现仿京东分类导航层效果
2016/06/07 Javascript
js 博客内容进度插件详解
2017/02/19 Javascript
Angular+Bootstrap+Spring Boot实现分页功能实例代码
2017/07/21 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
2017/12/14 Javascript
深入解析ES6中的promise
2018/11/08 Javascript
微信小程序登录态和检验注册过没的app.js写法
2019/05/22 Javascript
element的el-table中记录滚动条位置的示例代码
2019/11/06 Javascript
微信小程序整个页面的自动适应布局的实现
2020/07/12 Javascript
在Vue里如何把网页的数据导出到Excel的方法
2020/09/30 Javascript
vue 中this.$set 动态绑定数据的案例讲解
2021/01/29 Vue.js
深入解析Python中的WSGI接口
2015/05/11 Python
Python使用matplotlib填充图形指定区域代码示例
2018/01/16 Python
利用python实现微信头像加红色数字功能
2018/03/26 Python
Scrapy基于selenium结合爬取淘宝的实例讲解
2018/06/13 Python
基于python3生成标签云代码解析
2020/02/18 Python
Python基础之字典常见操作经典实例详解
2020/02/26 Python
HTML5中的进度条progress元素简介及兼容性处理
2016/06/02 HTML / CSS
澳大利亚在线百货商店:Real Smart
2017/08/13 全球购物
英国最出名高街品牌:Forever Unique
2018/02/24 全球购物
学期自我鉴定
2013/11/04 职场文书
自我介绍演讲稿
2014/01/15 职场文书
小学优秀班主任事迹材料
2014/05/17 职场文书
入党推优材料
2014/06/02 职场文书
时尚女魔头观后感
2015/06/04 职场文书
导游带团欢迎词
2015/09/30 职场文书