最新消息:

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

菜单插件 杨红伟 2017浏览 0评论

作者:杨红伟  网名:子弹兄   QQ:403236160   如发现本站有任何功能上的问题,请联系作者,谢谢!

一:序言

我们在这一节 http://www.ijquery.cn/?p=405 已经介绍了这款插件,但是在实际生活中与使用中,我们会运用到各种样式的例子,下面就使用这个插件制作一个案例。有图有真相,如图:

二:本站案例1

本站演示:http://www.ijquery.cn/demo/ddsmoothmenu/local/01

本站下载:http://www.ijquery.cn/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;}

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址