做一个主页导航

  < 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