用于下拉菜单制作的JQuery插件ddsmoothmenu.js

简介

ddsmoothmenu.js是一个很简单就能实现水平与垂直横向展开两种不同效果的jquery导航菜单插件，，通过ul,li标签的循环展示各级导航菜单栏目，对有子导航的栏目自动添加上箭头图标。

参数说明：

注意：您下载的这个插件在本例中已经修改过。但主要功能都是没有变的，只是修改了一些参数而已！

（下载的附件中附有DEMO）

使用

1.  引入 jquery.js 和 ddsmoothmenu.js 文件

2.  HTML

<!--menu start-->
<div class="navbox">
  <div class="nav" style="" id="smoothmenu1">
    <ul class="clearfix">
      <li><a  class="selected" href="#"><span>网站首页</span></a></li>
      <li>
        <a href="#" target="_blank"><span>公司概况</span></a>
        <ul class="submenu">
          <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><a href='#' target="_blank">企业文化</a></li>
          <li><a href='#' target="_blank">联系我们</a></li>
        </ul>
      </li>
      <li>
        <a href="#" target="_blank"><span>新闻资讯</span></a>
        <ul class="submenu">
          <li><a href='#' target="_blank">公司动态</a></li>
          <li><a href='#' target="_blank">行业动态</a></li>
          <li><a href='#' target="_blank">通知公告</a></li>
        </ul>
      </li>
      <li>
        <a href="#" target="_blank"><span>监理业绩</span></a>
         <ul class="submenu">
           <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><a href='#' target="_blank">工程图片展示</a></li>
         </ul>
       </li>
       <li>
         <a href="#" target="_blank"><span>在监工程</span></a>
         <ul class="submenu">
           <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>
       </li>
       <li>
         <a href="#" target="_blank"><span>人力资源</span></a>
         <ul class="submenu">
           <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>
       </li>
       <li>
         <a href="#" target="_blank"><span>监理指南</span></a>
         <ul class="submenu">
           <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>
       </li>
       <li><a href="#" target="_blank"><span>企业荣誉</span></a></li>
       <li><a href="#" target="_blank"><span>公司简报</span></a></li>
       <li>
         <a href="#" target="_blank"><span>政策法规</span></a>
         <ul class="submenu">
           <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><a href='#' target="_blank">部委规章</a></li>
         </ul>
       </li>
     </ul>
   </div>
 </div>
 <!--menu end-->

[CSS]
/* navbox */
.navbox,.nav li,.nav li.current a,.nav li.selected a span,.nav li a.selected,.nav li a.selected span{background:#282b60;}
.navbox{height:40px;z-index:9;width:100%;margin:0 auto;}
.nav{width:990px;margin:0 auto;text-align:center;}
.nav li{float:left;height:40px;position:relative;}
.nav li a{float:left;display:block;height:40px;line-height:40px;overflow:hidden;}
.nav li a span{float:left;display:block;line-height:40px;font-size:14px;color:#fff;font-weight:bold;cursor:pointer;width:99px;text-align:center;}
.nav li a:link span,.nav li a:visited span{color:#FFFFFF;text-decoration:none;}
.nav li a:hover span{background:url(../images/menuhover.jpg);width:99px;height:40px;display:block;color:#282b60;}
.nav li.selected .submenu{display:block;}
.nav li .submenu{display:none;position:absolute;top:0;left:0;}
.nav li .submenu{border-style:solid;border-width:0px 1px 1px 1px;border-color:#282b60;padding:5px 2px 5px 2px;width:90px;background:#fff;}
.nav li .submenu{-moz-border-radius:0 0 1px 1px;-webkit-border-radius:0 0 1px 1px;border-radius:0 0 1px 1px;-moz-box-shadow:0 1px 1px #D3D3D3;-webkit-box-shadow:0 1px 1px #D3D3D3;box-shadow:0 1px 1px #D3D3D3;}
.nav li .submenu li{float:none;padding:0;background:none;height:auto;border-bottom:dotted 1px #BEBEBE;}
.nav li .submenu li.last{border:none;}
.nav li .submenu li a{float:none;padding:0;text-align:center;height:28px;line-height:28px;background:none;}
.nav li .submenu li a:hover{background:#282b60;font-weight:800;color:#FFFFFF;}

3.  调用

<script language="javascript" type="text/javascript">
  ddsmoothmenu.init({mainmenuid: "smoothmenu1", orientation: 'h', classname: 'nav'});
</script>

相关链接

官方文档 ：http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm

GitHub 地址 ：https://github.com/dynamicdriverepo/ddsmoothmenu