手机站常用 代码

顶部导航

  <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_22130_9yw3j39lz0s.css">
<script>
      var is_m;
      if (screen && screen.width > 680) {
         is_m = false;
      } else {
         is_m = true;
      }
</script>
<div class="m_nav_btn pc_none iconfont icon-weibiaoti15"></div>
   <div class="m_nav pc_none">
      <ul>
         <li><a class="cur" href="{APP_PATH}">HOME</a></li>
         {pc:content action="category" catid="0" num="8" siteid="$siteid" return="data2"}
         {loop $data2 $r}
         <li><a href="{$r[url]}">{$r[catname]}</a>
            {if $r['child']}
            <span class="iconfont icon-plus-select-down" j="{$r['catid']}"></span>          
            <dl class="head_prol_dl{$r['catid']}">
               {pc:content action="category" catid="$r[catid]" num="8" siteid="$siteid" return="data3"}
            {loop $data3 $rr}
               <dd><a href="{$rr[url]}">{$rr[catname]}</a></dd>
               {/loop}
            {/pc}
            </dl>
            {/if}
         </li>
         {/loop}
         {/pc}
      </ul>
   </div>
   <div class="m_nav_bg pc_none"></div>

<script type="text/javascript">
      $(".m_nav_btn").click(function () {


         $(".m_nav").animate({
            right: 0
         }, 500);
         $(".m_nav_bg").animate({
            left: 0
         }, 500);




      })
      $(".m_nav_bg").click(function () {




         $(".m_nav").animate({
            right: -70 + "%"
         }, 500);
         $(".m_nav_bg").animate({
            left: -30 + "%"
         }, 500);
      })




      $(".m_nav li span").click(function () {




         var j = $(this).attr("j");
         $(".m_nav li .head_prol_dl" + j).slideToggle();
         $(this).parent().siblings().find("dl").slideUp();
      })
   </script>
 
<style>


.m_nav{display: block;70%;position: fixed;top:0;right:-70%;z-index: 999;height: 100%;background:#2d79d2;overflow: auto}
    .m_nav li{text-align: center; 100%;border-bottom:1px solid rgba(255,255,255,.2);position: relative;}
    .m_nav li a{color: #fff;line-height: 3em;font-size:16px;display: block}
    
    .m_nav li >dl{display: none;background: rgba(0,0,0,.2)}
    .m_nav li dl dd a{font-size: 14;line-height: 2em;}
    .m_nav li>.iconfont{    position: absolute;
    right: 0;
    top: 0;
    color: #fff;
    height: 48px;
    line-height: 48px;
     33px;}
    .m_nav_btn{display: block;position: absolute;right: 0;top:0;background-image: url("../images/caidan.png");background-size:100% auto; calc(0.07 * 100vw);height: calc(0.07 * 100vw);margin:calc(0.025 * 100vw) calc(0.02 * 100vw);font-size: calc(0.07 * 100vw)!important;}
    .m_nav_bg{display: block;position: fixed;left:-30%;top:0;background: rgba(0,0,0,.5);height: 100%;30%;z-index: 998;}



/*.nav_con li:hover dl{display:block;}*/
.nav_con li dl dd{position:relative;}
.nav_con li dl dd a{font-size: 12px;padding:10px}
.nav_con li dd .nav_pro_list{position:absolute;left:100%;padding:5px 0;top:0;display:none;280px;background:rgba(0,0,0,.9);}
.nav_con li dd .nav_pro_list a{padding:5px;font-size:12px;padding-bottom:5px;line-height: 24px;}





</style>

 底部导航

<div class="phonefooternav pc_none">
  <ul class="clearfix">
      <li>
          <a href="tel:" title="Tel">
              <i class="iconfont icon-tell"></i>
              <span>Phone</span>
          </a>
      </li>
      <li>
          <a href="mailto:">
              <i class="iconfont icon-email1"></i>
              <span>Email</span>
          </a>
      </li>
      <li>
          <a href="whatsapp://send?phone=" class="whatsapp-address ">
              <i class="iconfont icon-whatsapp"></i>
              <span>Whatsapp</span>
          </a>
      </li>
  </ul>
</div>
.phonefooternav {
    position: fixed;
    bottom: 0;
     100%;
    z-index: 99999;
}

.phonefooternav ul li {
     33.1298%;
    background: #494949;
    float: left;
}

.phonefooternav ul li:nth-of-type(2) {
    border-left: 1px solid #666;
    border-right: 1px solid #666;
}

.phonefooternav ul li a {
    display: block;
    color: #fff;
    text-align: center;
    padding: 14px 0;
}

.phonefooternav ul li a i {
    margin-right: 5px;
}