IT辅导娱乐网| 蜘蛛地图| 所有文章|
emlog手机底部导航加样式代码分享 - IT辅导
  • 首页
  • IT技术 IT辅导资源网设计图
    • DVWA靶场
    • sqli-lab靶场
  • 源码基地
  • 软件分享 IT辅导资源网设计图
    • 辅助软件
  • emlog教程
  • 白嫖活动
  • 网络技巧 IT辅导资源网设计图
    • seo教程
  • 编程教程
  • 值得看一看 IT辅导资源网设计图
    • 值得听一听
    • 读懂世界
    • 活动线报
  • 更多功能 IT辅导资源网设计图
    • 在线投稿
    • 公告动态
    • 广告合作
    • 匿名投稿


登录后,享受更多优质服务哦
IT辅导资源网站长qq头像
欢迎回来,可爱的会员!个人中心退出登录
导航菜单
  • 首页
  • IT技术
    • DVWA靶场
    • sqli-lab靶场
  • 源码基地
  • 软件分享
    • 辅助软件
  • emlog教程
  • 白嫖活动
  • 网络技巧
    • seo教程
  • 编程教程
  • 值得看一看
    • 值得听一听
    • 读懂世界
    • 活动线报
  • 更多功能
    • 在线投稿
    • 公告动态
    • 广告合作
    • 匿名投稿
手机emlog底部导航代码分享

emlog手机底部导航加样式代码分享

2020/5/6 五年级扛把子  emlog教程

前文

 

看到很多朋友都要这个手机端底部导航索性就分享了,

必须记住,下面有2个部分需要改js css, 这些改完后需要手动清理缓存才能看到效果,有cdn就清理cdn缓存。

说用不了的就是不会搞,不会搞就站长帮忙,教程说的很详细。
更多 emlog 的教程可以看这里。

截图

底部html

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

<nav class="m-menubar">
    <ul>
		<li id="menu-item" class="menu-item"><a href="<?php echo BLOG_URL; ?>"

rel="external nofollow" ><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="/"

rel="external nofollow"  ><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["

rel="external nofollow" 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:;"

rel="external nofollow" >这里的东西自己想象</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']; ?>"

rel="external nofollow"  <?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}
}


 点赞:2  打赏  分享  海报

  • 打赏支付宝扫一扫
  • 打赏微信扫一扫
  • 打赏企鹅扫一扫
结束语
温馨提醒:如有技术问题以及资源失效请联系站长 QQ89549822 进行反馈!!!
 您阅读本文耗时: 0小时02分35秒
热度:535° 发布时间:2020年5月6日

推荐:手机emlog底部导航代码分享

标题:emlog手机底部导航加样式代码分享

链接: https://www.itfd.cn/post-522.html

版权:转载请注明来源于【IT辅导娱乐网】为原创

上一篇: emlog主题添加统计栏目代码及教程

下一篇: emlog6.0.1响应头中被禁止浏览器缓存解决办法

作者头像 作者名称 作者性别
五年级扛把子
联系作者 作者主页

热门推荐

1 emlog去水印采集插件
2 emlog百度站长平台快速收录提交插件
3 EMLOG在右下角添加不同时段出现的问候语
4 Emlog今日已更新XXX篇文章!本站共有XXX篇文章调用代码
5 emlog文章新窗口打开方法
6 Emlog程序通过代码简易防止CC攻击

评论列表

取消回复

  • 存档

    • 2020年9月(191)
    • 2020年8月(92)
    • 2020年7月(5)
    • 2020年6月(224)
    • 2020年5月(392)
    • 2020年4月(267)
    • 2020年3月(76)
    • 2019年3月(1)
    • 1970年1月(29)
  • 搜索

  • 热门文章

    • 神佑之路手游源码-附视频教程
    • 最新可用老王VPN2.22.15谷歌市场版,免费使用
    • 私藏的十个网站,不看后悔系列
    • 虚拟商品自动发货商城源码
    • 不吃苦、不奋斗,你要青春做什么?
  • 随机文章

      • 阿里云服务器试用1~12月
        • QQ群撤回安卓恶搞生成器
          • VM虚拟机中的网络配置
            • 白嫖天翼云电脑
              • 一键批量查询QQ单双向好友工具 双击复制QQ号码删除单向好友
    提示信息

    SQL语句执行错误: SELECT COUNT(*) AS total FROM emlog_twitter
    Table 'itfd.emlog_twitter' doesn't exist

    «点击返回