首页
所有分类
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代码
Dec 01 Javascript
JavaScript prototype属性深入介绍
Nov 27 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
Dec 15 Javascript
jQuery实现长文字部分显示代码
May 13 Javascript
node.js中的http.response.end方法使用说明
Dec 14 Javascript
Bootstrap中的表单验证插件bootstrapValidator使用方法整理（推荐）
Jun 21 Javascript
Javascript发送AJAX请求实例代码
Aug 21 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
Nov 15 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
Jul 06 Javascript
如何以Angular的姿势打开Font-Awesome详解
Apr 22 Javascript
微信小程序 网络通信实现详解
Jul 23 Javascript
原生js实现随机点餐效果
Dec 10 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
LW(1) 发报机(1) FM(4) 调幅(1) 电磁辐射(1) 短波(1) 电路图(1) SW(1) 天线(6) 电台(1)
You might like
PHP 日，周，月点击排行统计
2012/01/11 PHP
file_get_contents获取不到网页内容的解决方法
2013/03/07 PHP
php读取mysql中文数据出现乱码的解决方法
2013/08/16 PHP
yii实现级联下拉菜单的方法
2014/07/31 PHP
PHP中使用匿名函数操作数据库的例子
2014/11/17 PHP
PHP利用imagick生成组合缩略图
2016/02/19 PHP
用PHP将Unicode 转化为UTF-8的实现方法(推荐)
2017/02/08 PHP
PHP解耦的三重境界（浅谈服务容器）
2017/03/13 PHP
PHPStudy下如何为Apache安装SSL证书的方法步骤
2019/01/23 PHP
Yii框架多语言站点配置方法分析【中文/英文切换站点】
2020/04/07 PHP
accesskey 提交
2006/06/26 Javascript
避免 showModalDialog 弹出新窗体的原因分析
2010/05/31 Javascript
基于jquery的滚动条滚动固定div(附演示下载)
2012/10/29 Javascript
鼠标经过显示二级菜单js特效
2013/08/13 Javascript
AngularJS中的模块详解
2015/01/29 Javascript
有关json_decode乱码及NULL的问题
2015/10/13 Javascript
js实现图片无缝滚动特效
2020/03/19 Javascript
js表单验证实例讲解
2016/03/31 Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
2016/04/07 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
2017/10/15 jQuery
原生JS获取元素的位置与尺寸实现方法
2017/10/18 Javascript
vue 路由嵌套高亮问题的解决方法
2018/05/17 Javascript
小程序实现层叠卡片滑动效果
2019/08/26 Javascript
详解小程序如何动态绑定点击的执行方法
2019/11/26 Javascript
[38:41]2014 DOTA2国际邀请赛中国区预选赛 LGD VS CNB
2014/05/22 DOTA
Python对象属性自动更新操作示例
2018/06/15 Python
python开发入门——set的使用
2020/09/03 Python
Django实现随机图形验证码的示例
2020/10/15 Python
Python存储读取HDF5文件代码解析
2020/11/25 Python
详解CSS3开启硬件加速的使用和坑
2017/08/21 HTML / CSS
俄罗斯香水和化妆品购物网站：Л’Этуаль
2018/05/10 全球购物
消防战士优秀事迹材料
2014/02/13 职场文书
竞选班长自荐书范文
2014/03/09 职场文书
农业项目建议书
2014/08/25 职场文书
会计人员岗位职责
2015/02/03 职场文书
pytorch中的model.eval()和BN层的使用
2021/05/22 Python