emlog底部导航+样式代码

底部html

下方的代码扔到正在使用的模板footer.php 位置自己看着来

<nav class=\"m-menubar\">

 <ul>

 <li id=\"menu-item\" class=\"menu-item\"><a href=\"<?php echo BLOG_URL; ?>\"><i class=\"fa fa-home\"></i> 首页</a></li>

 <li id=\"menu-item\" class=\"menu-item menu-item-has-children\"><a><i class=\"fa fa-paper-plane-o\"></i> 文章分类</a>

 <ul class=\"sub-menu\">

 <?php blog_navid();?>

 </ul>

 </li>

 <li class=\"menu-item menu-item-has-children\">

 <a href=\"/\" ><i class=\"fa fa-shopping-bag\"></i>在线商城</a>

 </li>

 <li class=\"menu-item menu-item-has-children\">

 <a><i class=\"fa fa-weixin\"></i>站长微信</a>

 <div class=\"sub-menu\">

 <div class=\"menuwhact\"><img src=\"<?php echo $Tconfig[\"weixinimg\"];?>\"></div>

 <div class=\"tanc_ico\">

 <p class=\"lianxi_p\"><span class=\"fa fa-weixin\"></span><?php echo $Tconfig[\"weixinname\"];?></p>

 </div>

 </div>

 </li>

 <li class=\"menu-item menu-item-has-children\" >

 <a><i class=\"fa fa-userfa fa-user\"></i>用户中心</a>

 <div class=\"sub-menu\">

 <div class=\"m_menubar\">

 <h4>这里的东西自己想象！</h4>

 <a href=\"javascript:;\">这里的东西自己想象</a>

 </div>

 </div>

 </li> 

 </ul>

</nav>

底部php

下面代码扔到正在使用模板的module.php

<?php

//blog：底部导航

