1.0.2 • Published 5 years ago
jason-webmap v1.0.2
jason-webapp
网站地图
使用步骤
- 引入
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>
- 在页面上写好标签(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>
- 初始化
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;