漢堡選單
1
2
3
4
5
6
7
8
9
|
<div class="header">
<ul class="menu">
<li><a href="#">選單一</a></li>
<li><a href="#">選單二</a></li>
<li><a href="#">選單三</a></li>
<li><a href="#">選單四</a></li>
</ul>
<a class="menuicon" href="#">選單按鈕</a>
</div>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
.header{
height: 80px;
}
.menu{
float: right;
}
.menu li{
float: left;
}
.menuicon{
display: none;
}
.show{
max-height: 600px; /*選單展開高度*/
}
@media (max-width:768px){
.menu{
max-height: 0px; /*選單關閉高度*/
overflow: hidden; /*讓文字也隱藏*/
position: absolute;
top: 80px; /*從header下面開始出現*/
left: 0; /*左右兩邊滿版*/
right: 0; /*左右兩邊滿版*/
z-index: 100;
transition: max-height 2s; /*動態效果*/
}
.menu li{
float: none;
}
.menuicon{
display: block;
}
.show{
max-height: 800px;
}
}
|
1
2
3
4
|
$(".menuicon").click(function(){
e.preventDefault();
$(".menu").toggleClass("show");
});
|
側邊選單(Offcanvas)
- 最外層容器max-width
- 右側內容width給%寬度
- 右側內容用margin-left向左推選單寬度
1
2
3
4
5
6
7
8
9
10
|
<a class="menuicon" href="#">選單按鈕</a>
<aside>
<a class="close" href="#">X</a>
<ul class="menu">
<li><a href="#">選單一</a></li>
<li><a href="#">選單二</a></li>
<li><a href="#">選單三</a></li>
<li><a href="#">選單四</a></li>
</ul>
</aside>
|
1
2
3
4
5
6
7
8
9
10
11
|
aside{
position: absolute;
width: 300px; /*固定寬，避免內容被壓縮*/
top: 0;
bottom: 0;
transform: translate(-300px);
transition: 1s;
}
.show{
transform: translate(0px);
}
|
1
2
3
4
5
6
7
8
|
$(".menuicon").click(function(){
event.preventDefault();
$("aside").addClass("show");
});
$(".close").click(function(){
event.preventDefault();
$("aside").removeClass("show");
});
|
簡易QA選單效果
1
2
3
4
5
6
7
8
9
10
11
|
<ul class="menu">
<li>項目一
<a>連結一</a>
</li>
<li>項目二
<a>連結二</a>
</li>
<li>項目三
<a>連結三</a>
</li>
</ul>
|
1
2
3
|
a{
display: none;
}
|
1
2
3
4
|
$(".menu li").click(function(){
$(this).find("a").slideToggle();
$(this).siblings().find("a").slideUp();
});
|
只有點擊的a連結展開，再次點擊收闔，其他連結也收闔
彈跳視窗(監聽事件)
1
2
|
<a>連結一</a>
<div class="box"></div>
|
1
2
3
4
|
$("body").on("click","a",function(){//.on("觸發事件","選擇器")
alert();
});
$(".box").html("<a>連結二</a>");
|
.on()不論程式碼先後順序全部都可以監聽
刪除選單
1
2
3
4
5
|
<ul class="menu">
<li>項目一<span>X</span></li>
<li>項目二<span>X</span></li>
<li>項目三<span>X</span></li>
</ul>
|
1
2
3
|
$(".menu li span").click(function(){
$(this).parent().remove();
});
|
點擊X，刪除該項目
回到頂端
1
2
3
4
5
|
a{
position: fixed;
right: 0;
bottom: 0;
}
|
1
2
3
4
5
6
|
$("a").click(function(){
event.preventDefault();
$("html,body").animate({//對整個頁面
scrollTop:0
},800);//花0.8秒
});
|
滾動至錨點
1
2
3
4
5
6
7
8
|
<ul class="menu">
<li><a href="#one">連結一</a></li>
<li><a href="#two">連結二</a></li>
<li><a href="#three">連結三</a></li>
</ul>
<section id="one">第一部分</section>
<section id="two">第二部分</section>
<section id="three">第三部分</section>
|
1
2
3
4
5
6
|
$("a").click(function(e){
e.preventDefault();
var target = $(this).attr("href"); //找出a連結對應到的id
var targetPos = $(target).offset().top; //該id當前視窗的相對頂部
$("html,body").animate({scrollTop:targetPos},3000);
});
|
<a href="先對應到">，<section id="這裡">
滾動視窗到章節處出現效果
1
2
3
|
<section id="one" data-color="yellow">第一部分</section>
<section id="two" data-color="green">第二部分</section>
<section id="three" data-color="blue">第三部分</section>
|
1
2
3
4
5
|
section{
height: 1000px;
transition: 1s;
background-color: red;
}
|
1
2
3
4
5
6
7
8
9
10
11
|
$(window).scroll(function(){
var twoPos = $("#two").position().top; //抓取第二部分的高度
var scrollTop = $(window).scrollTop(); //抓取視窗滾動的距離
var windowHeight = $(window).height(); //抓取視窗的高度
if (twoPos <= (scrollTop + windowHeight / 2 )){
$("section").each(function(){ //同時抓取每個section
var dataColor = $(this).data("color"); //讀出每個裡面的data值
$(this).css("background-color",dataColor); //將data值顯示在樣式上
})
}
});
|
滾動視窗到章節處出現淡入效果
1
2
3
4
5
|
<section id="one">第一部分</section>
<section id="two">第二部分
<div class="box animated"></div>
</section>
<section id="three">第三部分</section>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
section{
height: 1000px;
}
.box{
width: 30px;
height: 30px;
background-color: red;
}
.animated{
opacity: 0;
transform: translateY(50px);
transition: all 2s;
}
.fadeIn{
opacity: 1;
transform: translateY(0px);
}
|
1
2
3
4
5
6
7
8
9
10
11
|
$(window).scroll(function(){
$(".animated").each(function(){
var thisPos = $(this).offset().top;
var scrollTop = $(window).scrollTop();
var windowHeight = $(window).height();
console.log(thisPos)
if((windowHeight + scrollTop) >= thisPos){
$(this).addClass("fadeIn");
}
})
});
|
滾動背景錯動
1
2
3
|
<section id="one">第一部分</section>
<section id="two">第二部分</section>
<section id="three">第三部分</section>
|
1
2
3
4
5
6
7
8
|
#two{
height: 1000px;
background-image: url("https://picsum.photos/1000/1000.jpg")
}
#three{
height: 1000px;
background-image: url("https://picsum.photos/1000/1000.jpg")
}
|
1
2
3
4
5
|
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
$("#two").css('background-position-y', (scrollTop / 2) + 'px');
$("#three").css('transform','translateY(' + (scrollTop / 2) + 'px)');
});
|
其他相關