[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及以上版本在线购买/下载”进行购买/下载。 |