headerrhdhttps://codepen.io/may88/pen/OmrVQg

5/22/2017 - 12:12 PM

header rhd https://codepen.io/may88/pen/OmrVQg

/* ----------------------------
* base
* -------------------------- */
html {
  //font-size: 62.5%;
  font-size: 10px;
}

$font_default: 'Roboto',"ヒラギノ角ゴ ProN",Hiragino Kaku Gothic ProN,"メイリオ",Meiryo,sans-serif;

body {
  margin: auto;
  word-wrap: break-word;
  -webkit-text-size-adjust: 100%;
  font-family: $font_default;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  @media screen and (-ms-high-contrast: active),
    (-ms-high-contrast: none) {
      //    font-family: 'sans-serif'; //support IE10 & 11
  }
}

iframe {
  width: 100%;
}

img {
  font-size: 0;
}

a {
  outline: none;

  &:link,
  &:visited,
  &:active {
    text-decoration: none;
    outline: none;
  }

  &:hover {
    outline: none;
  }
}

input, select, textarea {
  border: none;
  outline: none;
}

input[type="text"],
input[type="tel"],
input[type="email"],
select {

}

select {
  //appearance: none;
}

select::-ms-expand {
  display: none;
}

textarea {
  max-width: 100%;
}

button {
  border: none;
  background: none;
  outline: none;
  cursor: pointer;
}

.hr{
  border-top: 1px solid #858585;
}

.sp-visible{
  display: none ;
}

.pc-visible{
  display: block;
}


/* ----------------------------
* reset
* -------------------------- */
h1, h2, h3, h4, h5, h6 {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  vertical-align:baseline;
  background:transparent;
}

body {
  line-height:1;
}

p, figure, dl, dd, ol, ul, li, figure {
  margin: 0;
}

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

dl {
  padding: 0;
}

table {
  border-collapse:collapse;
  border-spacing:0;
}

input, select {
  vertical-align:middle;
  border-radius: 0;
}

img {
  vertical-align: top;
}

address {
  font-style: normal;
}


/* ----------------------------
* @media
* -------------------------- */
$BREAK_POINT_MOBILE: 768px;

@mixin mobile($break-point: $BREAK_POINT_MOBILE) {
  @media screen and (max-width: $break-point) {
    @content;
  }
}

/* ----------------------------
* visible
* -------------------------- */
@include mobile {
  body {
    min-width: 320px;
  }
  .sp-visible{
    display: block;
  }
  .pc-visible{
    display: none;
  }
}


/* ----------------------------
* calc-vw
* -------------------------- */
@function calc-vw($size, $viewport:320){
  $rate: 100 / $viewport;
  @return $rate * $size * 1vw;
}

/* ----------------------------
* color
* -------------------------- */
$c_w1: #fff;
$c_w2: #f0f0f0;
$c_w3: #c5c5c5;

$c_b1: #000;
$c_b2: #1a1a1a;
$c_b3: #333;
$c_b4: #4d4d4d;
$c_b5: #666;
$c_b6: #262626;

/* ----------------------------
* flex
* -------------------------- */
@mixin space-between {
  display: flex;
  justify-content: space-between;
}


/* ----------------------------
* opacity
* -------------------------- */
$opacity-link-hover: .6;

/* ----------------------------
* header
* -------------------------- */


.l-header{
  position: relative;
  position: fixed;
  z-index: 1000;
  height: 60px;
  background-color: $c_w1;
  width: 100%;
  top: 0;
  min-width: 1280px;
  box-shadow: 0 1px rgba(0,0,0,0.15);
  font-weight: 400;
  a{
    color: $c_b2;
  }
  @include mobile {
      min-width: inherit;
      height: 50px;

    .header-gnavi{
      display: none;
    }
  }
}


.logo-header01{
  margin: 19px 0 0 18px;
  width: 182px;
}
.logo-header02{
  margin: 10px 0 0 12px;
  width: 84px;
}
/* mobile */
@include mobile {
  .sp-logo-header01{
    width: 150px;
    margin: 17px 0 0 10px;
  }
  .sp-logo-header02{
    width: 70px;
    margin: 12px 0 0 12px;
  }
}


.header-sns{
  @include space-between;
  margin: 22px 4px 0 0;
  li{
    margin-right: 16px;
    &:hover{
      opacity: $opacity-link-hover;
    }
  }
  
  @include mobile {
      display: none;
    }
}

.left{
  float: left;
}

.center{
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
  width: 600px;
}

.right{
  float: right;
  display: flex;
}
.l-wrap-right{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  a{
    transition: .15s;
  }
}

