天兴工作室

zblog的导航栏管理设置一直是个大槽点。很多初次使用zblog的用户经常会迷失在这里，产生了无数的问题...

天兴工作室尝试一次性的把导航栏这个问题给说明白了，希望能成功。

首先：zblog安装成功后，默认的导航栏只有一个“首页”和一个“留言板”。如果你想把一个分类添加到导航栏里面，那么步骤是这样的：打开后台--分类管理--新建分类--加入导航栏菜单开关打开即可，如下图：

如果你想把一个“关于我们”之类的单页添加到导航栏里面，步骤是这样的：打开后台--页面管理--新建页面-加入导航栏菜单开关打开即可，如下图：

操作了以上这些之后，打开前台页面即可发现分类和页面都在导航栏里面了。但是，顺序不对啊！！！为什么留言本在分类的前面呢？

......这也是槽点，接着往下看。

打开后台--模块管理--找到导航栏点击编辑按钮打开，如下图：

打开后是这个样子的：

如果你根本不知道html是啥，对着上图红框里面的东西估计也是“卧槽这是什么鬼”。

很多新手到这里已经抑制不住自己的吐槽之心了，尽管吐槽吧！

吐槽完了还是得给解决办法不是。。。好在zblog大神“沉冰浮水”出了一款“链接管理中心”插件，此插件用推拽和添加删除等更直观的方式来管理导航栏。

插件详细介绍和下载地址：https://app.zblogcn.com/?id=1873。

zblog的导航栏功能一直被吐槽却从来不做优化！！！

如果是一个从来没有接触到html代码的站长，那么使用zblog肯定会被卡在导航栏这里。特别是下拉导航这个功能，很多主题都是自带了这个功能代码的，但是如果不懂html。操作起来简直是从入门到放弃了。

一直被吐槽吐槽，结果最近居然有用了！

官方今天发布了一个“链接管理中心”插件，集中优化了“导航栏”、“友情链接”、“网站收藏”这三个模块，并且新建模块也一并优化进去了。

界面是这个样子的：

终于不懂代码的小白用户也能轻松整出一个导航栏了，不容易。。。

当然还是希望下个zblog版本能直接把这个集成到程序里面去，不需要另外安装插件了。

有需要的用户赶紧安装起来把！

下载地址：https://app.zblogcn.com/?id=1873。

这是我自己折腾的一个超简单的自适应导航栏，整体思路也简单。

导航栏的html结构是这样的：

<div class="nav">
    <span class="nav-on"><i></i><i></i><i></i></span>
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">栏目一</a></li>
        <li><a href="#">栏目二</a></li>
    </ul>
</div>

js代码是这样的（依赖JQ库）：

$(".nav-on").click(function(){
    $(".nav>ul").slideToggle();
});

尝试解释下：用css查询判断，在电脑端的时候导航栏是正常显示的，导航栏触发按钮”<span class="nav-on"></span>“则隐藏起来。

当用户是用手机访问的时候，则把导航栏的<ul>做隐藏，然后用js操作点击导航栏触发按钮则显示整个<ul></ul>里面的内容。

最后大概写一个css出来：

.nav{line-height:50px;background: #0099cc;position: relative;}
.nav li{float:left;}
.nav li a{display:block;padding:0 20px;color:#fff;}
.nav span.nav-on{display:none;width:20px;position: absolute;top:12px;right:12px;cursor: pointer;}
.nav-on i{display:block;width:100%;height:5px;background:#fff;margin-bottom:5px;}
/*手机端css代码*/
@media screen and (max-width:768px){
.nav ul{display:none;width:100%;}
.nav ul li{width:100%;}
.nav span.nav-on{display:block;}
}

如果需要css美化则需要根据自己需求来，本文只提供一个办法。

额，出去玩了几天很累。可是文章还是要更新的，不然百度就不喜欢我了...

今天来水一篇“导航栏下拉至一定高度后固定在顶部的特效”，也有同学喜欢叫跟随导航什么的。反正就是这个么意思。先直接上代码：

<script type="text/javascript">
$(function(){
var nav=$(".nav"); //得到导航对象
var win=$(window); //得到窗口对象
var sc=$(document);//得到document文档对象。
win.scroll(function(){
  if(sc.scrollTop()>=100){
    nav.addClass("fixednav"); 
  }else{
   nav.removeClass("fixednav");
  }
})  
})
</script>

将这个js放到要实现效果的页面里面去，然后我们要修改的是第三行的.nav，“nav“改成你自己页面导航栏的class；第七行的”100“为下拉到100个像素的时候触发特效，可以自行修改至合适的高度。

然后在css文件里面增加这个属性：

.fixednav {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 999;
}

这样就差不多完成了。

大概讲下这个js的意思，判断下拉到一定高度的时候，给导航栏的div插入一个”fixednav“属性，然后给”fixednav“加上固定在顶部的参数。

嗯，大家请自行折腾，有什么不懂的欢迎在本文下面评论区留言，请勿直接加我QQ问.....