[2017年9月30日更新内容]
修复版块文章数统计不正确的bug
[2017年3月15日更新内容]
1.修复会员数及帖数显示错误的bug
2.添加搜索和智能返回按钮
参考QQ部落设计。
截图:


以下导航代码复制粘贴在后台 - 模板 - 白色简约 - 导航HTML处,链接、图标及文字自行更改。
导航默认样式:
<div class="pk-row"> <div class="pk-w-sm-3" style="border-right:solid 1px #EFEFEF;"> <a href="#"><span class="fa fa-list"></span><br>导航</a> </div> <div class="pk-w-sm-3" style="border-right:solid 1px #EFEFEF;"> <a href="#"><span class="fa fa-delicious"></span><br>导航</a> </div> <div class="pk-w-sm-3" style="border-right:solid 1px #EFEFEF;"> <a href="#"><span class="fa fa-download"></span><br>导航</a> </div> <div class="pk-w-sm-3"> <a href="#"><span class="fa fa-shopping-cart"></span><br>导航</a> </div> </div>
手机可滑动的多导航样式:
<script src="http://m.hadsky.com/template/puyuetian_baisejianyue/js/swipe.min.js"></script>
<style>
.swipe {
overflow: hidden;
visibility: hidden;
position: relative;
}
.swipe>div:nth-of-type(2) {
padding: 10px 0 5px;
}
.swipe>div:nth-of-type(2)>span {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
border: solid 1px #777;
margin-right: 4px;
}
.swipe-wrap {
overflow: hidden;
position: relative;
}
.swipe-wrap>div {
float: left;
width: 100%;
position: relative;
}
.swipe-wrap>div>div>div {
padding-top: 15px;
text-align: center;
}
.swipe-wrap>div>div>div>a {
display: block;
margin: 0 auto;
width: 56px;
}
.swipe-wrap>div>div>div>a>span:nth-of-type(1) {
float: left;
border-radius: 50%;
font-size: 28px;
background-color: #12b7f5;
color: #fff;
width: 56px;
height: 56px;
line-height: 56px;
margin-bottom: 5px;
}
.swipe-wrap>div>div>div>a>span:nth-of-type(2) {
font-size: 16px;
color: #555;
word-break: keep-all;
overflow: hidden;
}
</style>
<div id='slider' class='swipe'>
<div class='swipe-wrap'>
<div>
<div class="pk-row">
<div class="pk-w-sm-4">
<a href="#">
<span class="fa fa-fw fa-home"></span>
<span>导航</span>
</a>
</div>
<div class="pk-w-sm-4">
<a href="#">
<span class="fa fa-fw fa-list-ul"></span>
<span>导航</span>
</a>
</div>
<div class="pk-w-sm-4">
<a href="#">
<span class="fa fa-fw fa-th"></span>
<span>导航</span>
</a>
</div>
<div class="pk-w-sm-4">
<a href="#">
<span class="fa fa-fw fa-shopping-cart"></span>
<span>导航</span>
</a>
</div>
<div class="pk-w-sm-4">
<a href="#">
<span class="fa fa-fw fa-download"></span>
<span>导航</span>
</a>
</div>
<div class="pk-w-sm-4">
<a href="#">
<span class="fa fa-fw fa-plug"></span>
<span>导航</span>
</a>
</div>
</div>
</div>
<div>
<div class="pk-row">
<div class="pk-w-sm-4">
<a href="#">
<span class="fa fa-fw fa-home"></span>
<span>导航</span>
</a>
</div>
<div class="pk-w-sm-4">
<a href="#">
<span class="fa fa-fw fa-list-ul"></span>
<span>导航</span>
</a>
</div>
<div class="pk-w-sm-4">
<a href="#">
<span class="fa fa-fw fa-th"></span>
<span>导航</span>
</a>
</div>
<div class="pk-w-sm-4">
<a href="#">
<span class="fa fa-fw fa-shopping-cart"></span>
<span>导航</span>
</a>
</div>
<div class="pk-w-sm-4">
<a href="#">
<span class="fa fa-fw fa-download"></span>
<span>导航</span>
</a>
</div>
<div class="pk-w-sm-4">
<a href="#">
<span class="fa fa-fw fa-plug"></span>
<span>导航</span>
</a>
</div>
</div>
</div>
<div>
<div class="pk-row">
<div class="pk-w-sm-4">
<a href="#">
<span class="fa fa-fw fa-home"></span>
<span>导航</span>
</a>
</div>
<div class="pk-w-sm-4">
<a href="#">
<span class="fa fa-fw fa-list-ul"></span>
<span>导航</span>
</a>
</div>
<div class="pk-w-sm-4">
<a href="#">
<span class="fa fa-fw fa-th"></span>
<span>导航</span>
</a>
</div>
<div class="pk-w-sm-4">
<a href="#">
<span class="fa fa-fw fa-shopping-cart"></span>
<span>导航</span>
</a>
</div>
</div>
</div>
</div>
<div></div>
</div>
<script>
//导航链接的处理,添加定位控制参数
$('#slider .swipe-wrap>div a').each(function() {
var h2;
$(this).attr('href').indexOf('?') == -1 ? h2 = '?' : h2 = '&';
$(this).attr('href', $(this).attr('href') + h2 + 'swipe_div_index=' + $(this).parent().parent().parent().index() + '&swipe_a_index=' + $(this).parent().index());
});
//添加下面的小灰点
$('#slider .swipe-wrap>div').each(function() {
$('#slider>div:eq(1)').append('<span></span>');
});
//跳至并选中导航链接
var swipe_div_index = $_GET('swipe_div_index') || 0;
var swipe_a_index = $_GET('swipe_a_index') || -1;
if(swipe_a_index > -1) {
$('#slider .swipe-wrap>div:eq(' + swipe_div_index + ') a:eq(' + swipe_a_index + ')').css('opacity', 0.2).attr('href', 'javascript:');
}
$('#slider>div:eq(1)>span:eq(' + swipe_div_index + ')').css('background-color', '#777');
window.mySwipe = Swipe($('#slider')[0], {
startSlide: swipe_div_index,
callback: function(index, elem) {
$('#slider>div:eq(1)>span').css('background-color', '#FFF');
$('#slider>div:eq(1)>span:eq(' + index + ')').css('background-color', '#777');
}
});
</script>导航图标库:http://fontawesome.io/icons/
| 应用名称 | 白色简约(手机模板) |
| 应用目录 | HS根目录/template/puyuetian_baisejianyue |
| 应用版本 | 1.0.0 |
| 应用类型 | 模板 |
| 应用售价 | 333天豆 / 33.3元 |
| 更新时间 | 2016-09-23 |
| 适用版本 | 3.x及以上版本 |
| 免费使用 | [SVIP用户组][SVIP+用户组] |
| 专属特权 | |
| 演示地址 | http://hs.27ui.net/index.php?tn=puyuetian_baisejianyue |
| 在线下载 | HS7.0.14及以上版本在线购买/下载 |
| 郑重提示 | 该页面最下面的下载地址为HS6.x版本,HS6.x系列版本且不与HS7.x互通,如果你是2019-04-04之后使用的HS,请点击上方的“HS7.x及以上版本在线购买/下载”进行购买/下载。 |