白色简约（手机模板）

演示地址请访问演示站公告

演示站公告直达：进入

以下导航代码复制粘贴在后台 - 模板 - 白色简约 - 导航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="/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/