scss 基本导航与响应式CSS解决方案

Posted 2021-05-18

/* ------- */

$small-nav--width: 180;
$menu-icon-size: 24;
//$menu-icon-right-margin: 100;

/* When small nav kicks in */
$breakpoint--small-nav: rem(650);


/* Hide small screen checkbox */
.nav-trigger {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}


nav[role='navigation']{

  text-align: left;

  @include breakpoint($breakpoint--small-nav){
    padding: 10px 0;
    text-align: center;
  }


 ul {

  	list-style: none;
  	margin: 0;
  	padding: 0;


  	li {

      font-size: 14px;

      @include breakpoint($breakpoint--small-nav){
        display:inline-block;
        margin: 0 15px;
        text-transform: uppercase;
        font-size: 12px;
      }
    }

  }

  a {
    color: #CCC;
    &:hover {
      color: #FFF;
    }
  }

  a[href*='shop'] {
    font-weight: bold;
    background: tint(#111, 10%);
  }




  /* ****** Small screen nav */
  /* --------------------------------------------------- */
  /* --------------------------------------------------- */




  /* base styles for menu icon */

  /* menu icon */
  label[for="nav-trigger"] {

    display: block;
    cursor:pointer;
    position: relative;

    float: right;
    z-index: 2;
    //right: -$menu-icon-right-margin + px;
    right: 0;
    width: $menu-icon-size +px;;
    height: $menu-icon-size +px;;

    @include breakpoint(max-width $breakpoint--small-nav){
    			position: absolute;
          top: -36px;;
          right: 20px;
    }


    //Hide menu icon
    @include breakpoint($breakpoint--small-nav){
      display:none;
    }


      &:before {
        font-family: "emmagreenhill";
        font-style: normal;
        font-weight: normal;
        content: '\e805';
        color:#FFF;
        font-size: $menu-icon-size +px;
        /* @include breakpoint(rem(700)){
          font-size: 34px;
        } */

        }

  }


  /* When checked/open - move menu icon */
  .nav-trigger:checked + label {
  //    right: $small-nav--width - $menu-icon-right-margin + px;
  right: $small-nav--width+20  + px;
  }


  /* --------------------------------------------------- */

      /* Styles for the small nav */
      @include breakpoint(max-width $breakpoint--small-nav){

      ul{

          position:fixed;
          background: #333;

          top:0;
          height: 100%;
          width: $small-nav--width+px;
          z-index: 3;


          @include breakpoint(max-height 320px){
            position:absolute;
            /* height 100% won't kick in with position:absolute */

             a {
              background: #333;
            }
          }





      }

        li {
          float:none;
        }

        a {
          display:block;
          padding: 20px;

        }

        a:hover {
          background: #333; /* bad name */
          color: #FFF;
        }






        .nav-trigger:checked + label[for="nav-trigger"] {
          &:before{color: #CCC;}

        }
        /* Position side nav off canvas */
        ul {
        right:-$small-nav--width+px; /* match width of nav */
        }

        /* When trigger is checked, move nav into place */
        .nav-trigger:checked ~ ul {
        right: 0;
        }

        label, ul {
          transition: all 0.2s;
          -webkit-tranistion: all 0.2s;
        }



        /* --------------------------------------------------- */
    }




    /* --------------------------------------------------- */
    /* --------------------------------------------------- */

}







  /* --------------------------------------------------- */
  /* --------------------------------------------------- */
  /* --------------------------------------------------- */
  /* --------------------------------------------------- */




/* Moving logo if side nav opens */

    header h1 {
      @include single-transition(all, .2s, ease, 0);
    }

    // set width here to be the point at which nav clashes with logo
    .nav-open header h1 {
      @include breakpoint(max-width 520px){
      opacity: 0.4;
      transform: translate(-160px,0);
        }
    }



// JS for adding class

/* $( '[for="nav-trigger"]' ).click(function() {
if($('body').hasClass('nav-open')){
  $('body').removeClass('nav-open');
} else {
  $('body').addClass('nav-open');
}

} ); */