[外掛] TinyNav.js 讓導覽列選單在手機時，變成下拉式選單

1
2

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="tinynav.min.js"></script>

1
2
3
4
5

<ul id="nav">
  <li class=“selected” ><a href="#">選單1</a></li>
  <li><a href="#">選單2</a></li>
  <li><a href="#/">選單3</a></li>
</ul>

1
2
3
4
5
6
7
8

/* styles for desktop */
.tinynav { display: none }


/* styles for mobile */
@media screen and (max-width: 600px) {
    .tinynav { display: block }
    #nav { display: none }
}

1
2
3
4
5

<script>
  $(function () {
    $("#nav").tinyNav();
  });
</script>