最新公告
  • 欢迎您光临笨羊博客,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • 柒比贰美化-顶部菜单美化双列展示+搜索投稿

    这篇文章主要是导航的美化,其中包括柒比贰主题的logo后加文字,双列下拉菜单展示,右侧搜索投稿,头像下拉添加菜单

    柒比贰美化-顶部菜单美化双列展示+logo后跟文字

    1、顶部菜单下拉双列

    操作:复制下列代码到你的子主题的style.css里面,再次建议大家使用子主题修改样式,新版本要出来了,2.80成了绝版,你把里面的东西改了,到时候想修改的时候会很麻烦。

    关于某些数值需要修改的,自己去改一下,不一定适合你们的,div挤掉下来不可怕,没报错就不是大问题 (我的页面宽度设置是1310px,你们没改的应该是1140px,挤下来很正常)

    /*导航菜单分栏*/ .zrz-menu-in .sub-menu { width: 252px; } 
    .zrz-menu-in .sub-menu li { width: 50%; float: left; }
     .zrz-menu-in .sub-menu li a { padding: 13px; } 
    .zrz-menu-in .sub-menu li a:hover { background-color: #e7e7e7; margin-right: 0; margin-left: 0; }
     @media screen and (max-width: 768px) { 
    .menu-top { margin-left: 0; } 
    .zrz-menu-in .sub-menu li { width: unset; float: unset; }
     .zrz-menu-in .sub-menu li a { padding: 10px; }
     .zrz-menu-in .sub-menu li a:hover { background-color: #cccccc; color: #000; }
     }
     .zt-item { background: #fff; /*margin-bottom: 15px*/ } 
    @media (min-width:768px) 
    { .zt-item { /*margin-bottom: 30px*/ } }

     

    2、logo后加文字及把导航文章右移

    操作: 找到seven/inc/functions-templates.php里面,50行应该是一个“}”,后面跟上这么一句

    echo '<div class="site-des">服务器推荐<br>专业的整合资源收集整理平台!</div>';
    

    此处为css,位置同上style.css,加在后面

    .site-des {
        margin-left: 147px;
        float: left;
        font-size: 12px;
        color: #999999;
        margin-top: 12px;
        line-height: 18px;
    }
    @media screen and (max-width:670px){
    	.site-des{
        display:none  
    }
    }
    /*菜单右移*/
    .menu-top{
          margin-left:520px   }
    
    /*菜单间隔*/
    .menu-top ul>li {
        padding: 18px 5px;
    }
    

    2、搜索投稿:

    操作:找到seven/inc/functions-templates.php ~~搜索sign-button-r mar10-r,然后在他的下一行添加如下代码

     <button class="head-vip text" @click="showWriteBox"><i class="zrz-icon-font-dengpao iconfont"></i>投稿</button>
     <button class="sousuo text" @click="showSearchBox('search')"><i class="iconfont zrz-icon-font-sousuo"></i> 搜索</button>
    

    css样式添加在子主题style.css里面

    .sign-button-r .head-vip {
        display: block;
        width: 36px;
        height: 58px;
        color: #fff;
        font-size: 12px;
        background-color: #6cb5fe;
        border-radius: 0 0 6px 6px;
        top: -12px;
    }
    
    .sign-button-r .sousuo {
        left: -45px;
        width: 36px;
        height: 58px;
        color: #fff;
        font-size: 12px;
        background-color: #fe958b;
        border-radius: 0 0 6px 6px;
        top: -70px;
    }
    
    @media screen and (max-width: 768px) {
        .menu-top {
            margin-left: 0;
        }
        .zrz-menu-in .sub-menu li {
            width: unset;
            float: unset;
        }
        .zrz-menu-in .sub-menu li a {
            padding: 10px;
        }
        .zrz-menu-in .sub-menu li a:hover {
            background-color: #cccccc;
            color: #000;
        }
    }
    

    3.可以在会员窗口添加 我的购物车/任务链接

    inc/functions-templates.php ~144行

    <a href="<?php echo esc_url(home_url('/cart')); ?>">
    <i class="zrz-icon-font-haofangtuo400iconfont2gouwu iconfont"></i><?php echo __('购物车','7b2'); ?>
    </a>
    <a href="<?php echo esc_url(home_url('/task')); ?>">
    <i class="zrz-icon-font-liwu iconfont"></i><?php echo __('任务','7b2'); ?>
    </a>

    有问题请下方留言

    张昊翔博客原创文章,作者:,如若转载,请注明出处:
    1、本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
    2、分享目的仅供大家学习和交流,请不要用于商业用途!
    3、本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
    4、如有链接无法下载、失效或广告,请联系管理员处理!
    5、本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

    笨羊博客 » 柒比贰美化-顶部菜单美化双列展示+搜索投稿

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    笨羊博客
    一个关注网站建设、网站模板、搜索引擎、小程序的媒体博客

    发表评论