function blog_navid(){

 global $CACHE;

 global $Tconfig;

 $navi_cache = $CACHE->readCache(\'navi\');

 foreach($navi_cache as $value):

 $id=$value[\"id\"];

 if ($value[\'pid\'] != 0) {

 continue;

 }

 $newtab = $value[\'newtab\'] == \'y\' ? \'target=\"_blank\"\' : \'\';

 $value[\'url\'] = $value[\'isdefault\'] == \'y\' ? BLOG_URL . $value[\'url\'] : trim($value[\'url\'], \'/\');

 //$current_tab = BLOG_URL . trim(Dispatcher::setPath(), \'/\') == $value[\'url\'] ? \'active\' : \'\';

 ?>

 <li id=\"menu-item\" class=\">menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item\" >

 <a href=\"<?php echo $value[\'url\']; ?>\" <?php echo $newtab;?>>

 <?php if(empty($Tconfig[\'arr_navico\'][$id])) {echo $value[\'naviname\'];}else {echo \"<i class=\'\".$Tconfig[\'arr_navico\'][$id].\"\'></i> \".$value[\'naviname\'].\"\";} ?>

 <?php if (!empty($value[\'children\']) || !empty($value[\'childnavi\'])) :?>

 <?php endif;?> 

 </a>

 

 </li>

 <?php endforeach; ?>

 <?php if($Tconfig[\'more\']== 1 ){?>

 <?php echo $Tconfig[\'more_html\'];?>

 <?php }?>

<?php }?>

底部js

js扔到你的全局js文件里面// 手机端登入

// 手机端登入

$(\".m-menubar li.menu-item-has-children\").on(\"click\", function() {

 $(this).toggleClass(\"active\").siblings().removeClass(\"active\")

 });



$(\'.m-user\').on(\'click\', function(){

 jsui.bd.addClass(\'m-wel-on\')

 $(\'.m-mask\').show()

})

$(\'.m-mask\').on(\'click\', function(){

 $(this).hide()

 jsui.bd.removeClass(\'m-wel-on\')

})

$(\'.m-wel-content ul a\').on(\'click\', function(){

 $(\'.m-mask\').hide()

 jsui.bd.removeClass(\'m-wel-on\')

})



$(\'.m-icon-nav\').on(\'click\', function(){

 jsui.bd.addClass(\'m-nav-show\')



 $(\'.m-mask\').show()



 jsui.bd.removeClass(\'search-on\')

 $(\'.search-show .fa\').removeClass(\'fa-remove\') 

})



$(\'.m-mask\').on(\'click\', function(){

 $(this).hide()

 jsui.bd.removeClass(\'m-nav-show\')

})

底部css

css代码扔到你的全局css文件里面其实下面的css有多大部分是多余的代码 但是懒得删了 凑合用把

/*手机端登入*/

.minicat-btn{text-align:center;padding:15px 0;background:#f6f6f6}

.m-menubar{display:none;z-index:9990;position:fixed;bottom:0;left:0;right:0;height:55px;background-color:#fff;box-shadow:0 0 10px rgba(37,45,51,.1)}

.m-menubar:before{content:\'1\';color:transparent;position:absolute;left:0;top:0;width:100%;height:1px;background-color:rgba(0,0,0,.1);display:block;overflow:hidden;-webkit-transform-origin:50% 0;transform-origin:50% 0;-webkit-transform:scaleY(.5);transform:scaleY(.5)}

.m-menubar ul{display:flex;text-align:center;padding:0}

.m-menubar .active .sub-menu{visibility:inherit;opacity:1}

.m-menubar .sub-menu{position:fixed;top:auto;bottom:55px;left:0;right:0;margin:0;width:100%;background-color:#fff;color:#555;padding:15px;font-size:14px;font-weight:700;height:auto;box-shadow:0 -15px 15px rgba(0,0,0,.2);display:block;visibility:hidden;opacity:0;-webkit-transition:all .25s ease-in;-moz-transition:all .25s ease-in;transition:all .25s ease-in}

.m-menubar .sub-menu .menu-item{margin:1%;font-size:12px;padding:5px 15px;background-color:#f6f6f6;color:#888;font-weight:100;width:31.333%;float:left}

.m-menubar .menu-item{flex:1;text-align:center;font-size:12px}

.m-menubar .menu-item i.fa{display:block;font-size:22px;margin-bottom:3px;margin-top:8px;font-weight:400}

.menubar_header,.menubar_usermenu{padding-bottom:10px;text-align:initial;display:-webkit-flex;padding:0;width:100%;flex-wrap:wrap;margin:10px 0}

.menubar_usermenu li{display:block;width:23%;font-weight:100;margin:1%;background:#f6f6f6;padding-bottom:8px;font-size:12px}

.menubar_top{text-align:left;padding:0 0 0 60px;display:block;width:60%}

.menubar_right{text-align:right;display:block;width:40%;font-size:1px;font-weight:100}

.mendown{font-size:12px}

.menubar_down{display:inline-block;background:#ddebff;margin-left:4px;padding:0 4px;border-radius:5px;color:#5c84bf;margin-bottom:8px}

.menubar_right .btn{display:inline-block;margin-bottom:8px}

.menubar_top .avatar{-webkit-border-radius:50%;border-radius:50%;width:60px;border:2px solid #f6f9fa;padding:5px;float:left;margin-left:-65px;height:60px}

.menubar_top h4{padding-top:13px;margin:0 0 8px;font-size:15px;line-height:1;font-weight:700}

.menubar_top h5{margin:0;font-size:13px;line-height:1;color:#999}

.menuwhact{padding:10px}

.menuwhact img{width:50%}

.m-nav-show .m-navbar{left:0}

.article-meta .item-bianlan{display:none}

.m-navbar ul{padding:0}

.m-navbar li{margin-left:0;position:relative;width:100%;float:left}

.current-menu-item a{color:#4ba7fd!important}

.m-navbar .sub-menu{position:relative;padding:0 15px}

.m-navbar .sub-menu li{float:left;width:46%;margin-right:4%;margin-bottom:10px;text-align:center}

.m-navbar .fa{width:18px;display:inline-block;text-align:center}

.m-navbar li a{display:block;font-size:14px;font-weight:700;color:#4e585a;border-bottom:1px solid rgba(255,255,255,.04);padding:8px 15px}

.m-navbar li a:hover,.m-navbar li:hover>a{color:#45b6f7}

.m-navbar .sub-menu li a{font-size:12px;padding:8px 15px;background-color:#f6f9fa;color:#888;font-weight:inherit}

.m-navbar .sub-menu li a:hover{background-color:#eee}

.m-navbar li.menu-item-has-children .faa{content:\'\';position:absolute;right:15px;top:0;font-size:15px;margin:0;padding:6px 15px;z-index:2;cursor:pointer;display:block;width:auto;color:#585858}

@media(max-width:720px){.asb-post-footer{margin-bottom:20px}

.m-mask{background-color:rgba(0,0,0,.5)}

.m-wel-start{display:block;position:absolute;top:0;right:0;height:48px;padding:23px 20px 0;font-size:14px;line-height:1;-webkit-transition-duration:.6s;transition-duration:.6s;z-index:91;color:#fff;cursor:pointer}

.m-navbar-on{position:fixed;top:0;left:0;right:0;bottom:0;overflow:hidden;-webkit-transform:translateX(80%);transform:translateX(80%)}

.m-navbar-on .m-mask{opacity:1;visibility:visible}

.m-navbar-on .m-navbar-start{left:-80%;color:#4e585a}

.m-wel{display:block;position:fixed;top:0;left:100%;bottom:0;width:70%;padding:50px 0 0;z-index:90;font-size:12px;background-color:#fff}

.m-wel header{text-align:left;padding:0 30px 0 120px}

.m-wel header .avatar{-webkit-border-radius:50%;border-radius:50%;width:50px;border:1px solid #f6f9fa;padding:5px;float:left;margin-left:-65px}

.m-wel header h4{padding-top:10px;margin:0 0 8px;font-size:12px;line-height:1;font-weight:700}

.m-wel header h5{margin:0;font-size:12px;line-height:1;color:#999}

.m-wel footer{text-align:center;position:absolute;bottom:0;right:0;left:0}

.m-wel footer a{display:block;line-height:60px;color:#555;background-color:#fbfbfb}

.m-wel footer a:hover{background-color:#eceeef;color:#4e585a}

.m-wel .m-wel-content{overflow-y:auto;-webkit-overflow-scrolling:touch;position:absolute;top:130px;left:0;bottom:60px;right:0;font-size:14px;text-align:left;padding:0}

.m-wel .m-wel-content ul{margin:0;padding:0;list-style:0}

.m-wel .m-wel-content ul a{padding:10px 0 10px 65px;line-height:1.4;display:block;color:#999;-webkit-border-radius:2px;border-radius:2px}

.m-wel .m-wel-content ul a:hover{background-color:#f6f9fa;color:#4e585a}

.m-wel .m-wel-login{text-align:center;margin-top:30%}

.m-wel .m-wel-login .avatar{display:block;margin:0 auto 30px;width:50px;-webkit-border-radius:50%;border-radius:50%}

.m-wel .m-wel-login a{display:block;margin:0 60px 15px;padding:12px 15px;-webkit-border-radius:2px;border-radius:2px}

.m-wel .m-wel-login a.m-wel-login{color:#fff;background-color:#0ae}

.m-wel .m-wel-login a.m-wel-login:hover{background-color:#0098d5}

.m-wel .m-wel-login a.m-wel-register{background-color:#f6f9fa}

.m-wel .m-wel-login a.m-wel-register:hover{background-color:#eceeef}

.m-wel-on{position:fixed;top:0;left:0;right:0;bottom:0;overflow:hidden;-webkit-transform:translateX(-80%);transform:translateX(-80%);-webkit-transform:translateX(-70%);transform:translateX(-70%)}

.m-menubar{display:block}

}

感谢您的来访，获取更多精彩文章请收藏本站。