jason-webapp

网站地图

使用步骤

1. 引入

npm i --save jason-webmap

import webmap from 'jason-webmap';
import '~jason-webmap/dist/jason-webmap.css';
// or
// 推荐，可通过变量定制
import '~jason-webmap/src/style.scss';

or

<link rel="stylesheet" href="dist/jason-webmap.css">
<script src="dist/jason-webmap.umd.js"></script>

2. 在页面上写好标签（jason-map 类名不要变，其余可定制）

<aside class="jason-map">
  <div class="jason-map-content">
    <h3 class="jason-map-heading">网站导航</h3>
    <div>
      <div class="jason-map-item">
        <h4 class="jason-map-title"><a href="#">公司简介</a></h4>
        <ul class="jason-map-ilist">
          <li><a href="#">导航</a></li>
          <li><a href="#">导航</a></li>
          <li><a href="#">导航</a></li>
          <li><a href="#">导航</a></li>
          <li><a href="#">导航</a></li>
        </ul>
      </div>
      <div class="jason-map-item">
        <h4 class="jason-map-title"><a href="#">公司简介</a></h4>
        <ul class="jason-map-ilist">
          <li><a href="#">导航</a></li>
          <li><a href="#">导航</a></li>
          <li><a href="#">导航</a></li>
          <li><a href="#">导航</a></li>
          <li><a href="#">导航</a></li>
        </ul>
      </div>
    </div>
    <div class="jason-map-footer">
      <h5>版权所有</h5>
      <h5>xxxxxxx 有限公司 </h5>
      <p class="mt-xs-10">鲁ICP备 xxxxxxx 号</p>
      <p>网站设计：jason</p>
    </div>
  </div>
</aside>

3. 初始化

webmap({
  // 激活 map 的按钮选择器
  openSelector: 'a.open-map',
  // 跟随者 map 一同移动的内容选择器
  moveSelector: 'section.body'
})

scss variable

$jason-map-width: 400px !default;
$jason-map-duration: .5s !default;
$jason-map-theme: #E60012 !default;