@ PHP

Toggle navbar:トグル ナビバー

RWD に対応したナビゲーションバーのソースコードです。

toggle_navbar.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
body {
  font: 14px/26px
    '游ゴシック', YuGothic,
    'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro',
    'メイリオ', Meiryo,
    'MS Pゴシック', Verdana, sans-serif;
  margin: 0;
  padding: 0;
  color: #bbb;
  -webkit-text-size-adjust: 100%;
}

/* layout
-------------------------.*/
header {
  background: #2f71a9;
}
header .inner {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 15px;
}
h1.projectname {
  font-size: 1.7em;
  font-weight: bold;
  margin: 0 0 20px 5px;
  padding-top: 10px;
  text-decoration: none;
  color: #a5c8e6;
}
nav {
  overflow: hidden;
  width: 100%;
  background: #428bca;
}
main {
  width: 100%;
  margin: 0 auto;
  background: #eaeaea;
}
.container {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 15px;
}
footer {
  background: #fff;
}
footer .inner {
  font-size: 1rem;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 15px;
}

/* #menu
-------------------------.*/
.global-navi {
  width: 100%;
  background: #428bca;
}
#menu {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}
#menu li {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #fff;
}
#menu li a {
  font-size: 1.0em;
  display: block;
  padding: 12px 0 10px;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background: #428bca;
}
#menu li a:hover {
  background: #357ebd;
}

/* #toggle
-------------------------.*/
#toggle {
  position: relative;
  display: block;
  width: 100%;
  background: #428bca;
}
#toggle a {
  font-size: 1.0em;
  position: relative;
  display: block;
  padding: 12px 0 10px;
  text-align: center;
  text-decoration: none;
  color: #fff;
  border-bottom: 1px solid #fff;
}
#toggle:before {
  position: absolute;
  top: 50%;
  left: 10px;
  display: block;
  width: 20px;
  height: 19px;
  margin-top: -10px;
  content: '';
  background: #fff;
}
#toggle a:before,
#toggle a:after {
  position: absolute;
  top: 50%;
  left: 10px;
  display: block;
  width: 20px;
  height: 4px;
  content: '';
  background: #428bca;
}
#toggle a:before {
  margin-top: -6px;
}
#toggle a:after {
  margin-top: 2px;
}

/* 480px or more
-------------------------.*/
@media screen and (min-width: 480px) {
  .header-inner,
  .container,
  footer-inner {}
  #menu li {
    float: left;
    width: 25%;
    border-bottom: 1px solid #fff;
  }
  #toggle {
    display: none;
  }
}

/* 768px or more
-------------------------.*/
@media screen and (min-width: 768px) {
  .header-inner,
  .container,
  footer-inner {}
  #menu {
    max-width: 960px;
  }
  #menu li {
    float: left;
    width: 25%;
    border-bottom: 1px solid #fff;
  }
  #toggle {
    display: none;
  }
}

/* 960px or more
-------------------------.*/
@media screen and (min-width: 960px) {
  #menu {
    max-width: 960px;
  }
  #menu li {
    float: left;
    width: 12.5%;
    border-bottom: none;
  }
  #toggle {
    display: none;
  }
}
</style>
</head>

<body>
<header>
  <div class="inner">
    <h1 class="projectname ">projectname</h1>
  </div>
  <nav>
    <div class="global-navi">
      <div class="menu-box">
        <div id="toggle"><a>menu</a></div>
        <ul id="menu">
          <li><a>Apple</a></li>
          <li><a>Banana</a></li>
          <li><a>Orange</a></li>
          <li><a>Cherry</a></li>
          <li><a>Guava</a></li>
          <li><a>Papaya</a></li>
          <li><a>Grape</a></li>
          <li><a>Kiwi</a></li>
        </ul>
      <!--/.menu-box--></div>
    <!--/.global-navi--></div>
  </nav>
</header>
<main>
  <div class="container">
    <p>main</p>
  </div>
</main>
<footer>
  <div class="inner">
    <small>Copyright © noID All Rights Reserved.</small>
  </div>
</footer>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function() {
  $("#toggle").click(function() {
    $("#menu").slideToggle();
    return false;
  });

  $(window).resize(function() {
    var win = $(window).width();
    var s = 480;
    if (win > s) {
      $("#menu").show();
    } else {
      $("#menu").hide();
    }
  });

});
</script>
</body>

</html>

demo