HTML简单实现侧边导航菜单，高颜值，交互动画特效，回到顶部，查看二维码，联系客服等功能

html实现好看的多种风格导航菜单(附源码)
，导航菜单，源码下载，分为顶部导航菜单,悬浮按钮菜单,右键功能菜单,左侧导航菜单四种导航菜单。每种导航菜单有至少三种风格，总共23种风格，各种风格都有，代码上手简单，代码独立，可以直接使用，效果酷炫，总有一款你喜欢的。也可直接预览效果。

先上效果图：

话不多说，直接上代码！

以下是部分代码：

HTML部分：

<div id="right-sidebar-box">
  <ul id="rsb-ul">
      <li onclick="location.href = '/member'">
          <a href="/member">
              <i class="iconfont icon-user" style="font-size: 1rem;text-align: center;"></i>
          </a>
          <span>个人中心</span>
      </li>
      <li onclick="open_dlg(null, null, '打开微信扫一扫，添加我微信好友', null, 'fa fa-wechat')">
          <a href="javascript:;">
              <i class="iconfont icon-wechat" style="font-size: 1rem;text-align: center;"></i>
          </a>
          <span>联系客服</span>
      </li>
      <li onclick="open_dlg(null, 'https://v3.sumer.work/sumer/qrcode.html?size=10&content=' + encodeURIComponent(window.location.href), '打开手机扫一扫二维码浏览', null, 'iconfont icon-qr-code')">
          <a href="javascript:;">
              <i class="iconfont icon-qr-code" style="font-size: 1rem;text-align: center;"></i>
          </a>
          <span>手机浏览</span>
      </li>
      <li onclick="$('html, body').animate({scrollTop: 0}, 300);">
          <a href="javascript:;">
              <i class="fa fa-angle-up" style="font-size: 1.4rem;text-align: center;"></i>
          </a>
          <span>回到顶部</span>
      </li>
  </ul>
</div>

css部分：

 /* 针对手机的样式 */
@media screen and (max-width: 40rem) {
     #right-sidebar-box {
         display: none;
     }
 }
 /* 针对电脑的样式 */
 @media screen and (min-width: 40rem) {
     #right-sidebar-box {
         position: fixed;
         width: 2rem;
         right: 0;
         top: calc(50vh - 5rem);
     }
     
     #rsb-ul {
         border-radius: 10px 0 0 10px;
         background: var(--color-content-bg);
         padding: 4px 0;
     }
     #rsb-ul li {
         position: relative;
         display: flex;
         justify-content: center;
         align-items: center;
         height: 2rem;
     }
     
     #rsb-ul li a {
         position: absolute;
         color: #888;
         z-index: 9;
         transition: all 0.3s ease-in-out;
     }
     #rsb-ul li span {
         position: absolute;
         transform: translateX(100%);
         width: 6.6rem;
         height: 1.8rem;
         color: #fff;
         border-radius: 1rem 0 0 1rem;
         padding: 0 0.9rem;
         padding-top: 2px;
         display: flex;
         justify-content: left;
         align-items: center;
         z-index: 3;
         transition: transform 0.3s ease-in-out;
         cursor:url(/asset/cursor/hand1.cur), auto !important;
     }
     #rsb-ul li:hover a {
         color: #fff;
     }
     #rsb-ul li:hover span {
         transform: translateX(calc(-2rem + 10px));
         background-color: var(--color-primary);
     }
 }