可搜索导航页面 – 有爱前端

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>前端页面预览</title> <style type="text/css"> .f-dn { display: none; } body { background: #030d12; color: #fff; padding: 0; margin: 0; } .menu-wrap { position: absolute; left: 50px; top: 0; padding: 0 10px; } h2 { cursor: pointer; } .switch input { top: 0; right: 0; bottom: 0; left: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0; z-index: 100; position: absolute; width: 100%; height: 100%; cursor: pointer; } .switch { width: 180px; height: 55px; position: relative; margin: 40px auto 10px; } .switch label { display: block; width: 80%; height: 100%; position: relative; background: #1F2736; /*#121823*/ background: linear-gradient(#899fca, #253452); border-radius: 30px 30px 30px 30px; box-shadow: inset 0 3px 8px 1px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.2); -webkit-transition: all .5s ease; transition: all .5s ease; } .switch input~label i { display: block; height: 51px; width: 51px; position: absolute; left: 2px; top: 2px; z-index: 2; border-radius: inherit; background: #283446; background: linear-gradient(#03a9f4, #0f4d7d); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 8px rgba(0, 0, 0, 0.3), 0 12px 12px rgba(0, 0, 0, 0.4); -webkit-transition: all .5s ease; transition: all .5s ease; } .switch label+span { content: ""; display: inline-block; position: absolute; right: 0px; top: 17px; width: 18px; height: 18px; border-radius: 10px; background: #283446; background: gradient-gradient(#36455b, #283446); box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 10px rgba(185, 231, 253, 0), inset 0 0 8px rgba(0, 0, 0, 0.9), inset 0 -2px 5px rgba(0, 0, 0, 0.3), inset 0 -5px 5px rgba(0, 0, 0, 0.5); -webkit-transition: all .5s ease; transition: all .5s ease; z-index: 2; } /* Toggle */ .switch input:checked~label+span { content: ""; display: inline-block; position: absolute; width: 18px; height: 18px; border-radius: 10px; -webkit-transition: all .5s ease; transition: all .5s ease; z-index: 2; background: #b9f3fe; background: gradient-gradient(#ffffff, #77a1b9); box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 10px rgba(100, 231, 253, 1), inset 0 0 8px rgba( 61, 157, 247, 0.8), inset 0 -2px 5px rgba(185, 231, 253, 0.3), inset 0 -3px 8px rgba(185, 231, 253, 0.5); } .switch input:checked~label i { left: auto; left: 63%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 8px rgba(0, 0, 0, 0.3), 0 8px 8px rgba(0, 0, 0, 0.3), inset -1px 0 1px #b9f3fe; -webkit-transition: all .5s ease; transition: all .5s ease; } .version { margin-left: 25px; display: none; } .project.open .version { display: inherit; } .version li { margin-bottom: 10px; } .version a { text-decoration: none; color: #FFF842; } .version .tip { margin-left: 15px; } .version ul { display: none; } .version.open ul { display: inherit; } .search { width: 600px; position: absolute; right: 45px; top: 200px; } /** * Simplecomplete */ .autocompleter { width: 100%; max-height: 515px; overflow-y: auto; background: rgba(0, 0, 0, .8); position: absolute; top: 60px; left: 0; z-index: 100; } .autocompleter, .autocompleter-hint { position: absolute; } .autocompleter-list { box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 0.1); list-style: none; margin: 0; padding: 0; text-align: left; -webkit-box-sizing: border-box; box-sizing: border-box; } .autocompleter-list a { color: #f1e6e6; text-decoration: none; display: block; } .autocompleter-item-selected { background: #ffffff; } .autocompleter-item { padding: 6px 12px; color: #444444; font-size: 20px; cursor: pointer; } .autocompleter-item:hover { background: #222e4a; } .autocompleter-item strong { /*background: #f9de8f;*/ font-weight: normal; color: #dce03f; /*text-shadow: 0 1px 0 #ffffff;*/ } .autocompleter-item span { color: #bbbbbb; } .autocompleter-hint { color: #ccc; text-align: left; top: -56px; font-weight: 400; left: 0; width: 100%; padding: 12px 12px 12px 13px; font-size: 24px; display: none; } .autocompleter-hint span { color: transparent; } .autocompleter-hint-show { display: block; } .autocompleter-closed { display: none; } /** * Custom */ p.caption { color: #ccc; font-size: 16px; } .button { margin: 20px auto; display: inline-block; padding: 16px 40px; background: #70b3eb; text-decoration: none; font-size: 30px; color: #ffffff; text-shadow: 0px -1px 1px rgba(26, 62, 103, 0.42); box-shadow: inset 0 0 0 1px #70b3eb, inset 0 1px 0 1px rgba(255, 255, 255, 0.5); border-radius: 5px; -webkit-transition: 0.2s ease -webkit-transform; -moz-transition: 0.2s ease -moz-transform; transition: 0.2s ease transform; } .button:hover { -webkit-transform: translateY(-3px); -moz-transform: translateY(-3px); transform: translateY(-3px); } .field { position: relative; } .field input { width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; color: #000000; height: 60px; font-size: 24px; padding: 0 12px; border: 0; } .field input:focus { outline: 0; } .icon { cursor: pointer; position: absolute; right: 0; top: 0; width: 60px; height: 60px; background-image: url('http://www.17sucai.com/preview/169662/2017-02-09/jquery%E7%B1%BB%E4%BC%BC%E7%99%BE%E5%BA%A6%E6%90%9C%E7%B4%A2%E8%87%AA%E5%8A%A8%E5%AE%8C%E6%88%90%E6%8F%92%E4%BB%B6autocompleter/img/icon.png'); background-color: #ffffff; } </style> </head>  <body> <div class="video-wrap"> <video autoplay="autoplay" loop="true" preload="auto" style="" class="video-bg"> <source src="http://dota2.dl.wanmei.com/dota2/media/keyart_hq_842.mp4" type="video/mp4"> <source src="http://dota2.dl.wanmei.com/dota2/media/keyart_hq_842.webm" type="video/webm"> </video> <div class="video-top-bg"></div> </div> <section class="menu-wrap"> <h1> 车展前端页面预览</h1> <div class="explain">这个版本将不引入弃用页面</div> <div class="switch"> <input type="checkbox" name="toggle"> <label for="toggle"><i></i></label> <span></span> </div> <div class="project"> <h2>车展</h2> <div class="version"> <h2>车展第一版(pc)</h2> <ul> <li> <a href="/show/province.shtml" target="_blank">9.1车展(pc) </a> </li> </ul> </div> </div> <div class="project"> <h2>优惠</h2> <div class="version"> <h2>优惠PC第一版</h2> <ul> <li> <a href="/youhui/index.shtml" target="_blank">汽车优惠首页</a><span class="tip">已完成</span></li> </ul> </div> <div class="version"> <h2>优惠移动端第一版</h2> <ul> <li> <a href="/youhui/youhui-mobile/index.shtml" target="_blank">优惠移动端首页 </a><span class="tip">已完成</span></li> </ul> </div> </div> <div class="project"> <h2>团购</h2> <div class="version"> <h2>团购第一版(pc)</h2> <ul> <li> <a href="/group-v2/index.shtml" target="_blank">团购首页(pc) </a><span class="tip">已完成</span></li> <li> <a href="/group-v2/city.shtml" target="_blank">2城市汽车团购(pc)</a> </li> </ul> </div> <div class="version"> <h2>团购第一版(移动端)</h2> <ul> <li> <a href="/group-m2/index.shtml" target="_blank">首页(移动端)</a> </li> </ul> </div> </div> <div class="project"> <h2>报价</h2> <div class="version"> <h2>报价第一版(pc)</h2> <ul> <li> <a href="/quoted-price-v2/index.shtml" target="_blank">报价首页(pc) </a> </li> <li> <a href="/quoted-price-v2/city-quoted.shtml" target="_blank">2城市汽车报价(pc) </a> </li> <li> <a href="/quoted-price-v2/vendor.shtml" target="_blank">3厂商汽车报价(pc) </a> </li> <li> <a href="/quoted-price-v2/serial.shtml" target="_blank">4车系汽车报价(pc) </a> </li> </ul> </div> <div class="version"> <h2>报价第一版(移动端)</h2> <ul> <li> <a href="/quoted-price-m/index-v2.shtml" target="_blank">报价移动端首页(移动端) </a> </li> </ul> </div> </div> <div class="project"> <h2>车库</h2> <div class="version"> <h2>车库第一版(pc)</h2> <ul> <li> <a href="/auto-library/index.shtml" target="_blank">车库首页(pc)</a> </li> </ul> </div> <div class="version"> <h2>车库(移动端)</h2> <ul> <li> <a href="/auto-library-m/index.shtml" target="_blank">车库首页(移动端)</a> </li> </ul> </div> </div> <div class="project"> <h2>车模</h2> <div class="version"> <h2>车模第一版(pc)</h2> <ul> <li> <a href="/model/index.shtml" target="_blank">车模首页-V2(pc)</a> </li> </ul> </div> <div class="version"> <h2>车模第一版(移动端)</h2> <ul> <li> <a href="/model/model-mobile/index.html" target="_blank">车模移动端道页(移动端)</a> </li> </ul> </div> <div class="version"> <h2>模特移动端用户管理后台(移动端)</h2> <ul> <li> <a href="/model/model-mobile/backstage.html" target="_blank">移动端用户管理后台(移动端)</a> </li> </ul> </div> </div> <div class="project"> <h2>试驾</h2> <div class="version"> <h2>试驾第一版(pc)</h2> <ul> <li> <a href="/show/drive-site.shtml" target="_blank">试驾场地(pc) </a> </li> <li> <a href="/show/drive-site-details.shtml" target="_blank">试驾场地内页(pc) </a> </li> <li> <a href="/show/publish.shtml" target="_blank">免费发布试驾场地(pc) </a> </li> </ul> </div> </div> <div class="project"> <h2>资讯</h2> <div class="version"> <h2>资讯第一版</h2> <ul> <li> <a href="#" target="_blank">暂时包含在车库中 </a> </li> </ul> </div> </div> <div class="project"> <h2>成都车展</h2> <div class="version"> <h2>成都车展(pc)</h2> <ul> <li> <a href="/chengdu-autoshow-v4/index.shtml" target="_blank">成都车展V5(pc)</a> </li> <li> <a href="/chengdu-autoshow-v4/share.html" target="_blank">分享车展(pc) </a> </li> <li> <a href="/chengdu-autoshow-v4/zadan.html" target="_blank">砸金蛋(pc) </a> </li> </ul> </div> <div class="version"> <h2>成都车展(移动端)</h2> <ul> <li> <a href="/chengdu-autoshow-v4/cd-phone/index.shtml" target="_blank">成都车展V4移动端(移动端)</a> </li> <li> <a href="/chengdu-autoshow-v4/cd-phone/zadan-m.html" target="_blank">砸金蛋(移动端)</a> </li> </ul> </div> </div> </section>  <section class="search"> <div class="field"> <div class="icon"></div> <input type="text" name="nope" id="nope" placeholder="请输入汉字" maxlength="40" /> </div> </section> <script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="http://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> <script type="text/javascript"> var h2 = $('.project h2'); for ( var i=0;i<h2.length;i++) { h2.eq(i).attr('data-index',i) }; $('.project h2').click(function() { var dom = $(this); var index = dom.attr('data-index'); $.cookie("current", index, { path: '/'}); if(dom.nextAll('.version').length == 1) { dom.parent().toggleClass('open'); dom.next('.version').addClass('open'); dom.next('.version').find('h2').addClass('f-dn'); } else { dom.parent().toggleClass('open'); } }); $('.switch input').click(function() { if($(this).is(':checked')) { $('.project,.version').addClass('open'); } else { $('.project,.version').removeClass('open'); } }); $('.search .icon').click(function(){ $('.field input').val(''); }); if( $.cookie("current") != null ) { var index = $.cookie("current"); var _this = $('.project h2').eq(index); _this.parent().addClass("open"); if(_this.parent().hasClass('open')){ _this.parent().parent().addClass("open"); }; if(_this.nextAll('.version').length == 1){ _this.next('.version').addClass("open"); _this.next('.version').find('h2').addClass('f-dn'); } }else{ $('.project h2').removeClass('open'); }; </script> <script src="http://img.gzui.net/plug-in/autocompleter.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> /** * Crayola colors in JSON format * from: https://gist.github.com/jjdelc/1868136 */ var data = []; $('.version a').each(function() { var dom = $(this); var t = dom.text(); var u = dom.attr('href'); var v = dom.parent().parent().siblings('h2').text(); var _temp = { "label": t, "url": u, "v": v }; data.push(_temp) }); $(function() { $('#nope').autocompleter({ // marker for autocomplete matches highlightMatches: true, // object to local or url to remote search source: data, // custom template template: '<a href="{{ url }}" target="_blank">{{ label }}</a> {{ v }}', // show hint hint: true, // abort source if empty field empty: false, // max results //limit: 30, callback: function(value, index, selected) { if(selected) { window.open(selected.url, '_blank'); $('.icon').css('background-color', '#f60'); } } }); }); </script> </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 可搜索导航页面