前端网站练习blog_2 导航栏

这篇文章主要是导航栏部分的页面布局和样式。

由于需要用到Bootstrap和JQuery，所以需要在index.html文件中导入：

    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="./js/jquery.singlePageNav.min.js"></script>
    <script type="text/javascript" src="./js/bootstrap.min.js"></script>
    <script type="text/javascript" src="./js/index.js"></script>

以下为导航栏HTML部分的代码：

<!-- 导航条 -->
    <nav id="header" class="navbar navbar-expand-md navbar-light bg-light" role="navigation">
        <div class="container">
            
            <div class="navbar-header">
                <a href="#carouel" class="navbar-brand">COFFEE</a>
            </div>

            <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbar">
                    <span class="navbar-toggler-icon"></span>
            </button>

            <div id="navbar" class="collapse navbar-collapse justify-content-end"> 
                <ul class="nav navbar-nav">
                    <li class="active nav-item">
                        <a class="nav-link" href="#carouel">HOME</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#machine">MACHINE</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#products">PRODUCTS</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#shop">SHOP</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#about">ABOUT</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#about">CONTACT</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">LOG IN</a>
                    </li>
                </ul>   
            </div>
        </div>
    </nav>

JavaScript：

$(function(){
    //调整浏览器窗口大小时刷新当前页面，个人感觉这部分可有可无，对于这个网页我觉得还是不要的好，但是还是留做参考
    //$(window).resize(function(){
    //    refresh();
    //});
    //获得当前页面并重新加载
    //function refresh(){
    //    location.reload();
    //}

    //导航切换，添加active类下的所有同级元素
    $("#navbar .nav>li").click(function(){
        $(this).addClass("active").siblings().removeClass("active");
    });
    //平滑切换，这里引入了jquery.singlePageNav.min.js插件
    $(".nav").singlePageNav({
        offset: 70
    });
    //折叠导航栏点击关闭
    $(".navbar-collapse a").click(function(){
        $(".navbar-collapse").collapse("hide");
    });

})

CSS：

body{
    font-family: 'Times New Roman', Times, serif;
}
a:hover{
    text-decoration: none;
}

/*nav bar*/
#header{
    background: #fff;
    border: none;
    box-shadow: 0px 2px 8px 0px rgba(50, 50, 50, 0.25);
    padding: 0px;
    /* weight:70px;已被删除 */
}

#header .navbar-brand{
    font-size: 30px;
    font-weight: bold;
    color: #207a16;
    height: 70px;
    line-height: 60px;/* 老版本这里的class名写错了导致样式没加载 */
                      /* 老版本的行高与新版本不匹配，由35px改为60px */
}
#navbar .navbar-nav>li>a{
    font-size: 16px;
    color: #666;
    height: 70px;
    line-height: 35px;
    padding-top: 14px; /* 添加一个padding-top，使选中框与导航条高度匹配 */
}
#navbar .nav>li.active>a{
    color: #207a16;
    padding-top: 12px; /* padding-top减了1个px，匹配导航栏高度 */
    font-weight: bold;
    border-radius: 3%;
    background-color: #f2f2f2;
    border-top: 2px solid green;
}

/* navbar-toggler */
#header .navbar-toggler{
    margin: 15px; /* 删掉之前版本的margin-top，改为现在的样式，调整折叠导航栏按钮位置 */
    border: 0px;
}

@media only screen and (max-width: 641px){
    
    /* nav-bar */
    #navbar .nav>li.active>a{
        background-color: #fff;
        border-top: none;
    }
    #navbar .navbar-nav>li>a{
        font-size: 16px;
        color: #666;
        height: 40px;
        line-height: 20px;
        border-top: 1px solid #ddd;
    }
}

这里使用了 .navbar 类来创建一个标准的导航栏，后面可以紧跟: .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。但是因为我在导航栏部分使用了折叠导航栏，如果删除 .navbar-expand-md 类，导航链接会一直隐藏，且切换按钮会一直显示，所以使用的是 .navbar-expand-md 类。

示例项目中使用的是Bootstrap3，这里更新为了Bootstrap4。

现阶段效果：

扫描二维码关注公众号，回复： 3127433 查看本文章

 ---------------2018.9.6更新---------------

本次更新解决的问题：

1.调整所引入的js文件的顺序，之前没有注意，将index.js文件放到了jquery库文件和bootstrap库文件之前，导致加载jQuery的顺序错误，依赖于jQuery的其它JavaScript脚本先于jQuery加载完成并执行。这时jQuery尚未加载，因此依赖于jQuery的代码调用jQuery的话就会出错，将jQuery库放在依赖于jQuery的JavaScript脚本之前，并且将这些代码放入document.ready来确保DOM加载完毕；

2.删除了index.html文件中多余的类，排除了部分类之间的重复使用导致的过多空白区域；

3.完成导航栏部分JavaScript代码，实现折叠导航栏的展开与收回；

需要解决的问题：

1.浏览器窗口缩小后折叠导航栏无法将浏览器左右两端填满；

2.导航栏在一般模式下上下无法填满，上下各留有一条细缝；

下一次更新时需要完成的目标：

1.尽快解决上述的问题；

2.完成导航栏部分；

 ---------------2018.9.11更新---------------

1.导航栏调的没有问题了，甚至轮播图的部分也做完了，但是拖着没更。。。

2.导航栏这里就只管导航栏的部分；

3.代码还是更新在上面，将会把老的覆盖，更改的地方会备注，这样也容易查看，以免乱掉，但是效果会放在这里。

更新内容：

1.index.css中导航栏的样式做一些微调，使栏内元素与导航栏更加匹配；

2.index.css中添加@media，使导航栏更好地适应不同屏幕大小；

3.导航栏右侧添加LOG IN选项，会员登录方式更加合理；

现在的效果（三种不同的浏览器窗口大小）：

 

导航栏这部分到这里基本就算完成了，之后应该就不会再变了，下一部分是轮播图。