这篇文章主要是导航栏部分的页面布局和样式。
由于需要用到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。
现阶段效果:
---------------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选项,会员登录方式更加合理;
现在的效果(三种不同的浏览器窗口大小):
导航栏这部分到这里基本就算完成了,之后应该就不会再变了,下一部分是轮播图。