@include mobile {
  .sp-menu{
  }
  .menu-trigger{
    position: relative;
    width: 50px;
    height: 50px;
    background-color: $c_b2;
    display: inline-block;
    float: right;
    span{
      position: absolute;
      left: 0;
      right: 0;
      top: 10px;
      margin: 0 auto;
      width: 28px;
      height: 1px;
      background-color:$c_w1 ;
      &:nth-of-type(1) {
        top: 10px;
      }
      &:nth-of-type(2) {
        top: 18px;
      }
      &:nth-of-type(3) {
        top: 26px;
      }
      //menu
      &:nth-of-type(4) {
        top: 34px;
        height: 10px;
        width: 32px;
        color: $c_w1;
        background-color: $c_b2;
        text-align: center;
        font-size: 10px
      }
      //close
      &:nth-of-type(5) {
        top: 34px;
        width: 35px;
        height: 10px;
        color: $c_w1;
        background-color: $c_b2;
        text-align: center;
      }
    }
    .menu-trigger span:nth-of-type(2) {
      top: 7px;
    }
    .menu-trigger span:nth-of-type(3) {
      bottom: 0;
    }
  }
}

.header-entry{
  background-color: $c_b2;
  font-size: 16px;
  transition: 0.4s;
  height: 60px;
  width: 160px;
  &:hover{
    opacity: $opacity-link-hover;
  }
  a{
    color: $c_w1;
    padding: 22px 56px;
    display: inline-block;
  }
}

.header-gnavi-ul{
  margin-top: 24px;
  font-size: 12px;
  a {
    position: relative;
    display: inline-block;
    text-decoration: none;

    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 1px;
      transform: scaleX(0);
      background-color: $c_b2;
      transition: all .3s ease;
    }

    &:hover {
      &::after {
        transform: scaleX(1);
      }
    }
  }
}

.gnavi-current{
  text-decoration: underline !important;
}


.header-gnavi-li{
  display: inline;
  &:not(:last-child){
    margin-right: 25px;
  }
}

/* mobile */
@include mobile {
  .sp-header-gnavi{
    position: relative;
    margin-top: 50px;
    width: 100vw;
    height: 100vh;
    background-color: $c_b2;

    a{
      color: $c_w1;
    }
  }
  .sp-gnavi-content{
    position: absolute;
    top: calc(50% - 26px);
    left: 50%;
    -webkit-transform: translate(-50%, -50%); /* Safari用 */
    transform: translate(-50%, -50%);
    font-size: 20px;
    text-align: center;
  }
  .sp-header-gnavi-li {
    &:not(:last-of-type){
      margin-bottom: 20px;
    }
  }
  .sp-header-sns {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 30px auto;
    width: 125px;
    img{
      width: 50%;
    }
    .sp-tw-li,
    .sp-line-li{
      text-align:end;
    }
  }
  .sp-header-entry{
    background-color: $c_w1;
    a{
      color:$c_b2;
      display: inline-block;
      padding: 15px 90px;
      font-style: italic;
    }
  }
}
.is-close{
  display: none;
}

/* ----------------------------
* sp-header-gnavi
* -------------------------- */
@include mobile {
  label{
    position: relative;
    z-index: 20;
  }
  .sp-header-gnavi {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    list-style: none;
  }
  input[type="checkbox"].on-off ~ .sp-header-gnavi{
    display: none;
    opacity: 0;
  }

  input[type="checkbox"].on-off:checked ~ .sp-header-gnavi{
    display: block;
    opacity: 1;
    animation-duration: 0.5s;
    animation-name: fade-in;
    -moz-animation-duration: 0.5s;
    -moz-animation-name: fade-in;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-name: fade-in;
  }
  @keyframes fade-in {
    0% {
      display: none;
      opacity: 0;
    }

    1% {
      display: block;
      opacity: 0;
    }

    100% {
      display: block;
      opacity: 1;
    }
  }
  
  
// 開閉アニメーション
  .close{
    display: none;
  }
  input[type="checkbox"].on-off:checked ~  label .close{
    display: block;
  }

  .top,
  .middle,
  .bottom{
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
  }
  
  .menu{
    display: block;
  }
  input[type="checkbox"].on-off:checked ~  label .menu{
    display: none;
  }
  input[type="checkbox"].on-off:checked ~  label .top{
    -webkit-transform: translateY(20px) rotate(-45deg);
    transform: translateY(20px) rotate(-45deg);
    top: -2px;
  }
  input[type="checkbox"].on-off:checked ~  label .middle{
    display: none;
  }
  input[type="checkbox"].on-off:checked ~  label .bottom{
    -webkit-transform: translateY(-20px) rotate(45deg);
    transform: translateY(-20px) rotate(45deg);
    top: 38px;
  }
}

