首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

基于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程序设计有所帮助。

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

- Author -

企鹅

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript 屏蔽鼠标键盘的几段代码
Jan 02 Javascript
JavaScript 学习技巧
Feb 17 Javascript
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
May 22 Javascript
JavaScript中使用构造器创建对象无需new的情况说明
Mar 01 Javascript
详谈jQuery中的this和$(this)
Nov 13 Javascript
JavaScript常用脚本汇总（二）
Mar 04 Javascript
jquery超简单实现手风琴效果的方法
Jun 05 Javascript
微信小程序实现实时圆形进度条的方法示例
Feb 24 Javascript
教你用Cordova打包Vue项目的方法
Oct 17 Javascript
详解vue.js下引入百度地图jsApi的两种方法
Jul 27 Javascript
three.js 实现露珠滴落动画效果的示例代码
Mar 01 Javascript
JavaScript实现简单图片切换
Apr 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
葡萄牙购物网站(13) 挪威购物网站(7) 肯尼亚购物网站(2) 南非购物网站(8) 芬兰购物网站(10) 欧洲购物网站(15) 荷兰购物网站(99) 比利时购物网站(33) 瑞典购物网站(55) 阿根廷购物网站(9)
You might like
PHP面向对象编程快速入门
2006/12/14 PHP
PHP安全技术之 实现php基本安全
2010/09/04 PHP
完美的2个php检测字符串是否是utf-8编码函数分享
2014/07/28 PHP
php each 返回数组中当前的键值对并将数组指针向前移动一步实例
2016/11/22 PHP
Laravel 框架控制器 Controller原理与用法实例分析
2020/04/14 PHP
PHP7 参数处理机制修改
2021/03/09 PHP
一组JS创建和操作表格的函数集合
2009/05/07 Javascript
LazyLoad 延迟加载(按需加载)
2010/05/31 Javascript
jquery 通过name快速取值示例
2014/01/24 Javascript
10分钟学会写Jquery插件实例教程
2014/09/06 Javascript
原生javascript实现Tab选项卡切换功能
2015/01/12 Javascript
NodeJS Web应用监听sock文件实例
2015/02/18 NodeJs
简单介绍JavaScript的变量和数据类型
2015/06/03 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
2015/12/04 Javascript
响应式表格之固定表头的简单实现
2016/08/26 Javascript
微信小程序 网络API 上传、下载详解
2016/11/09 Javascript
详解Vue整合axios的实例代码
2017/06/21 Javascript
详解Vue2 SSR 缓存 Api 数据
2017/11/20 Javascript
js判断文件类型大小并给出提示的实现方法
2018/01/03 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
2019/06/10 Javascript
vue实现lodop打印功能的示例
2020/11/11 Javascript
[01:12:40]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第三场 1月25日
2021/03/11 DOTA
python的pdb调试命令的命令整理及实例
2017/07/12 Python
初探TensorFLow从文件读取图片的四种方式
2018/02/06 Python
python使用scrapy发送post请求的坑
2018/09/04 Python
使用python批量化音乐文件格式转换的实例
2019/01/09 Python
Python os模块常用方法和属性总结
2020/02/20 Python
python如何使用腾讯云发送短信
2020/09/17 Python
python 检测nginx服务邮件报警的脚本
2020/12/31 Python
html5开发三八女王节表白神器
2018/03/07 HTML / CSS
中学教师实习自我鉴定
2013/09/28 职场文书
酒店前台接待岗位职责
2013/12/03 职场文书
优秀员工评语
2014/02/10 职场文书
2015年党员岗位承诺书
2015/04/27 职场文书
信息技术课教学反思
2016/02/23 职场文书
创业计划书之旅游网站
2019/09/06 职场文书