简历：模块一（响应式导航以及透明状态背景变化）
2019-12-06 本文已影响0人
1CC4
一、效果图
二、html代码
<nav id="nav" class="dNavStyle">
<div class="nav_Navigation">
<ul>
<li><a href="javaScript:void(0)" onclick="gotoTarget('#content_self')">基本资料</a></li>
<li><a href="javaScript:void(0)" onclick="gotoTarget('#content_demo')">项目经验</a> </li>
<li><a href="javaScript:void(0)" onclick="gotoTarget('#content_skill')">专业技能</a> </li>
<li><a href="javaScript:void(0)" onclick="gotoTarget('#content_number')">工作经历</a> </li>
<li><a href="javaScript:void(0)" onclick="gotoTarget('#content_evaluate')">自我评价</a> </li>
<li><a href="javaScript:void(0)" onclick="gotoTarget('#footer_contact')">联系方式</a> </li>
</ul>
</div>
</nav>
二、效果分析
1、鼠标移入字体变色
2、导航栏背景初始透明，鼠标滚动背景变色（平滑）
3、导航栏固定顶部不动
4、点击导航菜单平滑跳转到指定位置
5、使用手机尺寸导航折叠
6、手机尺寸事点击菜单后将导航折叠起来
三、效果实现
1、鼠标移入字体变色
- 就是一个简单的
hover属性
.nav_Navigation li a:hover {
color: #F4D03F;
font-weight: bold;
}
2、导航栏背景初始透明，鼠标滚动背景变色（平滑）
- 分为两个方面：
1、初始值：背景透明，滚动之后回到顶部导航也透明
2、当窗口滚动到一定高度的时候设置背景为黑色，并且高度变小，平滑过渡效果
$(window).scroll(function () {
// 获取导航nav的高度
let navHeight = $("#nav").height();
// 获取滚动条离滚动条的距离
let windowsHeight = $("#nav").offset().top
// 判断当滚动条离顶的距离与导航高度比较
if (windowsHeight > navHeight) {
$("#nav").addClass("sNavStyle");//添加属性
$("#nav").removeClass("dNavStyle");//移除原来的属性
} else {
$("#nav").removeClass("sNavStyle");
$("#nav").addClass("dNavStyle");
}
});
3、当窗口不滚动直接在页面刷新的时候（导航栏没在顶部）导航也是透明
- 出现这种情况应该一开始就判断高度，然后窗口滚动的时候也作出判断
- 封装一个方法滚动的时候调用，一开始的时候也调用执行
function windowIng() {
// 获取导航nav的高度
let navHeight = $("#nav").height();
// console.log(navHeight);
// 获取滚动条离导航nav的距离
let windowsHeight = $("#nav").offset().top
// console.log(windowsHeight);
// 判断当滚动条离顶的距离也导航高度比较
if (windowsHeight > navHeight) {
$("#nav").addClass("sNavStyle");
$("#nav").removeClass("dNavStyle");
} else {
$("#nav").removeClass("sNavStyle");
$("#nav").addClass("dNavStyle");
}
}
// 窗口滚动事件
$(window).scroll(function () {
windowIng();
});
windowIng();
- 背景变化CSS
.dNavStyle {
background: transparent;/*背景透明*/
height: 90px;
line-height: 90px;
}
.sNavStyle {
background: black;
height: 55px;
line-height: 55px;
}
- 平滑变化通过设置transition，当导航变化的是时候背景和高度的一个渐变效果
transition: background 0.7s ease-in-out, line-height 0.7s ease-in-out;
3、导航栏固定顶部不动
- 固定定位并且将导航栏的层级设置高一些
#nav {
width: 100%;
z-index: 10;
position: fixed;
}
4、点击导航菜单平滑跳转到指定位置
-
a标签的href属性会与onclik属性冲突所以要先屏蔽掉href
javaScript:void(0)
<a href="javaScript:void(0)" onclick="gotoTarget('#content_self')")></a>
gotoTarget = function (target) {
document.querySelector(target).scrollIntoView({
behavior: 'smooth'
});
}
注意：创建方法的时候要使用上述的样式，使用function name(){}会出现onclick不能调用的错误
5、使用手机尺寸导航折叠
- 使用bootstrap的响应式插件
responsive-nav（链接官网下载） - 引入插件
<link rel="stylesheet" href="css/responsive-nav.css">
<script src="js/responsive-nav.js"></script>
注意：使用bootstrap的插件所以一定要引入bootstrap和jQuery
配置参数：
var nav = responsiveNav(".nav_Navigation", {
animate: true, // Boolean: 是否启动CSS过渡效果（transitions）， true 或 false
transition: 500, // Integer: 过渡效果的执行速度，以毫秒（millisecond）为单位
label: "", // 导航切换的标签
insert: "after", // 在导航之前或之后插入切换
customToggle: "", // 指定自定义切换的ID
navActiveClass: "js-nav-active", // String: Class that is added to <html> element when nav is active
openPos: "relative", // 打开的导航的位置，相对的或静态的
});
- 设置布局文件：
.nav-toggle:before {
background: rgba(0, 0, 0, 0.5);
border-radius: 0 0 50% 50%;
/* border-top: 1px solid rgb(194, 194, 194); */
color: white;
font-size: 1.75em;
line-height: 50px;
text-transform: none;
position: absolute;
content: "≡";
text-align: center;
width: 20%;
right: 0;
}
.nav-toggle.active::before {
font-size: 1.75em;
content: "o";
}
- 媒体查询响应式
@media改变PC端事的布局样式
@media screen and (max-width: 40em) {
#nav {
width: 100%;
background: none;
}
.nav_Navigation {
width: 100%;
display: flex;
flex-flow: row nowrap;
align-items: flex-end;
}
.nav_Navigation ul {
width: 100%;
display: flex;
flex-flow: column nowrap;
align-items: flex-end;
text-align: right;
}
.nav_Navigation ul li {
background: rgba(0, 0, 0, 0.5);
height: 45px;
width: 20%;
display: inline-block;
line-height: 45px;
color: white;
}
}
6、手机尺寸事点击菜单后将导航折叠起来
- 配置参数就可以了
closeOnNavClick: true,
全部jq代码
/*===================================
设置导航栏的效果
====================================*/
function windowIng() {
// 获取导航nav的高度
let navHeight = $("#nav").height();
// console.log(navHeight);
// 获取滚动条离导航nav的距离
let windowsHeight = $("#nav").offset().top
// console.log(windowsHeight);
// 判断当滚动条离顶的距离也导航高度比较
if (windowsHeight > navHeight) {
$("#nav").addClass("sNavStyle");
$("#nav").removeClass("dNavStyle");
} else {
$("#nav").removeClass("sNavStyle");
$("#nav").addClass("dNavStyle");
}
}
// 窗口滚动事件
$(window).scroll(function () {
windowIng();
});
windowIng();
/* ==================================
导航响应式
=====================================*/
var nav = responsiveNav(".nav_Navigation", {
animate: true, // Boolean: 是否启动CSS过渡效果（transitions）， true 或 false
transition: 500, // Integer: 过渡效果的执行速度，以毫秒（millisecond）为单位
label: "", // 导航切换的标签
insert: "after", // 在导航之前或之后插入切换
customToggle: "", // 指定自定义切换的ID
closeOnNavClick: true, // Boolean: Close the navigation when one of the links are clicked
navActiveClass: "js-nav-active", // String: Class that is added to <html> element when nav is active
openPos: "relative", // 打开的导航的位置，相对的或静态的
jsClass: "js", // 'JS启用'类，这是添加到<html>
debug: false, // 调试消息是否记录到控制台
init: function () { }, // 初始化的回调
open: function () { }, // 打开
close: function () { } // 关闭
});
