导航响应

导航响应，目前导航条有相关功能，其他导航在需要响应的情景下，可使用本节的响应方式。

响应示例

示例为从0,576,768,1024,1280,1680不同的终端媒体宽值，显示不同的导航样式。

    <ul class="nav">
      <li><a href="javascript:;">栏目</a></li>
      <li class="active"><a href="javascript:;">栏目</a></li>
      <li><a href="javascript:;">栏目</a></li>
      <li><a href="javascript:;">栏目</a></li>
    </ul>

调用方法

    <script>
      $(function(){
        $("#nav-auto").auto({
          "0":{"class":"nav nav-menu"},
          "576":{"class":"nav"},
          "768":{"class":"nav nav-line"},
          "992":{"class":"nav nav-card nav-divider-line"},
          "1232":{"class":"nav nav-tabs nav-divider-line"},
          "1632":{"class":"nav nav-page nav-block"},
        });
      })
    </script>

参数说明

响应方式为通过不同的终端媒体宽的节点值，改变不同的对象属性。如"768":{"class":"nav nav-line"}：

768为当终端媒体宽大于768px时，改变对象的属性。
{"class":"nav nav-line"}为对象的class属性值改为nav nav-line。
除class外，还可以根据需要改变或添加其他的属性值，如"768":{"class":"nav nav-line","title":"导航"}