做一个主页导航

来源：互联网发布：mac重装系统无法验证编辑：程序博客网时间：2024/05/17 03:48
 <div id="app" @click='hiddenNav()'>
    <router-view></router-view>
    <upimg></upimg>

    <nav class="cd-stretchy-nav">
      <a class="cd-nav-trigger" href="javascript:void(0);" @click.stop="trigger()">
        <span aria-hidden="true"></span>
      </a>
      <ul class="cd-stretchy-nav-ul">
        <router-link to="/index"><li><span></span></li></router-link>
      <router-link to="/user/index"><li><span></span></li></router-link>
      <router-link to="/shopping/cart"><li><span></span></li></router-link>
        <a href="javascript:void(0);">
          <li @click="Qcode()"><span></span></li>
        </a>
      </ul>
      <span aria-hidden="true" class="stretchy-nav-bg"></span>
    </nav>
  </div>


 methods:{
           hiddenNav(){
        var app = document.getElementById("app");
        var stretchyNavs = document.getElementsByClassName("cd-stretchy-nav")[0];
        stretchyNavs.className = "cd-stretchy-nav"
        this.hiddenNavWay()
      },
      trigger(){
        var stretchyNavs = document.getElementsByClassName("cd-stretchy-nav")[0];
        //var time;
        if(stretchyNavs.className.indexOf("nav-is-visible")<0){
          stretchyNavs.className = "cd-stretchy-nav nav-is-visible"
          //clearTimeout(time)
          document.getElementsByClassName("cd-stretchy-nav-ul")[0].style.display = "block"
        }else{
          stretchyNavs.className = "cd-stretchy-nav"
          this.hiddenNavWay()
        }
      },
      hiddenNavWay(){
        setTimeout(function(){
          var stretchyNavs = document.getElementsByClassName("cd-stretchy-nav")[0];
          if(stretchyNavs.className.indexOf("nav-is-visible")<0){
            document.getElementsByClassName("cd-stretchy-nav-ul")[0].style.display = "none"
          }
        },200)
      },
        wxConfig:function(){

      },
      Qcode:function(){
        this.$eventhub.$emit('qrcode','index');
      }
    }

 ul,
    li {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .cd-stretchy-nav {
      position: fixed;
      z-index: 2;
      bottom: 0.42rem;
      right: .02rem;
    }
    .stretchy-nav-bg {
      position: absolute;
      z-index: 1;
      bottom: 0;
      right: 0;
      width: .4rem;
      height: .4rem;
      border-radius: .3rem;
      background: rgba(255, 0, 23, .8);
      background-color: #E8401E;
      opacity: 0.8;
      /*阴影*/
      box-shadow: 0 1px .04rem rgba(0, 0, 0, 0.2);
      -webkit-transition: height 0.15s, box-shadow 0.2s;
      transition: height 0.15s, box-shadow 0.2s;
    }
    .cd-stretchy-nav.nav-is-visible .stretchy-nav-bg {
  height: 100%;
  box-shadow: 0 .06rem .3rem rgba(0, 0, 0, 0.2);
}
.cd-nav-trigger {
  position: absolute;
  z-index: 3;
  bottom: 0;
  right: 0;
  height: .4rem;
  width: .4rem;
  border-radius: 50%;
  overflow: hidden;
  white-space: nowrap;
  color: transparent;
}
.cd-nav-trigger span, .cd-nav-trigger span::after, .cd-nav-trigger span::before {
  position: absolute;
  width: .16rem;
  height: .02rem;
  background-color: #ffffff;
}
.cd-nav-trigger span {
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  -webkit-transition: background-color 0.2s;
  transition: background-color 0.2s;
}
.cd-nav-trigger span::after, .cd-nav-trigger span::before {
  content: '';
  top: 0;
  left: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: -webkit-transform 0.1s;
  transition: transform 0.1s;
}
.cd-nav-trigger span::before {
  -webkit-transform: translateY(-.06rem);
  transform: translateY(-.06rem);
}
.cd-nav-trigger span::after {
  -webkit-transform: translateY(.06rem);
  transform: translateY(.06rem);
}
.nav-is-visible .cd-nav-trigger span {
  background-color: transparent;
}
.nav-is-visible .cd-nav-trigger span::before {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.nav-is-visible .cd-nav-trigger span::after {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.cd-stretchy-nav ul {
  position: relative;
  z-index: 2;
  padding-top: .05rem;
  padding-bottom: .35rem;
  visibility: hidden;
  display:none;
  -webkit-transition: visibility 0.3s;
  transition: visibility 0.3s;
  text-align: right;
}
.cd-stretchy-nav ul span {
  position: relative;
  display: block;
  width: .4rem;
  height: .4rem;
  line-height: .4rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.4rem;
  -webkit-transition: color 0.2s;
  transition: color 0.2s;
}
.cd-stretchy-nav ul span::after {
  content: '';
  position: absolute;
  height: .22rem;
  width: .22rem;
  left: 0;
  right: 0;
  margin: auto;
  top: 50%;
  -webkit-transform: translateY(-50%) scale(0);
  transform: translateY(-50%) scale(0);
}
.cd-stretchy-nav ul a{
  display:block;
  position:relative;
  z-index:2;
}

.cd-stretchy-nav.nav-is-visible ul {
  visibility: visible;
}
.cd-stretchy-nav.nav-is-visible ul span::after {
  -webkit-transform: translateY(-50%) scale(1);
  transform: translateY(-50%) scale(1);
  -webkit-animation: scaleIn 0.15s backwards;
  animation: scaleIn 0.15s backwards;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}
.cd-stretchy-nav.nav-is-visible ul a:first-of-type li span::after{
  -webkit-animation-delay: 0.05s;
  animation-delay: 0.05s;
  background: url(./assets/img/gift/icon_home.png) no-repeat center;
  background-size: contain;
}
.cd-stretchy-nav.nav-is-visible ul a:nth-of-type(2) li span::after{
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
  background: url(./assets/img/gift/icon_index.png) no-repeat center;
  background-size: contain;
}
.cd-stretchy-nav.nav-is-visible ul a:nth-of-type(3) li span::after{
  -webkit-animation-delay: 0.15s;
  animation-delay: 0.15s;
  background: url(./assets/img/gift/icon_car.png) no-repeat center;
  background-size: contain;
}
.cd-stretchy-nav.nav-is-visible ul a:nth-of-type(4) li span::after{
  -webkit-animation-delay: 0.15s;
  animation-delay: 0.15s;
  background: url(./assets/img/gift/icon_code.png) no-repeat center;
  background-size: contain;
}

原生JS，图的地址   http://pan.baidu.com/s/1o8p4ozS
阅读全文
0 0