Explorar el Código

顶部导航搜索的改版

outaozhen hace 3 años
padre
commit
ee4495df2f
Se han modificado 4 ficheros con 410 adiciones y 5 borrados
  1. 104 1
      css/global.css
  2. BIN
      css/searchIco.png
  3. 296 0
      index5.html
  4. 10 4
      js/smartcost_socus.js

+ 104 - 1
css/global.css

@@ -2220,7 +2220,8 @@ border:none
 }
 .header-nav .nav-main {
   float:left;
-  padding:0 20px;
+  /*padding:0 20px;*/
+  padding: 0 26px;
   position:relative;
   cursor:pointer;
   z-index: 999
@@ -2257,6 +2258,108 @@ border:none
   width:16px;
   height:16px
 }
+
+.header-new-search{
+  float: left;
+  padding: 0 20px;
+  cursor: pointer;
+}
+.header-new-search:hover{
+  background-color: #F1F1F1;
+}
+.header-new-search.active{
+  background-color: #F1F1F1;
+}
+.header-new-search h2{
+  font-size: 16px;
+  line-height: 60px;
+  color: #2F2F2F;
+}
+.header-new-search .search-icon{
+  display: inline-block;
+  margin-right: 5px;
+  width:18px;
+  height:18px;
+  background:url(searchIco.png) no-repeat 0 0;
+  vertical-align: middle;
+}
+.nav-contact{
+  float: right;
+  position: relative;
+}
+.nav-contact h3{
+  font-size: 16px;
+  color: #ff6501;
+  font-weight: 600;
+  margin-top: 5px;
+}
+.nav-contact .qq-online{
+  width: 170px;
+  height: 26px;
+  background: url(qqonline.png) no-repeat;
+  cursor: pointer;
+}
+.nav-contact .qq-online:hover{
+  background: url(qqonline_hover.png) no-repeat;
+}
+.search-box{
+  width: 100%;
+  height: 80px;
+  background: #F1F1F1;
+}
+.search-box .search-bar{
+  width: 850px;
+  margin: 0 auto;
+  padding-top: 20px;
+}
+.search-box .search-bar form{
+  display: flex;
+  align-items: center;
+}
+.search-bar .search-select{
+  width: 110px;
+  height: 40px;
+  background: #FFFFFF;
+  color: rgba(0, 0, 0, 0.8);
+  font-size: 16px;
+  padding-left: 5px;
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  margin-right: 10px;
+}
+.search-input-box{
+  position: relative;
+}
+.search-input-box .search-icon{
+  position: absolute;
+  top: 12px;
+  left: 10px;
+  display: inline-block;
+  margin-right: 5px;
+  width:18px;
+  height:18px;
+  background:url(searchIco.png) no-repeat 0 0;
+  vertical-align: middle;
+}
+.search-box{
+  display: none;
+}
+.search-box .search-bar .search-input{
+  width: 650px;
+  height: 38px;
+  background: #FFFFFF;
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  margin-right: 10px;
+  padding-left: 30px;
+}
+.search-box .search-bar .search-submit{
+  width: 64px;
+  height: 40px;
+  text-align: center;
+  background: #FF6500;
+  font-size: 16px;
+  border: 1px solid #FF6500;
+}
+
 .nav-drop .nav-icon{
   float:right;
   margin-top:18px;

BIN
css/searchIco.png


+ 296 - 0
index5.html

@@ -0,0 +1,296 @@
+<!DOCTYPE html>
+<html lang=zh-cn>
+<head>
+	<meta charset=utf-8>
+	<title>SmartCost-纵横公路造价软件-公路全过程造价软件专家</title>
+	<meta name=description content=专业从事工程造价、工程信息、工程管理三大领域相关业务的管理研究和信息化技术开发。>
+	<meta name=copyright content=smartcost.com.cn>
+	<link rel=stylesheet href=css/global.css>
+	<script src=js/jquery-1.7.1.min.js></script>
+	<script src=js/smartcost_socus.js></script>
+	<link rel=stylesheet href=css/2017/style.css>
+	<script charset="utf-8" src="https://wpa.b.qq.com/cgi/wpa.php"></script>
+</head>
+<body>
+	<div class="warp-header">
+		<div class="warp-header-shell">
+			<h1 class="header-logo fL">
+				<a href="http://smartcost.com.cn"></a>
+			</h1>
+			<div class="header-nav fL">
+				<ul>
+					<li class="nav-main">
+						<h2>产品下载<span class="nav-icon icon-up"></span></h2>
+						<div class="nav-drop nav-dropdown hide">
+							<dl>
+							<dt class=""><a href="/product/24" target="_blank">公路造价</a></dt>
+							</dl>
+							<dl>
+							<dt><a href="/product/19" target="_blank">计量支付结算决算</a></dt>
+							</dl>
+							<dl>
+							<dt><a href="/product/16" target="_blank">材料调差</a></dt>
+							</dl>
+							<dl>
+							<dt><a href="/product/23" target="_blank">养护造价</a></dt>
+							</dl>
+							<dl>
+							<dt><a href="/product/20" target="_blank">固化清单</a></dt>
+							</dl>
+							<dl>
+							<dt><a href="/product/15" target="_blank">公路算量</a></dt>
+							</dl>
+							<dl>
+							<dt><a href="/product/8" target="_blank">广东公路造价(标准化2011)</a></dt>
+							</dl>
+						</div>
+					</li>
+					<li class="nav-main">
+						<h2>造价服务<span class="nav-icon icon-up"></span></h2>
+						<div class="nav-drop nav-dropdown hide">
+							<dl>
+							<dt><a href="/train" target="_blank">纵横专业培训</a></dt>
+							</dl>
+							<dl>
+							<dt><a href="http://sso.smartcost.com.cn" target="_blank">通行账号</a></dt>
+							</dl>
+							<dl>
+							<dt><a href="http://zhzdwk.com" target="_blank">文库</a></dt>
+							</dl>
+							<dl>
+							<dt><a href="http://zhzdwd.com" target="_blank">问答</a></dt>
+							</dl>
+						</div>
+					</li>
+					<li class="nav-main active">
+						<h2><a href="/contact" target="_blank">联系我们</a></h2>
+					</li>
+					<li class="nav-main">
+						<h2><a href="/news" target="_blank">新闻动态</a></h2>
+					</li>
+					<li class="nav-main">
+						<h2>支持<span class="nav-icon icon-up"></span></h2>
+						<div class="nav-drop hide">
+						<dl>
+						<dt><a href="http://help.smartcost.com.cn" target="_blank">帮助中心</a></dt>
+						</dl>
+						<dl>
+						<dt><a href="/genuine/authentication" target="_blank">真伪查询</a></dt>
+						</dl>
+						<dl>
+						<dt><a href="/aboutUs" target="_blank">走进纵横</a></dt>
+						</dl>
+						</div>
+					</li>
+					<li class="header-new-search">
+						<h2><span class="search-icon"></span>搜索</h2>
+					</li>
+				</ul>
+			</div>
+			<div class="nav-contact">
+				<h3>全国服务热线:0756-3850888</h3>
+				<div class="qq-online" id="BizQQWPA" title="企业QQ在线客服"></div>
+			</div>
+		</div>
+	</div>
+	<div class="search-box">
+		<div class="search-bar">
+			<form action="" id="NewsKind_KFORM" method="post" onsubmit="HL();return false;">
+				<select class="search-select" name="kind" id="NewsKind_K">
+					<option value="3" selected>帮助中心</option>
+					<option value="1">文章</option>
+					<option value="2">产品</option>
+				</select>
+				<div class="search-input-box">
+					<span class="search-icon"></span>
+					<input type="text" class="search-input" name="k" id="HSK" placeholder="输入搜索内容">
+				</div>
+				<input value="搜索" type="submit" onclick="HL();" class="search-submit">
+			</form>
+		</div>
+	</div>
+	<div class="warp-banner">
+			<div class="banner-shell" id="big-banner">
+				<div class="banner-entry banner-ten">
+					<div class="banner-images">
+						<h2 class="animation title-1" title="大司空市政云计价免费版软件,永久免费">大司空市政云计价免费版软件,永久免费</h2>
+						<h3 class="animation title-2" title="免费 免费 免费">免费&nbsp;&nbsp;&nbsp;&nbsp;免费&nbsp;&nbsp;&nbsp;&nbsp;免费</h3>
+						<div  class="more-button"><a href="https://yun.smartcost.com.cn/" target="_blank">点此立即登录大司空</a></div>
+						<!-- <div class="animation images-2"></div>
+						<div class="animation images-3"></div> -->
+					</div>
+				</div>
+				<!-- <div class="banner-entry banner-seven show">
+					<div class="banner-images">
+						<h2 class="animation title-1" title="纵横结算决算计量支付软件"></h2>
+						<h3 class="animation title-2" title="结算决算同步完成"></h3>
+						<div  class="more-button"><a href="http://jsjs.smartcost.com.cn/jianjie_index.html" target="_blank">查看专题</a></div>
+						<div class="animation images-2"></div>
+						<div class="animation images-3"></div>
+					</div>
+				</div> -->
+				<!-- <div class="banner-entry banner-six">
+					<div class="banner-images hover-stop">
+						<div class="animation images-1"></div>
+						<div class="animation images-2"></div>
+						<div class="animation images-3"></div>
+						<h2 class="animation title-1" title="纵横2018新定额V10.1"></h2>
+						<h3 class="animation title-2" title="新意满满"></h3>
+						<div  class="more-button"><a href="#" target="_blank">立即下载</a></div>
+					</div>
+				</div> -->
+				<div class="banner-entry banner-seven show">
+					<div class="banner-images">
+						<h2 class="animation title-1" title="纵横计量支付结算决算软件"></h2>
+						<h3 class="animation title-2" title="简单 简洁 专业"></h3>
+						<div  class="more-button"><a href="http://jsjs.smartcost.com.cn/" target="_blank">查看专题</a></div>
+						<div class="animation images-1"></div>
+						<div class="animation images-2"></div>
+						<div class="animation images-3"></div>
+					</div>
+				</div>
+				<div class="banner-entry banner-four">
+					<div class="banner-images">
+						<div class="animation images-1"></div>
+						<h2 class="animation title-1" title="纵横造价网络版,深耕造价十余年,专业、极速、永久免费"></h3>
+						<h3 class="animation title-2" title="免费下载 不限使用"></h3>
+						<div  class="more-button"><a href="http://ol.smartcost.com.cn" target="_blank">立即下载</a></div>
+					</div>
+				</div>
+				<!-- <div class="banner-entry banner-two">
+					<div class="banner-images">
+						<h2 class="animation title-1" title="纵横软件N合1,千位数大揭秘"></h2>
+						<h3 class="animation title-2" title="?980"><div class="animation title-3"></div></h3>
+						<div  class="more-button"><a href="http://o.smartcost.com.cn/shiheyi/" target="_blank">揭秘售价</a></div>
+					</div>
+				</div> -->
+
+				<div class="banner-entry banner-ten">
+					<div class="banner-images">
+						<h2 class="animation title-1" title="大司空市政云计价网络版">大司空市政云计价网络版</h2>
+						<h3 class="animation title-2" title="免费 免费 免费">免费&nbsp;&nbsp;&nbsp;&nbsp;免费&nbsp;&nbsp;&nbsp;&nbsp;免费</h3>
+						<div  class="more-button"><a href="https://yun.smartcost.com.cn/" target="_blank">点此登录</a></div>
+						<div class="animation images-1"></div>
+						<!-- <div class="animation images-3"></div> -->
+					</div>
+				</div>
+			</div>
+			<div id="banner-pointer">
+				<ul title="切换广告图">
+					<li class="focus"></li>
+					<li></li>
+					<li></li>
+					<li></li>
+				</ul>
+			</div>
+		</div>
+	<div class="warp-body">
+		<div class="warp-big-title">
+			<h1>专注造价与成本控制事业</h1>
+			<h2>珠海纵横创新软件有限公司</h2>
+		</div>
+		<div class="warp-sub-banner">
+			<div class="clearfix">
+				<a href="http://smartcost.com.cn/news/7/696/1" target="_blank" class="sub-img fL" title="免费网络版"><img src="img/sub01.jpg" width="335"></a>
+				<a href="http://smartcost.com.cn/news/7/696/1" target="_blank" class="sub-img fL" style="margin-left:27px" title="免费网络版"><img src="img/sub05.jpg" width="335"></a>
+				<a href="http://smartcost.com.cn/news/7/696/1" target="_blank" class="sub-img fR" style="margin-left:27px" title="免费网络版"><img src="img/sub03.jpg" width="335"></a>
+			</div>
+		</div>
+		<div class="warp-news clearfix">
+			<div class="news-entry fL">
+				<h3>公司新闻</h3>
+				<dl>
+					<dt>
+						<img src="img/newsimg.jpg" width="306" height="140">
+						<div class="news-title"><a href="" href="_blank">新闻标题</a></div>
+					</dt>
+					<dd><p><a href="#" href="_blank">“纵横2015年广东第七期公路工程造价管理软件...</a></p>
+						2014-04-02
+					</dd>
+					<dd><p><a href="#" href="_blank">“纵横2015年广东第七期公路工程造价管理软件...</a></p>
+						2014-04-02
+					</dd>
+					<dd><p><a href="#" href="_blank">“纵横2015年广东第七期公路工程造价管理软件...</a></p>
+						2014-04-02
+					</dd>
+					<dd><p><a href="#" href="_blank">“纵横2015年广东第七期公路工程造价管理软件...</a></p>
+						2014-04-02
+					</dd>
+					<dd><p><a href="#" href="_blank">查看更多</a></p>
+					</dd>
+				</dl>
+			</div>
+			<div class="news-entry fL" style="margin:0 40px">
+				<h3>行业新闻</h3>
+				<dl>
+					<dt>
+						<img src="img/newsimg.jpg" width="306" height="140">
+						<div class="news-title"><a href="" href="_blank">新闻标题</a></div>
+					</dt>
+					<dd><p><a href="#" href="_blank">“纵横2015年广东第七期公路工程造价管理软件...</a></p>
+						2014-04-02
+					</dd>
+					<dd><p><a href="#" href="_blank">“纵横2015年广东第七期公路工程造价管理软件...</a></p>
+						2014-04-02
+					</dd>
+					<dd><p><a href="#" href="_blank">“纵横2015年广东第七期公路工程造价管理软件...</a></p>
+						2014-04-02
+					</dd>
+					<dd><p><a href="#" href="_blank">“纵横2015年广东第七期公路工程造价管理软件...</a></p>
+						2014-04-02
+					</dd>
+					<dd><p><a href="#" href="_blank">查看更多</a></p>
+					</dd>
+				</dl>
+			</div>
+			<div class="news-entry fL">
+				<h3>职业培训</h3>
+				<ul class="train-list">
+					<li>
+						<p><span class="train-loca">广东</span></p>
+						<h4 class="clearfix"><a href="#" target="_blank">2015广东公路工程培训</a></h4>
+						<p><span class="colOrange">报名中</span>&nbsp;截止&nbsp;2015-11-1</p>
+					</li>
+					<li>
+						<p><span class="train-loca">江西</span></p>
+						<h4 class="clearfix"><a href="#" target="_blank">2015江西公路工程培训</a></h4>
+						<p><span class="colGreen">正在进行</span></p>
+					</li>
+					<li>
+						<p><span class="train-loca">甘肃</span></p>
+						<h4 class="clearfix"><a href="#" target="_blank">2015甘肃公路工程培训</a></h4>
+						<p><span class="colGray">已结束</span>&nbsp;2015-11-1</p>
+					</li>
+					<li>
+						<p><span class="train-loca">重庆</span></p>
+						<h4 class="clearfix"><a href="#" target="_blank">2015重庆公路工程培训</a></h4>
+						<p><span class="colGray">已结束</span>&nbsp;2015-11-1</p>
+					</li>
+				</ul>
+				<a class="feelTrain" href="#">造价软件应用免费培训,周周开班</a>
+			</div>
+		</div>
+	</div>
+	<div class="wrapFooter">
+		<div class="bottomNav">
+			<div class="width1020">
+			<ul class="subNav fL">
+				<li><a href="#">软件下载</a></li>
+				<li><a href="#">新闻中心</a></li>
+				<li><a href="#">走进纵横</a></li>
+				<li><a href="#">联系我们</a></li>
+				<li><a href="#">使用帮助</a></li>
+			</ul>
+			<div class="copyRight fR">
+				Copyright@珠海纵横创新软件有限公司 all rights reserved 粤ICP备14032472号
+			</div>
+		</div>
+		</div>
+	</div>
+	<script type="text/javascript">
+	    autoFlashHeight();
+	</script>
+	<script type="text/javascript">
+	    BizQQWPA.addCustom({aty: '0', a: '0', nameAccount: 800003850, selector: 'BizQQWPA'});
+	</script>
+</body>

+ 10 - 4
js/smartcost_socus.js

@@ -572,10 +572,16 @@ $(".year h3").click(function () {
     }
 );
 /*2.0搜索*/
-$(".search-icon").click(function () {
-    $(this).hide("").siblings(".search-bar").show("");
-    }
-);
+// $(".search-icon").click(function () {
+//     $(this).hide("").siblings(".search-bar").show("");
+//     }
+// );
+
+// 5.0搜索
+$(".header-new-search").click(function(){
+	$(".search-box").slideToggle();
+	$(".header-new-search").toggleClass("active")
+})
 /*2.0首页菜单*/
 $(".nav-main").click(function () {
     $(this).addClass("active").children(".nav-drop").slideDown("fast");