悬浮客服点击展开

悬浮客服点击展开

<div class="right-nav ">
            
            <div id="show" style="display:none;">

<li class="right-nav-item">
 <a type="button" onclick="locking()" alt="inquiry" title= "inquiry" >
            <i class="iconfont icon-liuyanban-05"> </i>  
        </a>
</li>
<li class="right-nav-item">
     <a onclick="return gtag_report_conversion('mailto:<?php echo email ; ?> ');"  alt="<?php echo email ; ?> " title= "<?php echo email ; ?>" >
            <i class="iconfont icon-youxiang"> </i>  
      </a>

</li>

<li class="right-nav-item">
                <a id="cwhatsapp" href="https://wa.me/+<?php echo whatsapp ; ?> &text=Hi,%20Yunda%20machine." alt="whatsapp" title="whatsapp" >
            <i class="iconfont icon-WhatsApp"> </i>   
        </a>
</li>

           </div>  
 
 <li class="right-nav-item"  >
   <a class="btn-slide" onclick ="javascript:showdiv();"   class="right-nav-item" alt="Need Help?" title= "Need Help ?">  
   <i class="iconfont icon-xunpan_kefu"> </i> <span id="Help" >Need Help ? </span>
    </a>
</li>

    </div>  
 

 <script language="javascript" type="text/javascript">

 $(document).ready(function () {
            $(".btn-slide").click(function () {
                $("#show").slideToggle();
            });
        }); 

</script>
 
 
 
 

.right-hidden-tel, .right-nav-item {
height : 70px;
border-radius : 4px;
 background-color :  #fff  ; 
 /* #215DB8 #1b63a6  */
}
.right-nav {
position : fixed;
bottom : 60px;
right : 6px;
z-index : 999;
}
.right-nav-item {
display : block;
margin-bottom : 2px;
width : 70px;
line-height : 70px;
text-align : center;
color : #73757A;
}
.right-nav-item i {
font-size : 50px;
color:#1b63a6;
}

 .right-nav-item  a  { color:black; }
 
 .right-nav-item  #Help { 
     z-index: -1;
    animation: 1s zsiqcntanim;
    -webkit-animation: 1s zsiqcntanim;
    -moz-animation: 1s zsiqcntanim;
    -o-animation: 1s zsiqcntanim;
    -ms-animation: 1s zsiqcntanim;
    transform-origin: 100% 100%;
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    transform: scaleX(1);
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -o-transform: scaleX(1);
    -ms-transform: scaleX(1);
     position: absolute; 
     right: 78px;
     width: 119.9px;
     margin: 21px 0 0 0;f
     ont-size: 14px; 
   
    overflow: visible;
/*    top: 0;*/
    bottom: 0;
    margin: auto;
  
    box-shadow: 1px 1px 10px -1px #aaa;
    border-radius: 5px;
    padding: 10px 15px;
    height: 60px;
    color: #333;
    line-height: 20px;
    background-color: #fff;
    display: flex;
    display: -ms-flexbox;
    flex-direction: column;
    justify-content: center;
    min-width: 200px;
     }

      .right-nav-item  #Help:after {
    display: inline-block;
    content: '';
    position: absolute;
    background-color: #fff;
    height: 10px;
    width: 10px;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    top: 0;
    bottom: 0;
    margin: auto;
    right: -5px;
    border-radius: 0 3px 0 0;
    box-shadow: 1px -1px 4px 0 #eee;

}