基于dropdown.js实现的两款美观大气的二级导航菜单


Posted in Javascript onSeptember 02, 2015

本文实例讲述了基于dropdown.js实现的两款美观大气的二级导航菜单。分享给大家供大家参考。具体如下:

1. 蓝色风格导航菜单

运行效果截图如下:

基于dropdown.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+css横向二级导航条-蓝色</title>
<style>
body{padding:0px;margin:0px;}
body{font-family:Arial, Helvetica, sans-serif;font-size:14px;background-color:#fff;}
ul,li{padding:0px;margin:0px;list-style-type: none;}
a{text-decoration: none;color:#003971;}
a:hover{color:#000;}
/*导航菜单*/
#navMenu {width:960px;margin:20px auto;height: 44px;line-height: 44px;display:block;overflow:hidden;background: url(images/_nav_bg.jpg) repeat-x ;}
#navMenu ul{width:95%;padding-left:8px;background:url(images/_nav_l.jpg) no-repeat;float:left;}
#navMenu .onelink{background-image:none;}
#navMenu_r{padding-right:8px;background:url(images/_nav_r.jpg) no-repeat right ;float:right;height:44px;}
#navMenu li {width:108px;text-align:center;float: left;line-height:44px;height: 44px;background-image: url(images/_nav_fg.jpg);  background-repeat: no-repeat;background-position: 0 center;  margin-left: -2px;}
#navMenu li a {  color:#fff;font-family: "宋体";padding-right: 1em;padding-left: 1em;margin-left: 2px;display: block;}
#navMenu li a:hover{background: url(images/_nav_hover.jpg) no-repeat center;  text-decoration: none;color:#FFf;}
/*-------- 下拉菜单 --------------*/
.dropMenu {  position:absolute;top: 0;z-index:100;width: 164px;visibility: hidden; margin-top: -2px;margin-left:-2px;}
.dropMenu li.end { background:url(images/_sub_bottom.jpg) no-repeat;padding-left:6px;height:12px;}
.dropMenu li {background:url(images/_sub_bg.jpg);padding:8px 0 0 6px;  }
.dropMenu li a {width: 92%;  display: block;  text-align:center;  color: black;padding: 5px 0 5px 0px;color:#000;  }
.dropMenu a:hover {text-decoration: underline;color:#003971;}
</style>
</head>
<body>
<br/><br/>
<p style="text-align:center;color:#000;font-size:15px;">js+css横向二级导航条--蓝色</p>
<br/><br/>
<div id="navMenu">
<ul>
 <li class="onelink"><a href='/'>主页</a></li>
 <li><a href='#'>HTML+CSS</a></li>
 <li><a href='#' rel='dropmenu1'>JS代码</a></li>
 <li><a href='#' rel='dropmenu2'>电子商务</a></li>
 <li><a href='#' >SEO优化</a></li>
 <li><a href='#' rel='dropmenu3'>建站技巧</a></li>
 <li><a href='#'>零度对策</a></li>
 <li><a href='#'>网络营销</a></li>
 </ul>
  <div id="navMenu_r"></div>
</div>
<script type='text/javascript' src='images/dropdown.js'></script>
<ul id="dropmenu1" class="dropMenu">
 <li><a href="#">导航菜单</a></li>
 <li><a href="#">焦点幻灯片</a></li>
 <li><a href="#">网页特效</a></li>
 <li><a href="#">广告代码</a></li>
  <li class="end"></li>
</ul>
<ul id="dropmenu2" class="dropMenu">
 <li><a href="#">企业类网站</a></li>
 <li><a href="#">行业类网站</a></li>
 <li><a href="#/">BLOG类网站</a></li>
 <li><a href="#">门户类网站</a></li>
 <li><a href="#">商城类网站</a></li>
  <li class="end"></li>
</ul>
<ul id="dropmenu3" class="dropMenu">
 <li><a href="#">HTML技巧</a></li>
 <li><a href="#">CSS技巧</a></li>
 <li><a href="#">CMS建站技巧</a></li>
 <li><a href="#">其他技巧</a></li>
  <li class="end"></li>
</ul>
<script type="text/javascript">cssdropdown.startchrome("navMenu")</script> 
<!--//nav-->
<br><br><br><br><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/>
</div>
</body>
</html>

2. 桔黄色风格导航菜单

运行效果截图如下:

基于dropdown.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+css二级菜单代码</title>
<style>
body{padding:0px;margin:0px;}
body{font-family:Arial, Helvetica, sans-serif;font-size:14px;background-color:#2f2f2f;}
ul,li{padding:0px;margin:0px;list-style-type: none;}
a{text-decoration: none;color:#CFE0EE;}
a:hover{color:#Fff;}
#navMenu {width:960px;margin:20px auto;height: 44px;line-height: 44px;display:block;overflow:hidden;background: url(images/nav_bg.jpg) repeat-x ;}
#navMenu ul{width:95%;padding-left:8px;background:url(images/nav_l.jpg) no-repeat;float:left;}
#navMenu .onelink{background-image:none;}
#navMenu_r{padding-right:8px;background:url(images/nav_r.jpg) no-repeat right ;float:right;height:44px;}
#navMenu li {width:108px;text-align:center;float: left;line-height:44px;height: 44px;background-image: url(images/nav_fg.jpg);  background-repeat: no-repeat;background-position: 0 center;  margin-left: -2px;}
#navMenu li a {color:#fff;font-family: "宋体";padding-right: 1em;padding-left: 1em;margin-left: 2px;display: block;}
#navMenu li a:hover{background: url(images/nav_hover.jpg) no-repeat center;
text-decoration: none;color:#FFf;}
/*-------- 下拉菜单 --------------*/
.dropMenu {  position:absolute;top: 0;z-index:100;width: 164px;visibility: hidden; margin-top: -4px;margin-left:-2px;}
.dropMenu li.end { background:url(images/sub_bottom.jpg) no-repeat;padding-left:6px;height:12px;}
.dropMenu li {background:url(images/sub_bg.jpg);padding:8px 0 0 6px;  }
.dropMenu li a {
width: 92%;  display: block;
text-align:center;
color: black;padding: 5px 0 5px 0px;color:#000;
}
.dropMenu a:hover {text-decoration: underline;color:#fa6e00;}
</style>
</head>
<body>
<br/><br/>
<p style="text-align:center;color:#fff;font-size:15px;">js+css横向二级导航条--桔黄色</p>
<br/><br/>
<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>
 <li><a href='#' target="_blank">网络营销</a></li>
 </ul>
  <div id="navMenu_r"></div>
</div>
<script type='text/javascript' src='images/dropdown.js'></script>
<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>
  <li class="end"></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>
  <li class="end"></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>
  <li class="end"></li>
</ul>
<script type="text/javascript">cssdropdown.startchrome("navMenu")</script> 
</div>
</body>
</html>

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

Javascript 相关文章推荐
Javascript 遮罩层和加载效果代码
Aug 01 Javascript
jQuery实现自定义事件的方法
Apr 17 Javascript
JavaScript中push(),join() 函数 实例详解
Sep 06 Javascript
微信小程序 wxapp画布 canvas详细介绍
Oct 31 Javascript
前端分页功能的实现以及原理(jQuery)
Jan 22 Javascript
Vue 仿百度搜索功能实现代码
Feb 16 Javascript
分析JavaScript数组操作难点
Dec 18 Javascript
对Layer弹窗使用及返回数据接收的实例详解
Sep 26 Javascript
12 种使用Vue 的最佳做法
Mar 30 Javascript
javascript实现贪吃蛇经典游戏
Apr 10 Javascript
如何使用vue slot创建一个模态框的实例代码
May 24 Javascript
antd日期选择器禁止选择当天之前的时间操作
Oct 29 Javascript
JavaScript对象学习小结
Sep 02 #Javascript
JS实现可点击展开与关闭的左侧广告代码
Sep 02 #Javascript
jquery实现华丽的可折角广告代码
Sep 02 #Javascript
javascript学习总结之js使用技巧
Sep 02 #Javascript
jQuery实现固定在网页顶部的菜单效果代码
Sep 02 #Javascript
自定义刻度jQuery进度条及插件
Sep 02 #Javascript
JQuery操作textarea,input,select,checkbox方法
Sep 02 #Javascript
You might like
PHP仿盗链代码
2012/06/03 PHP
php5.3后静态绑定用法详解
2016/11/11 PHP
用js判断输入是否为中文的函数
2014/03/10 Javascript
轻松掌握JavaScript中的Math object数学对象
2016/05/26 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
2016/08/01 Javascript
JS中BOM相关知识点总结(必看篇)
2016/11/22 Javascript
Bootstrap基本组件学习笔记之列表组(11)
2016/12/07 Javascript
Vue概念及常见命令介绍(1)
2016/12/08 Javascript
对于input 框限定输入值为浮点型的js代码
2017/09/25 Javascript
vue todo-list组件发布到npm上的方法
2018/04/04 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
2018/09/14 Javascript
基于node.js实现爬虫的讲解
2019/02/18 Javascript
使用taro开发微信小程序遇到的坑总结
2019/04/08 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
2020/01/06 Javascript
基于Web Audio API实现音频可视化效果
2020/06/12 Javascript
[01:27:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第一场 1月24日
2021/03/11 DOTA
学习python 之编写简单乘法运算题
2016/02/27 Python
TensorFlow实现模型评估
2018/09/07 Python
Python解析json代码实例解析
2019/11/25 Python
Django CSRF认证的几种解决方案
2020/03/03 Python
动态设置django的model field的默认值操作步骤
2020/03/30 Python
澳大利亚婴儿喂养品牌:Cherub Baby
2018/11/01 全球购物
澳大利亚最受欢迎的美发用品目的地:AMR
2019/08/28 全球购物
俄罗斯EPL钻石珠宝店:ЭПЛ
2019/10/22 全球购物
Juice Beauty官网:有机美容产品,护肤与化妆品
2020/06/13 全球购物
会计系中文个人求职信
2013/12/24 职场文书
小露珠教学反思
2014/04/30 职场文书
服装发布会策划方案
2014/05/22 职场文书
节能环保口号
2014/06/12 职场文书
2014广电局实施党的群众路线教育实践活动方案思想汇报
2014/09/22 职场文书
基层干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2014年幼儿园安全工作总结
2014/11/10 职场文书
二手车交易协议书标准版
2014/11/16 职场文书
opencv 分类白天与夜景视频的方法
2021/06/05 Python
Python多线程 Queue 模块常见用法
2021/07/04 Python
python 闭包函数详细介绍
2022/04/19 Python