作者:杨红伟 网名:子弹兄 QQ:403236160 如发现本站有任何功能上的问题,请联系作者,谢谢!
一:序言
我们在这一节 http://www.ijquery.cn/?p=405 已经介绍了这款插件,但是在实际生活中与使用中,我们会运用到各种样式的例子,下面就使用这个插件制作一个案例。有图有真相,如图:
二:本站案例1
本站演示:http://www.ijquery.cn/study/demo/ddsmoothmenu/local/01
本站下载:http://www.ijquery.cn/study/demo/ddsmoothmenu/local/01/01.zip
注意,这个插件在本例中已经修改过,不要用上一切的插件了。但主要功能都是没有变的,只是修改了一些参数而已!
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-->
JS代码:
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/ddsmoothmenu.js"></script> <script language="javascript" type="text/javascript"> ddsmoothmenu.init({mainmenuid: "smoothmenu1", orientation: 'h', classname: 'nav'}); </script>
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;}