WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

遅れて付いてくるメニュー

f:id:mmmmofu:20170320013756p:plain

http://efu.sakura.ne.jp/web/menu2/

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>遅れて付いてくるメニュー</title>
  <link rel="stylesheet" href="style.css">
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <header class="header">
    <div class="headerbg"></div>
    <div class="globalNav">
      <h1>遅れて付いてくるメニュー</h1>
      <ul class="menu">
        <li class="menu__item">TOP</li>
        <li class="menu__item">ABOUT</li>
        <li class="menu__item">CONTACT</li>
      </ul>
    </div>
  </header>
  <div class="content">
    <p>スクロールしてください。</p>
  </div>
</body>
</html>
html, body, header, div, ul, li, p, h1 {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
  "Yu Gothic",
  YuGothic,
  "Hiragino Kaku Goyhic ProN",
  Meiryo,
  sans-serif;
  font-weight: 500;
  color: #000;
}

ul, li {
  list-style: none;
}

a {
  text-decoration: none;
}

.header {
  position: absolute;
  width: 240px;
  height: 100%;
  .headerbg {
    position: fixed;
    top: 0;
    left: 0;
    width: 240px;
    height: 100%;
    background: #D6FDF2;
    box-shadow: 2px 0 2px #CCC;
  }
  .globalNav {
    position: relative;
    width: 180px;
    margin: 0 auto;
    padding-top: 50px;
    h1 {
      width: 180px;
      height: 80px;
      font-size: 14px;
      line-height: 80px;
      border-bottom: 2px dotted #999;
      text-align: center;
      background: #FFF;
    }
    .menu {
      width: 180px;
      margin: 0 auto;
      background: #FFF;
      .menu__item {
        width: 180px;
        height: 50px;
        font-size: 14px;
        text-align: center;
        line-height: 50px;
        letter-spacing: 0.06em;
        border-top: 1px solid #CCC;
        &:first-child {
          border-top: none;
        }
      }
    }
  }
}

.content {
  height: 3000px;
  padding-left: 240px;
  p {
    text-align: center;
    padding: 100px 0;
  }
}
$(function(){
  var menu = $(".globalNav");
  var offset = menu.offset();
  $(window).on('scroll',function() {
      menu.stop().animate({
        marginTop: $(window).scrollTop() - offset.top
      });
  });
});