暴走仿微信底部菜单HTML代码

来源：互联网发布：centos安装raid驱动编辑：程序博客网时间：2024/05/21 00:16
由于搜狐快站自带的导航功能比较差，我之前直接调用暴走的JS和CSS，结果发现界面排版出问题了，于是果断从CSS和JS中抓取有用部分的代码。下面代码不是最简化，毕竟我现在CSS和JS都不算太会，有些代码是多余的，但是先贴在这里，以后慢慢改——
<!DOCTYPE html><body><style>#off-canvas-wrap,.inner-wrap,nav.tab-bar,.left-off-canvas-menu,.left-off-canvas-menu *,.right-off-canvas-menu,.move-right a.exit-off-canvas,.move-left a.exit-off-canvas{-webkit-backface-visibility:hidden}.off-canvas-wrap,.inner-wrap{position:relative;width:100%}.left-off-canvas-menu,.right-off-canvas-menu{width:250px;top:0;bottom:0;height:100%;position:absolute;overflow-y:auto;background:#333;z-index:1001;box-sizing:content-box}section.left-small,section.right-small{width:2.8125rem;height:2.8125rem;position:absolute;top:0}.off-canvas-wrap{overflow:hidden}.off-canvas-wrap,.inner-wrap,nav.tab-bar,.left-off-canvas-menu,.left-off-canvas-menu *,.right-off-canvas-menu,.move-right a.exit-off-canvas,.move-left a.exit-off-canvas{-webkit-backface-visibility:hidden}.off-canvas-wrap,.inner-wrap{position:relative;width:100%}.left-off-canvas-menu,.right-off-canvas-menu{width:250px;top:0;bottom:0;height:100%;position:absolute;overflow-y:auto;background:#333;z-index:1001;box-sizing:content-box}section.left-small,section.right-small{width:2.8125rem;height:2.8125rem;position:absolute;top:0}.off-canvas-wrap{overflow:hidden}.inner-wrap{*zoom:1;-webkit-transition:-webkit-transform 500ms ease;-moz-transition:-moz-transform 500ms ease;-ms-transition:-ms-transform 500ms ease;-o-transition:-o-transform 500ms ease;transition:transform 500ms ease}.inner-wrap:before,.inner-wrap:after{content:" ";display:table}.inner-wrap:after{clear:both}nav.tab-bar{background:#333;color:#fff;height:2.8125rem;line-height:2.8125rem;position:relative}.wechat-tab{position:fixed;left:0;bottom:0;border-top:1px solid #ddd;text-align:center;z-index:1000}.wechat-tab,.wechat-tab ul{width:100%;list-style:none;margin:0;padding:0;background-color:#fafafa}.wechat-tab li{float:left;width:33.33333%;border-left:1px solid #ddd;font:0.9em "HelveticaNeue",Helvetica,Tahoma,"Microsoft Yahei";position:relative}.wechat-tab li:first-child{border:0 none}.wechat-tab a{text-decoration:none;display:block;width:100%;padding:12px 0;color:#444}.wechat-tab .wechat-a{background-color:#fafafa;position:relative;z-index:2}.wechat-tab ul{width:96%;position:absolute;left:2%;bottom:-500%;border:1px solid #ddd;border-radius:5px;-webkit-transition:bottom .3s;-ms-transition:bottom .3s;transition:bottom .3s;z-index:1}.wechat-tab ul.weixin-tab-on{bottom:130%}.wechat-tab ul li{float:none;width:75%;margin:0 auto;border:1px solid #ddd;border-width:1px 0 0}.wechat-tab ul:after{content:"";position:absolute;left:50%;bottom:-6px;margin-left:-5px;width:10px;height:10px;background:#fafafa;border:1px solid #ddd;border-width:0 1px 1px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.</style>  <script type="text/javascript">  !(function ( document ) {    'use strict';    var $ = function ( selector, context ) {      return ( context || document ).querySelectorAll( selector )    }    window.Baoman = {}    Baoman.whichDevice = function () {      var ua = navigator.userAgent.toLowerCase();      if (/iphone|ipad|ipod/.test(ua)) {        return 'iOS';      } else if (/android/.test(ua)) {        return 'Android';      } else if (/IEMobile/.test(ua)) {        return 'wp';      } else {        return 'Desktop';      }    }    var tabs = []    function Tab( archor ) {      this.archor = archor      this.subnav = $( 'ul', archor.parentNode )[0]      this.shown = false      this.init()    }    Tab.prototype.init = function () {      var handler = this.handler.bind( this )      // this.archor.addEventListener( 'click', handler, false )      this.archor.addEventListener( 'touchstart', handler, false )      this.subnav && this.subnav.addEventListener( 'touchstart', function( e ){        e.stopPropagation()      }, false )    }    Tab.prototype.handler = function ( e ) {      e.stopPropagation()      if( this.subnav ){        e.preventDefault()        if( !this.shown ){          this.open()        } else {          this.close()        }        return false      } else return true    }    Tab.prototype.open = function () {      this.subnav.className = 'weixin-tab-on'      this.shown = true      var that = this      tabs.forEach(function(tab){        if(that !== tab && tab.shown){          tab.close()          tab.shown = false        }      })    }    Tab.prototype.close = function () {      this.subnav.className = ''      this.shown = false    }    window.addEventListener('DOMContentLoaded', function () {      var archors = $( 'a.wechat-a' )      Array.prototype.slice.call( archors ).forEach(function ( archor, i ) {        tabs[ i ] = new Tab( archor )      })      document.body.addEventListener('touchstart', function (){        tabs.forEach(function(tab){          tab.shown && tab.close()        })      }, false)    }, false)})( document )</script><script src="http://asset.baozoumanhua.com/assets/mobile-28769abe2ae3484dc4c6cb61bf524099.js" type="text/javascript"></script><!--wechat_tab starts-->  <ul class="wechat-tab">    <li><!--这里是第一个菜单-->     <a class="wechat-a" href="javascript:;">青春中北</a>     <ul>      <li>       <a id="_blank" href="http://nuc7cce.kuaizhan.com/76/40/p243955290ab2a1">学院资讯</a>     </li>     <li>      <a id="_blank" href="http://nuc7cce.kuaizhan.com/59/79/p243955290f2cff">招生就业</a>    </li>    <li>      <a id="_blank" href="http://nuc7cce.kuaizhan.com/31/92/p25746711071276">常用下载</a>    </li>    <li>     <a class="_blank" target="_self" href="http://nuc7cce.kuaizhan.com/6/92/p257438523cd328">关于七院</a>   </li>     </ul></li><li><!--这里是第二个菜单-->    <a class="wechat-a" href="javascript:;">最美七院</a>    <ul>        <li>            <a target="_blank" href="http://nuc7cce.kuaizhan.com/35/2/p257975283c48a1">微社区</a>        </li>        <li>            <a target="_blank" href="http://nuc7cce.kuaizhan.com/11/42/p258191451b6828">学生部门</a>        </li>        <li>      <a target="_blank" href="http://nuc7cce.kuaizhan.com/34/21/p257438562474bd">新媒体中心</a>    </li>  </ul></li><li><!--这里是第三个菜单-->    <a class="wechat-a" href="javascript:;">么么哒</a>    <ul>    <li>      <a target="_blank" href="http://nuc7cce.kuaizhan.com/93/57/p2576686627e58f">微信功能</a>    </li>    <li>      <a target="_blank" href="">新媒体招募</a>    </li>    <li>      <a target="_blank" href="http://nuc7cce.kuaizhan.com/65/57/p2623822084f456">合作推广</a>    </li>    <li>      <a target="_blank" href="http://m.weibo.cn/u/5316259849">关注微博</a>    </li>  </ul></li></ul></body></html>
0 0