第77款插件：ddsmoothmenu.js制作下拉菜单(二)本站案例1

作者：杨红伟  网名：子弹兄   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;}