BoxPistols
7/20/2015 - 5:19 AM

レスポンシブメニュー

レスポンシブメニュー

index.html
content_copyfile_download
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width">
  <title>レスポンシブメニュー</title>
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>

<body>
  <div id="menu-box">
    <!-- メニューエリア全体 -->
    <div id="toggle"><a href="#">メニュータイトル</a></div>
    <!-- トリガー　480以上でdisplay none -->
    <ul id="menu" class="">
      <!-- メニュー -->
      <li><a href="#">メニュー1</a></li>
      <li><a href="#">メニュー2</a></li>
      <li><a href="#">メニュー3</a></li>
      <li><a href="#">メニュー4</a></li>
      <li><a href="#">メニュー5</a></li>
      <li><a href="#">メニュー6</a></li>
      <li><a href="#">メニュー7</a></li>
      <li><a href="#">メニュー8</a></li>
    </ul>
  </div>

  <div id="cont">
    <p>コンテンツ</p>
  </div>

</body>

</html>
script.js
content_copyfile_download
$(function() {
  $("#toggle").click(function() {
    $("#menu").slideToggle();
    return false;
  });
  $(window).resize(function() {
    var win = $(window).width();
    var p = 480;
    if (win > p) {
      $("#menu").show();
    } else {
      $("#menu").hide();
    }
  });
});
style.css
content_copyfile_download
* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background: #fff;
  font: 13px sans-serif;
}

@mixin liquid{ 
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0;
  height: auto;
  background-color: #fff;
}

#menu {
 @include liquid;

     li{
      display: block;
      float: left;
      width: 12.5%;
      margin: 0;
      padding: 0;
      border: 1px solid #666;
      box-sizing: border-box;
              }
        a{
          display: block;
          padding: 12px 0 10px;
          background: #EEE;
          color: #999;
          text-align: center;
          text-decoration: none;
        }
        a:hover{
          background: #444;
        }
     }


#toggle{ 
 display: none;
}

#cont{
    @include liquid ;
    background:#eff ;
    text-align: center;
    font-size: 2em;
    color: #BBB;
    min-height:200px;
}


@media only screen and (max-width: 768px) {
    #menu li{
    width: 25%;
    border-bottom: 1px solid #444;
  }
}

@media only screen and (max-width: 480px) {
  #menu{
    display: none;
  }
  #menu li{
    width: 100%;
  }
  #toggle{
    display: block;
    position: relative;
    width: 100%;
    background: #666;
  }
  #toggle a{
    display: block;
    position: relative;
    padding: 12px 0 10px;
    border-bottom: 1px solid #444;
    color: #fff;
    text-align: center;
    text-decoration: none;
  }
  #toggle:before{
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 25px;
    height: 25px;
    margin-top: -13px;
    background: #fff;
  }
  #toggle a:before, #toggle a:after{
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 25px;
    height: 4px;
    background: #444;
  } 
  #toggle a:before{
    margin-top: -6px;
  }
  #toggle a:after{
    margin-top: 3px;
  }
}
.markdown
content_copyfile_download
  • Rendered
  • Source

レスポンシブメニュー

A Pen by schein on CodePen.

License.