/* ----------------------------
* btn
* -------------------------- */
//input要素の非表示
input[type="checkbox"].on-off{
  display: none;
}

.btn{
  width: 360px;
  height: 76px;
  border: 2px $c_b1 solid;
  margin: 50px auto 0;
  a{
    font-size: 24px;
    font-style: italic;
    display: inline-block;
    width: 360px;
    text-align: center;
    padding: 26px 0;
    color: $c_b2;
    transition: .3s;
    &:hover{
      color: $c_w1;
      background-color: $c_b6;
    }
  }
}

@include mobile{
  .btn{
    width: 240px;
    height: 50px;
    margin: 30px auto 40px;
    a{
      font-size: 14px;
      display: inline-block;
      width: 240px;
      text-align: center;
      padding:18px 0;
      color: $c_b2;
      transition: inherit;
      &:hover{
        color: inherit;
        background-color: inherit;
      }
    }
  }
}

index.html

<header class="l-header">
  <div class="l-container-header left">
    <h2 class="header-logo">
      <div class="pc-visible"><a href="#" class="js-pagetop"><img src="" alt="" class="logo-header01"></a><a href="#" class="js-pagetop"><img src="" alt="" class=""></a></div>
      <div class="sp-visible"><a href="#" class="js-pagetop"><img src="" alt="" class="sp-logo-header01"></a><a href="#" class="js-pagetop"><img src="" alt="" class="sp-logo-header02"></a></div>
    </h2>
  </div>

  <div class="l-container-header center">
    <nav class="header-gnavi">
      <ul class="header-gnavi-ul js-gnavi">
        <li class="header-gnavi-li "><a href="#n1" class="gnavi-current">TOP</a></li>
        <li class="header-gnavi-li"><a href="#n2">ENTREPRENEUR</a></li>
        <li class="header-gnavi-li"><a href="#n3">DATA SCIENTIST</a></li>
        <li class="header-gnavi-li"><a href="#n4">ENGINEER</a></li>
        <li class="header-gnavi-li"><a href="#n6">EVENT / LINK</a></li>
      </ul>
    </nav>
  </div>



  <div class="l-container-header right">
    <div class="l-wrap-right">
      <ul class="header-sns pc-visible">
        <li><a href="" target="_blank"><img src="" alt=""></a></li>


        <li><a href="" target="_blank"><img src="" alt=""></a></li>
        <li class='js-liline'><a class="js-linebutton"><img src="" alt=""></a></li>
      </ul>
      <div class="line-dummybox">
        <div class="line-it-button" style="display: none;" data-type="share-d" data-lang="ja"></div>
      </div>
      <div class="header-entry pc-visible"><a href="" class="smp-page-link">ENTRY</a></div>
    </div>
  </div>

  <!-- sp gnavi -->
  <input type="checkbox" id="input-gnavi" class="on-off" />
  <label for="input-gnavi">
    <div class="sp-menu sp-visible">
      <div class="menu-trigger" href="#">
        <span class="top"></span>
        <span class="middle"></span>
        <span class="bottom"></span>
        <span class="menu">MENU</span>
        <span class="close">CLOSE</span>
      </div>
    </div>
  </label>
  <nav class="sp-header-gnavi sp-visible">
    <div class="sp-gnavi-content">
      <ul class="sp-header-gnavi-ul js-gnavi">
        <li class="sp-header-gnavi-li"><a href="#n1">TOP</a></li>
        <li class="sp-header-gnavi-li"><a href="#n2">ENTREPRENEUR</a></li>
        <li class="sp-header-gnavi-li"><a href="#n3">DATA SCIENTIST</a></li>
        <li class="sp-header-gnavi-li"><a href="#n4">ENGINEER</a></li>
        <li class="sp-header-gnavi-li"><a href="#n5">ABOUT SELECTION</a></li>
        <li class="sp-header-gnavi-li"><a href="#n6">EVENT / LINK</a></li>
      </ul>

      <ul class="sp-header-sns">
        <li class="sp-fb-li"><a href="" target="_blank"><img src="" alt="" class="sp-fb"></a></li>
        <li class="sp-tw-li"><a href="" target="_blank"><img src="" alt="" class="sp-tw"></a></li>

        <li class="sp-line-li js-liline"><a><img src="" alt="" class="sp-line"></a></li>
        <li class="sp-line-dummybox">
          <div class="line-it-button" style="display: none;" data-type="share-d" data-lang="ja"></div>
        </li>
      </ul>


      <div class="sp-header-entry"><a href="" class="smp-page-link">ENTRY</a></div>
    </div>
  </nav>
  <!-- sp gnavi -->

</header>

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

header rhd https://codepen.io/may88/pen/OmrVQg