jQuery学习（移动导航栏）

最新推荐文章于 2021-06-10 15:31:59 发布

原创最新推荐文章于 2021-06-10 15:31:59 发布 · 345 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #jQuery #学习 #干货 #插件

jQuery 同时被 3 个专栏收录

1 篇文章

订阅专栏

插件

1 篇文章

订阅专栏

学习

1 篇文章

订阅专栏

本文介绍了一种使用jQuery和CSS实现的移动设备友好型导航栏插件，详细讲解了sans-serif字体、display属性、toggleClass方法、inline-block布局、transform和transition效果的应用，以及如何通过动画和交互增强用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery学习（移动导航栏）

1.sans-serif 值
　　eg：font-family: ‘Lato’, sans-serif;
　　sans-serif与serif对应，是“无衬线字体”，“衬线”即处于字母开头结尾处的笔画有额外的装饰，且其粗细会有不同。使用“无衬线字体”是为了保证调用系统中的字体。

2.display: table
　　eg：display: table;
　　一般来讲display属性是用来表示某元素是否显示。详细来讲display:none和visibility:hidden之间的区别是：

display:none	visibility:hidden
彻底消失，不在文档流中占位，浏览器也不会解析该元素	视觉上消失，可理解为透明度为0，在文档流中占位，浏览器会解析该元素
	性能上要好
页面第一次加载时会产生一次回流，当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等时，页面会重新构建，此为回流	不会引起回流

重新回到display: table;它相当于表格的作用，除此外还有如: 在这里插入图片描述　　注意：table-cell会被其他一些CSS属性破坏，如float, position:absolute，所以，不要同时使用display: table-cell　　float: left　　position: absolute。其对宽度高度敏感，响应padding属性，却对margin值无反应。（不知道这个有什么实际意义，希望各位能慷概解答）

3..toggleClass("") 方法
　　eg：$(‘body’).toggleClass(‘open’);
　　一般用于添加或删除类名，非常适合用于状态转换的方法。具体运用是，设置好前一个状态和后一个状态的样式（后一个状态调用时需加上添加后的类名），处于第一个状态时，第二个状态的样式未调用，而当执行某些方法时调用.toggleClass("")为其增加一个类名，这时因为添加了类名，则正好调用到后一个状态的样式，完成状态转换。
　
4.display: inline-block
　　eg：display: inline-block;
　　接上面display一条，常用的display值有

inline：使元素变成行内元素，即可以与其他行内元素共享一行，不会独占一行。不能更改元素的height，width的值，大小由内容撑开。可以使用padding，margin的left和right产生边距效果，但是top和bottom不行。
block：使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度。能够改变元素的height，width的值。可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果.
inline-block：结合了inline与block的一些特点，用通俗来讲，就是不独占一行的块级元素。
　　
那么inline-block和float布局有什么不同呢：

display：inline-block	float：left
元素不会脱离文本流	元素脱离文本流，父元素高度坍塌（需要对父元素使用overflow：hidden闭合浮动）
排列有序	参差不齐
块间会有间隙（需要对父元素添加font-size:0来去除空白符影响）
适合水平排列	适合浮动布局，如：文字环绕

5.transform 属性
　　eg：transform:rotate(7deg);
　　transform属性向元素应用 2D 或 3D 转换，允许我们对元素进行旋转、缩放、移动或倾斜。分别对应有：
　　transform:rotate(7deg);
　　-ms-transform:rotate(7deg); 　　　　/ IE 9 /
　　-moz-transform:rotate(7deg); 　　　／ Firefox /
　　-webkit-transform:rotate(7deg);　　 / Safari 和 Chrome /
　　-o-transform:rotate(7deg); 　　　　/ Opera */
　　其常用值有：

值	作用
none	不进行转换
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵
translate(x,y)	定义 2D 转换
translateX(x)	定义转换，只是用 X 轴的值
scale(x,y)	定义 2D 缩放转换
scaleX(x)	通过设置 X 轴的值来定义缩放转换
rotate(angle)	定义 2D 旋转，在参数中规定角度
rotateX(angle)	定义沿着 X 轴的 3D 旋转
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换
perspective(n)	为 3D 转换元素定义透视视图

6.opacity 属性
　　eg：opacity: 0;
　　设置元素不透明度级别从 0.0 （完全透明）到 1.0（完全不透明）。

7.transition 属性
　　eg：transition: width 2s;
　　transition属性用于实现动态过渡动作，其包含了

transition-property：设置过度动作的属性，如：长、宽
transition-duration：完成过度所用的时间（必须设置）
transition-timing-function：速度效果（默认linear匀速、ease慢快慢、ease-in以慢速开始）
transition-delay：过度开始前的延迟，默认为0
他和transform一样对于不同浏览器设置名称也不同：
transition: width 2s;
-moz-transition: width 2s; 　　　/* Firefox 4 /
-webkit-transition: width 2s; 　　/ Safari 和 Chrome /
-o-transition: width 2s; 　　　　/ Opera */

8.:nth-child() 选择器
　　eg：li:nth-child(2)
　　:nth-child() 选择器可选取规定元素或未规定元素的第几个子元素。括号中亦可选取单双（odd even）或是使用公式。
　　
9.cursor属性
　　eg：cursor: pointer;
　　cursor属性用于改变当鼠标放在元素上时的光标种类：

