LoginSignup
0
0

More than 3 years have passed since last update.

@resta2019

ハンバーガーメニュー + α

Last updated at Posted at 2020-02-24
filename.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hamburgerMenu</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <header>
    <div class="headerWrapper">
      <div class="headerInner">
        <h1>
          <a href="#">sample</a>
        </h1>
        <div class="navToggle for_sp">
          <span></span><span></span><span></span>
        </div>
      </div>

      <div id="globalMenuSp" class="">
        <ul id="manu" class="menu">
          <li>
            <a href="#home" target="_top" class="home">Home</a>
          </li>
          <li>
            <a href="#about" target="_top" class="about">About</a>
          </li>
          <li>
            <a href="#skills" target="_top" class="skills">Skills</a>
          </li>
          <li>
            <a href="#portfolio" target="_top" class="portfolio">Portfolio</a>
          </li>
        </ul>
      </div>
    </div>

  </header>
  <main>
    <section class="mv">
      <div class="mvWrapper">
        <img src="./img/cat01.jpg" alt="cat">
      </div>
    </section>
    <div class="sample" id="about">
      <div class="inner">
        <h2>About</h2>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde incidunt voluptate totam hic non commodi molestias vero ullam blanditiis vitae neque et minus nemo optio ex doloremque mollitia, tenetur cumque.
      </div>

    </div>
    <div class="sample" id="skills">
      <div class="inner">
        <h2>Skills</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde incidunt voluptate totam hic non commodi molestias vero ullam blanditiis vitae neque et minus nemo optio ex doloremque mollitia, tenetur cumque.
        </p>
        <ul class="cardWrapper">
          <li>
            <div class="cardImg">
              <img src="./img/cat01.jpg" alt="">
            </div>
            <div class="cardText">
              <h3>HTML / CSS</h3>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias optio provident sed iste ipsam nostrum quos animi vel architecto incidunt, doloribus delectus doloremque enim dolore placeat fuga assumenda labore qui!
              </p>
            </div>
          </li>
          <li>
            <div class="cardImg">
              <img src="./img/cat01.jpg" alt="">
            </div>
            <div class="cardText">
              <h3>jQuery / JavaScript</h3>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias optio provident sed iste ipsam nostrum quos animi vel architecto incidunt, doloribus delectus doloremque enim dolore placeat fuga assumenda labore qui!
              </p>
            </div>
          </li>
          <li>
            <div class="cardImg">
              <img src="./img/cat01.jpg" alt="">
            </div>
            <div class="cardText">
              <h3>Sass / scss</h3>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias optio provident sed iste ipsam nostrum quos animi vel architecto incidunt, doloribus delectus doloremque enim dolore placeat fuga assumenda labore qui!
              </p>
            </div>
          </li>
          <li>
            <div class="cardImg">
              <img src="./img/cat01.jpg" alt="">
            </div>
            <div class="cardText">
              <h3>Git / SourceTree</h3>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias optio provident sed iste ipsam nostrum quos animi vel architecto incidunt, doloribus delectus doloremque enim dolore placeat fuga assumenda labore qui!
              </p>
            </div>
          </li>
          <li>
            <div class="cardImg">
              <img src="./img/cat01.jpg" alt="">
            </div>
            <div class="cardText">
              <h3>Responsive</h3>
              <p>
                レスポンシブ対応可能です。
              </p>
            </div>
          </li>
          <li>
            <div class="cardImg">
              <img src="./img/cat01.jpg" alt="">
            </div>
            <div class="cardText">
              <h3>Visual Studio Code</h3>
              <p>
                ショートカット、プラグインを使い慣れています。
              </p>
            </div>
          </li>
          <li>
            <div class="cardImg">
              <img src="./img/cat01.jpg" alt="">
            </div>
            <div class="cardText">
              <h3>photoshop / Illustrator</h3>
              <p>
                WEBデザイナーが作成したPSD等をjpg,png形式に書き出す作業程度に利用可能です。
              </p>
            </div>
          </li>
        </ul>
      </div>
      </div>

    <div class="sample" id="portfolio">
      <div class="inner">
        <h2>portfolio</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde incidunt voluptate totam hic non commodi molestias vero ullam blanditiis vitae neque et minus nemo optio ex doloremque mollitia, tenetur cumque.
        </p>
        <ul class="cardWrapper">
          <li>
            <div class="cardImg">
              <img src="./img/cat01.jpg" alt="">
            </div>
            <div class="cardText">
              <h3>ToDoList Application</h3>
              <ul>
                <li>
                  利用スキル：Vue.js / firebase
                </li>
                <li>製作期間：2か月</li>
                <li>
                  特徴：ログイン機能 / 
                </li>
              </ul>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias optio provident sed iste ipsam nostrum quos animi vel architecto incidunt, doloribus delectus doloremque enim dolore placeat fuga assumenda labore qui!
              </p>
            </div>
          </li>
          <li>
            <div class="cardImg">
              <img src="./img/cat01.jpg" alt="">
            </div>
            <div class="cardText">
              <h3>ToDoList Application</h3>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias optio provident sed iste ipsam nostrum quos animi vel architecto incidunt, doloribus delectus doloremque enim dolore placeat fuga assumenda labore qui!
              </p>
            </div>
          </li>
          <li>
            <div class="cardImg">
              <img src="./img/cat01.jpg" alt="">
            </div>
            <div class="cardText">
              <h3>Corporate Site</h3>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias optio provident sed iste ipsam nostrum quos animi vel architecto incidunt, doloribus delectus doloremque enim dolore placeat fuga assumenda labore qui!
              </p>
            </div>
          </li>
          <li>
            <div class="cardImg">
              <img src="./img/cat01.jpg" alt="">
            </div>
            <div class="cardText">
              <h3>ToDoList Application</h3>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias optio provident sed iste ipsam nostrum quos animi vel architecto incidunt, doloribus delectus doloremque enim dolore placeat fuga assumenda labore qui!
              </p>
            </div>
          </li>
          <li>
            <div class="cardImg">
              <img src="./img/cat01.jpg" alt="">
            </div>
            <div class="cardText">
              <h3>ToDoList Application</h3>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias optio provident sed iste ipsam nostrum quos animi vel architecto incidunt, doloribus delectus doloremque enim dolore placeat fuga assumenda labore qui!
              </p>
            </div>
          </li>
        </ul>
      </div>

    </div>

  </main>

  <footer>
    <div class="topScroll">
      <a href="#"></a>
    </div>
    <div class="footerTop">
      <ul class="inner">
        <li>
          <a href="">aaa</a>
        </li>
        <li>
          <a href="">bbb</a>
        </li>
        <li>
          <a href="">ccc</a>
        </li>
        <li>
          <a href="">ddd</a>
        </li>
      </ul>
    </div>
    <div class="footerBottom">
      <p class="copyRight">&copy;copyRight 2020</p>
    </div>
  </footer>

  <script src="js/jquery-3.4.1.min.js"></script>
  <script src="js/module.js"></script>
