こんにちは、寒くなってきました。
副業フリーランスも、うさぎ雑貨制作も最近ちょっとサボり中のマッツォです。

久しぶりによく使うコードをメモとして残しておこうと思い久しぶりにブログを開きました。

スマートフォンのときだけ3本線のメニューが右上にでてくるアレです。

やりたいこと

  • 3本線のハンバーガーメニュー
  • 3本線の下に「menu」と言う文字もついているもの
  • クリックして開いている時は「これクリックしてるよ」とわかるようにボタン部分の色は暗くする
<div class="menu_button"><span></span><span></span><span></span>MENU</div>
<ul id="hNavi">
	<li><a href="index.html">トップ</a></li>
	<li><a href="info.html">企業情報</a></li>
	<li><a href="place.html">拠点一覧</a></li>
	<li><a href="sitemap.html">サイトマップ</a></li>
</ul>

そして下のJSは、スマホのときだけメニューがでるようにする部分です、headタグの中に書きましょう。

<script>
	if (window.matchMedia('screen and (max-width:768px)').matches) {
		//メニュー
		$(function() {
		    $("#hNavi").css("display","none");
			$(".menu_button").on("click", function() {
				$("#hNavi").slideToggle();
				$(".menu_button").toggleClass("menu_close");
			});
		});
	}
</script>

これで準備はできましたが、実際三本線にしたり、メニューに色をつけたりするのはCSSで行います。
下は例。スマホ用のCSSに書いて下さい。
色などお好きに変更してみてください。

.menu_button {
    position: absolute;
    top: 22px;
    right: 10px;
    background-color: #FA0046;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
    padding: 5px 8px;
    color: #FFF; }
    .menu_button span {
      display: block;
      background-color: #fff;
      height: 2px;
      margin-bottom: 3px; }
  .menu_close {
    background-color: #CE5E60; }
  #hNavi {
    position: absolute;
    top: 70px;
    right: 10px;
    z-index: 999;
    border: 2px solid #CE5E60;
    border-radius: 3px; }
    #hNavi a {
      background-color: #FBF7F7;
      display: block;
      padding: 10px 20px;
      color: #FA0046;
      border-bottom: 1px dotted #CE5E60;
      text-decoration: none;
      text-align: right; }
    #hNavi li:last-child a {
      border: none; }
  #hNavi:after {
    content: "";
    position: absolute;
    top: -8px;
    right: 12%;
    margin-left: -10px;
    display: block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #CE5E60 transparent;
    z-index: -1; }

※動かない場合

jQueryを読み込んでいますか?orその読みこみより前に記述していませんか?

コメントを残す

Top