值	作用
default	默认光标（通常是一个箭头）
auto	默认浏览器设置的光标
crosshair	光标呈现为十字线
pointer	光标呈现为指示链接的指针（一只手）
move	表示某对象可被移动
e-resize	此光标指示矩形框的边缘可被向右（东）移动（以此类推南、北···）
text	光标指示文本
wait	光标指示程序正忙（通常是一只表或沙漏）
help	光标指示可用的帮助（通常是一个问号或一个气球）

10.其他属性

-border-radius: 50%;
圆角边框
-backface-visibility: hidden;
隐藏被旋转的 div 元素的背面
-tap-highlight-color:rgba(0,0,0,0);
点击的元素时，可覆盖显示的高亮颜色
flex-direction: column;
设置元素内弹性盒元素的方向为相反的顺序
z-index: 1001；
作用于设置上下层优先，只有在层有绝对定位或者相对定位的时候才会起作用，其值设置过大只是为了保证一直存在于顶层
zoom：1；
解决IE浏览器8以下，触发IE浏览器的haslayout，解决IE下的浮动，margin重叠等一些问题（不常用）

移动导航栏插件

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>移动导航栏插件</title>
<!--适应移动端-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--css样式-->
<style>

body {
  font-family: 'Lato', sans-serif;
  background-color: rgb(25,25,25); 
  margin: 0;
  padding: 0;
}
/* ***********************************************************
* #global-nav
* *********************************************************** */
.open #global-nav {
  z-index: 1000;
  visibility: visible;
}
#global-nav {
  visibility: hidden;
  position: fixed;
  display: table;
  vertical-align: middle;
  color: #fff;
  top: 0;
  height: 100%;
  width: 100%;
  text-align: center;
  font-size: 16px;
}
#global-nav ul {
  display: table-cell;
  vertical-align: middle;
  list-style: none;
  padding: 30px;
}
#global-nav a {
  color: #fff;
  text-decoration: none;
  display: block;
  padding: 10px 0;
}

/* ***********************************************************
* nav-list
* *********************************************************** */
#global-nav ul li {
  opacity: 0;
  -webkit-transform: scaleX(0) translateX(-260px);
  transform: scaleX(0) translateX(-260px);
  -webkit-transition: none;
  transition: none;
}
.open #global-nav ul li {
  opacity: 1;
  -webkit-transform: scaleX(1) translateX(0);
  transform: scaleX(1) translateX(0);

  -webkit-transition: all .3s ease-out;
  transition: all .3s ease-out;

  -webkit-transition-delay: .1s;
  transition-delay: .1s;
}
.open #global-nav ul li:nth-child(2) {
  -webkit-transition-delay: .2s;
  transition-delay: .2s;
}
.open #global-nav ul li:nth-child(3) {
  -webkit-transition-delay: .3s;
  transition-delay: .3s;
}
.open #global-nav ul li:nth-child(4) {
  -webkit-transition-delay: .4s;
  transition-delay: .4s;
}
.open #global-nav ul li:nth-child(5) {
  -webkit-transition-delay: .5s;
  transition-delay: .5s;
}

/* ***********************************************************
* #nav-bg
* *********************************************************** */
#nav-bg {
  content: "";
  width: 60px;
  height: 60px;
  left: calc((100% - 60px)/2);
  bottom: 10px;
  display: block;
  position: fixed;
  background: #17A669;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -webkit-transition: all .3s ease-out;
  transition: all .3s ease-out;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: scale(1);
  transform: scale(1);

}
.open #nav-bg {
  -webkit-transform: scale(30);
  transform: scale(30);
  -webkit-transition: all .6s ease-out;
  transition: all .6s ease-out;
}

/* ***********************************************************
* #nav-toggle
* *********************************************************** */
#nav-toggle {
  display: block;
  position: fixed;
  left: calc((100% - 60px)/2);
  bottom: 10px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  padding: 15px;
  z-index: 1001;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}

#nav-toggle div {
  position: relative;
  display: flex;
  flex-direction: column;
}
#nav-toggle span {
/*   display: block; */
  height: 2px;
  width: 100%;
  background: #fff;
/*   left: 0; */
  zoom: 1;
  -webkit-transition: .35s ease-in-out;
  transition: .35s ease-in-out;
  
  margin: 4px 0;
}

#nav-toggle span:nth-child(1) {
  top: 0;
}
#nav-toggle span:nth-child(2) {
  top: 8px;
}
#nav-toggle span:nth-child(3) {
  top: 16px;
}

.open #nav-toggle {
  background: transparent;
}

.open #nav-toggle span {
  background: #fff;
}

.open #nav-toggle span:nth-child(1) {
  top: 9px;
  -webkit-transform: translateY(10px) rotate(-135deg);
  transform: translateY(10px) rotate(-135deg);
  zoom: 1;
}
.open #nav-toggle span:nth-child(2) {
  width: 0;
  left: 50%;
}
.open #nav-toggle span:nth-child(3) {
  top: 9px;
  -webkit-transform: translateY(-10px) rotate(135deg);
  transform: translateY(-10px) rotate(135deg);
  zoom: 1;
}
</style>
<!--引用jquery库-->
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
</head>

<body>
<div id="top-head-inner">
    <div id="nav-toggle">
        <div>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
    <nav id="global-nav">
        <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">PRODUCT</a></li>
            <li><a href="#">WORKS</a></li>
            <li><a href="#">COMPANY</a></li>
            <li><a href="#">CONTACT</a></li>
        </ul>
    </nav>
    <div id="nav-bg"></div>
</div>
<script type="text/javascript">
$('#nav-toggle').click(function(){
  $('body').toggleClass('open');
});
</script>

</body>
</html>