読者です 読者をやめる 読者になる 読者になる

東京の会社辞めて地方で生きるわ。

勢いで会社を辞めて縁のない地方で生きることはできるのか

シンプルなスマホナビゲーション

もうまじ時間ねえ!!!って時にお使いください。()



【html】

<p><span class="nav-button">Menu</span></p>

<nav class="nav-closed">
    <ul class="g-navi">
	    <li><a href="#">test1</a></li>
	    <li><a href="#">test2</a></li>
	    <li><a href="#">test3</a></li>
    </ul>
  </nav>

css

.nav-button {
  float: right;
  padding: 0.5rem;
  /* margin-top: .25rem; */
  cursor: pointer;
}

.nav-button:hover {
  color: #6E8C50;
}

nav {
  width: 100%;
  position: absolute;
  left: 0;
  top: 66px; /*This is the height of the header*/
  z-index: 99999;
}

.nav-closed {
  display: none;
}

ul.g-navi li{
width:100%;
text-align:center;
list-style:none;
background-color:#eee;
padding:15px 0;
margin:0;
border-top:1px solid #666;
font-size:18px;
}

ul.g-navi{
border-bottom:1px solid #666;
}


下記jsをbodyを閉めるタグの直前に。

【js】

<script>
$('.nav-button').on('click', function(){
  		$('nav').toggleClass('nav-closed');
	});
</script>


【参考URL】
http://codepen.io/nathanfoon/pen/nikCp