</body>
</html>
style.css
@import url(./reset.css);

.for_pc {
  display: none;
}
.for_sp {
  display: block;
}

img {
  width: 100%;
}

/*ハンバーガーメニュー*/

header {
  position: fixed;
  top: 0;
  z-index: 100;
  background-color: #20b2aa;
  width: 100%;
}

.headerInner {
  padding: 2% 5%;
}

.headerInner h1 {
  text-align: center;
  width: 100%;
  font-size: 10vw;
}

.headerInner h1 a {
  color: white;
}

#globalMenuSp {
  position: fixed;
  z-index: 4;
  top: 0;
  left: -100%;
  color: #000;
  text-align: center;
  transform: translateX(0);
  transition: transform 0.4s;
  width: 100%;
  padding-top:-100px;
  opacity: 0.9;
  padding-top: 17%;
}

#globalMenuSp ul {
  background: #20b2aa;
  margin: 0 auto;
  padding: 0;
  width: 100%;
  display:inherit;
}

#globalMenuSp ul li {
  font-size: 1.1em;
  list-style-type: none;
  padding: 0;
  width: 100%;
  border-bottom: 1px solid #fff;
}

/* 最後はラインを描かない */
#globalMenuSp ul li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

#globalMenuSp ul li a {
  display: block;
  color: #fff;
  padding: 1em 0;
}

/* このクラスを、jQueryで付与・削除する */
#globalMenuSp.active {
  transform: translateX(100%);
}

/*ハンバーガー用CSS*/
.navToggle {
  display: block;
  position: fixed;    /* bodyに対しての絶対位置指定 */
  right: 13px;
  top: 12px;
  width: 42px;
  height: 40px;
  cursor: pointer;
  z-index: 101;
  text-align: center;
}

.navToggle span {
  display: block;
  position: absolute;    /* .navToggleに対して */
  width: 30px;
  /* border-bottom: solid 3px #20b2aa; */
  border-bottom: solid 3px #fff;
  -webkit-transition: .35s ease-in-out;
  -moz-transition: .35s ease-in-out;
  transition: .35s ease-in-out;
  left: 6px;
}

.navToggle span:nth-child(1) {
  top: 9px;
}

.navToggle span:nth-child(2) {
  top: 18px;
}

