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

网络编程 2024/11/9 佚名

3 2 1

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

1. 蓝色风格导航菜单

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-dropdown-blue-style-nav-menu-codes/

具体代码如下：

<!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. 桔黄色风格导航菜单

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-dropdown-orange-style-nav-menu-codes/

具体代码如下：

<!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,二级导航菜单

标签：

dropdown.js,二级导航菜单

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

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

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

暂无“基于dropdown.js实现的两款美观大气的二级导航菜单”评论...

www.imxmx.com 杰晶网络

8,675无损音乐

1,324高清电影

213破解软件

120,141站长资源

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

dropdown.js,二级导航菜单

JavaScript学习小结(一)——JavaScript入门基础

JavaScript对象学习小结

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

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新动态

友情链接

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

dropdown.js,二级导航菜单

JavaScript学习小结(一)——JavaScript入门基础

JavaScript对象学习小结

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

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新动态

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存