关闭边栏(ESC)打开边栏(ESC)
在不断折腾中，首页弄来弄去都不满意，干脆把首页侧边栏给取消了，底部也简化掉，没有了侧边栏要看近期评论就看不到了，只好自己折腾了这个功能，直接弹出来看好了。这是开始做时候的原稿，现在本站的有些更改，实理原理是一样的。
先上效果图：
在footer.php中加入近期评论标签，这里是从小工具里设置的非固定栏的内容，所以可以扩展为其它的工具内容。
|
1 |
<div class="mysd"><i class="fa fa-times"></i><?php dynamic_sidebar("sidebar-index"); ?></div> |
在main.js中添加
|
1 2 3 4 5 6 7 8 9 |
// 在最后一个Li后添加一个弹出查看评论的按钮 $('#footer .footer-menu:last-child').append('<li><a href="javascript:void(0)"><i class="fa fa-comments"></i> 近期评论</a></li>') //弹出近期评论 $('#footer .footer-menu li:last-child').click(function(){ $('.mysd').fadeIn('1000') }) $('.mysd>i').click(function(){ $('.mysd').fadeOut('1000') }) |
在自定义样式中设置，其中底部功能的菜单也做了固定：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
/*底部DIY*/ body{padding-bottom:55px} #footer {padding-top:10px;background:transparent;border:0;text-align:center} .footer-feature h4{display:none} #footer .footer-feature .footer-menu{position:fixed;bottom:0;left:0;width:100%;text-align:center;background:#fff;z-index:9999;border-top:1px solid #eee} #footer .footer-feature .footer-menu{overflow:hidden;white-space:nowrap} #footer .footer-feature .footer-menu li{padding:12px 0px;} #footer .footer-feature .footer-menu li a {font-size:14px;color:#5C5C5C;font-family: Georgia,'Microsoft JhengHei','微软雅黑';padding:2px 10px;border:1px solid #fff;border-radius:3px;transition:all .2s} #footer .footer-feature .footer-menu li a:hover {background:#DBDBDB;border-color:#C9CED2;color:#2C2C2C!important} .copyright{background:transparent!important;margin-top:0;} #footer p {font-size:14px} #main {margin-bottom:0} #footer .footer-theme, #footer .footer-feature, #footer .footer-friends {margin:0} #footer .footer-theme h4{display:none} #footer .footer-theme {display:block!important} /*自定评论列表-配合JS用*/ .mysd{ position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); width:340px; background:rgba(67,67,67,.3); padding:10px 10px 0 10px; border-radius:8px; z-index:99999; display:none } .mysd .widget{border-radius:6px;} .mysd i{position:absolute;right:30px;top:30px;cursor:pointer} |
四川省成都市崇州市 电信
2021-11-10 12:56