.navToggle span:nth-child(3) {
    top: 27px;
}

.navToggle span:nth-child(4) {
  border: none;
  color: #eee;
  font-size: 9px;
  font-weight: bold;
  top: 34px;
}

/*ハンバーガーメニュータップ後CSS*/
/* 最初のspanをマイナス45度に */
.navToggle.active span:nth-child(1) {
  top: 18px;
  left: 6px;
  border-bottom: solid 3px #eee;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/* 2番目と3番目のspanを45度に */
.navToggle.active span:nth-child(2),
.navToggle.active span:nth-child(3) {
  top: 18px;
  border-bottom: solid 3px #eee;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}

.inner {
  padding: 0 5%;
}

h2 {
  font-size: 40px;
  margin-bottom: 20px;
}

h2::before {
  content: "";
  border-right: 10px solid #20b2aa;
  margin-right: 20px;
}

.mv {
  padding-top: 20%;
}

.sample {
  padding-top: 20%;
}

.cardText ul li {
  margin: 0 0;
}

.topScroll {
  width: 70px;
  height: 70px;
  background-color: #20b2aa;
  border-radius: 50%;
  position: fixed;
  bottom: 5%;
  right: 5%;
}

.topScroll a {
  width: 100%;
  height: 100%;
  position: relative;
  display: block;
}

.topScroll a::before {
  content: "";
  border-left: 3px solid #fff;
  border-top: 3px solid #fff;
  width: 25px;
  height: 25px;

  transform: rotate(45deg);
  position: absolute;
  top: 30px;
  left: 21px;
}

.footerTop {
  padding: 2% 0;
  text-align: center;
  background-color: #20b2aa;
}



.footerTop ul li a {
  display: block;
  color: white;
  padding: 2% 0;
}

.footerTop ul li a:hover {
  background-color: aquamarine;
  transition: background-color 0.5s;
}

.footerBottom {
  padding: 5% 0;
  background: black;
  color: white;
}

.copyRight {
  display: block;
  text-align: center;
}















@media screen and (min-width: 568px) {
  .for_sp {
    display: none;
  }
  .for_pc {
    display: block;
  }

  #globalMenuSp {
    width: 100%;
    transform: translateY(0%);
    transition: none;
    left: 0;
    position: static;
    padding-top: 0;
  }

  #globalMenuSp ul {
    display: flex;
    /* width: 1080px; */
  }

  #globalMenuSp ul li {
    border-bottom: 5px solid #20b2aa;
  }

  #globalMenuSp ul li:hover {
    /* background-color: aquamarine;
    transition: background-color 0.5s; */
    border-bottom: 5px solid orange;
  }

  #globalMenuSp.active {
    transform: translateX(0);
  }

  .headerWrapper {
    display: flex;
    width: 1080px;
    margin: 0 auto;
  }

  .headerInner {
    padding: 0 0;
    /* width: 1080px; */
  }

  .headerInner h1 {
    text-align: left;
    font-size: 40px;
    margin-right: 150px;
  }

  .inner {
    width: 1080px;
    margin: 0 auto;
    padding: 0 0;
  }

  .mv {
    width: 100%;
    background-color: aliceblue;
    padding-top: 0;
  }

  .mvWrapper {
    width: 1080px;
    margin: 0 auto;
  }

  .mv img {
    max-width: 1080px;
    height: auto;
  }

  .sample {
    padding-top: 150px;
  }


  #skills {
    background-color: aliceblue;
  }

  .cardWrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .cardWrapper li {
    width: 500px;
    margin: 20px 0;

    margin-right: 80px;
  }

  .cardWrapper li:nth-child(2n) {
    margin-right: 0;
  }


  .footerTop ul {
    display: flex;
    justify-content: space-evenly;
  }

  .footerTop ul li {
    width: 100%;
  }

  .footerTop ul li a {
    display: block;
  }
}
module.js
$(function() {
  $('.navToggle').click(function() {
      $(this).toggleClass('active');
      if ($(this).hasClass('active')) {
          $('#globalMenuSp').addClass('active');
      } else {
          $('#globalMenuSp').removeClass('active');
      }        
  });
});

$('#manu a[href]').on('click', function(event) {
    $('.navToggle').trigger('click');
});

// smooth scroll
$(function(){
    // #で始まるリンクをクリックしたら実行されます
    $('a[href^="#"]').click(function() {
      // スクロールの速度
      var speed = 400; // ミリ秒で記述
      var href= $(this).attr("href");
      var target = $(href == "#" || href == "" ? 'html' : href);
      var position = target.offset().top;
      $('body,html').animate({scrollTop:position}, speed, 'swing');
      return false;
    });
  });
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0