RIPRO主题美化:导航毛玻璃效果

这个效果主要是用在RIPRO主题导航菜单上,目前很多站点都在使用,文字表达不出效果,可参考本站导航查看,本教程以RIPRO父级主题为例,子主题也可参考本教程!

RIPRO主题美化:导航毛玻璃效果
RIPRO主题导航毛玻璃效果美化

RIPRO主题美化教程:

1.找到RIPRO主题:“ripro/parts/navbar.php”

2.搜索如下代码:

<header class="site-header

3.将这一行代码替换为如下代码:

<header class="site-header frosted navFix" id="navHeight">
暂无优惠

已有4人支付

5.id后面的吸附不需要的可删除,一般用于菜单上方的黑条,需要的可在:“ripro/footer.php”合适位置添加效果代码:

<script>
//内容信息导航吸顶
    $(function () {
        var navHeight = $("#navHeight").offset().top;
        var navFix = $("#navHeight");
        if (navHeight > 36) {
            navFix.addClass("navFix");
        }
        window.onscroll = function () {
            if ($(this).scrollTop() > navHeight || $(this).scrollTop() > 37) {
                navFix.addClass("navFix");
            } else {
                navFix.removeClass("navFix");
            }
        }
    })
    $(document).ready(function () {

    })
    var ndt = $("#help dt");
    var ndd = $("#help dd");
    ndd.eq(0).show();
    ndt.click(function () {
        ndd.hide();
        $(this).next().show();
    });
</script>

6.如果是没添加后台开关的,直接刷新即可,添加后台开关的到后台打开效果即可!

喜欢 0
1. 本站所有源码、模板、插件等其他资源,都不包含免费技术服务请大家谅解!
2. 本站提供的所有资源不免费提供个人需要的资源修改、美化、功能定制!
3. 如遇需要解压密码,则解压密码为"www.360mb.net"!
4. 由于源码属于可复制性产品,发货后禁止买家以各种理由退款!!
5. 本站提供资源如遇源码失效,功能异常等等可提供退款服务,可参考《退款规则》!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如用于商业或者非法用途,与本站无关,一切后果请用户自负!

360模板吧 » RIPRO主题美化:导航毛玻璃效果

发表评论